若依中初始多表格及自定义查询和依赖查询的一种实现方式

举报
夜郎king 发表于 2025/01/16 12:47:05 2025/01/16
【摘要】 本文以若依单体化架构项目为例，重点介绍如何在若依当中实现多表格统一初始化，如何将表格与查询参数表单进行绑定实现差异化提交，最后介绍表单依赖查询的实现。

​

 目录


前言

1、多表格管理的必要性与挑战

2、自定义查询的灵活性与复杂性

3、依赖查询的关联性与实现难度

一、初始化多表格

1、表格初始化

2、多表格的初始化 

二、绑定自定义查询表单

1、查询表单绑定

2、表单查询原理

三、关联表单查询

1、子表单定义

2、联动查询示例

四、总结


前言

        在当今信息化飞速发展的时代，企业对数据管理和分析的需求日益增长。作为一款优秀的开源企业级快速开发平台，若依以其强大的功能和灵活的扩展性，为众多企业提供了便捷高效的解决方案。其中，多表格管理、自定义查询和依赖查询作为若依平台的重要功能模块，对于满足企业复杂多变的数据处理需求具有重要意义。

​

1、多表格管理的必要性与挑战

        在企业的日常运营中，数据往往分散在多个不同的表格中，例如员工信息表、销售记录表、库存清单表等。多表格管理的引入，旨在打破数据孤岛，实现数据的整合与共享。通过将多个相关联的表格进行统一管理，企业可以更直观地了解数据之间的关联关系，从而进行更全面、更深入的数据分析。多表格管理也面临着诸多挑战。首先，不同表格的数据结构和格式可能存在差异，如何实现不同表格之间的有效整合是一个技术难题。此外，多表格管理还涉及到数据一致性和完整性的问题，如何确保不同表格中的关联数据保持一致，避免出现数据错误和冗余，也是需要解决的关键问题。

2、自定义查询的灵活性与复杂性

        自定义查询是企业根据自身特定的业务需求，对数据库中的数据进行灵活查询的一种方式。它允许用户根据自己的需求，选择不同的查询条件、排序规则和结果字段，从而获取到符合自己需求的数据结果。然而，自定义查询的复杂性也不容忽视。比如在web界面中如何将表格和查询表单进行绑定，实现自定义参数的查询表单构建。

3、依赖查询的关联性与实现难度

        依赖查询是指在查询过程中，一个查询的结果依赖于另一个查询的结果。例如，在订单管理中，企业可能需要先查询出所有已付款的订单，然后再根据这些订单查询出对应的发货记录。这种查询方式能够帮助用户更清晰地了解业务流程中的各个环节及其相互关系，从而更好地进行业务管理和决策。依赖查询的关联性体现在它能够将不同的查询条件和结果有机地结合起来，形成一个完整的业务逻辑链条。因此，如何在若依当中实现依赖查询就显得比较重要，面对这种常规需求也是值得学习的。

        本文就是在这种的背景之下产生，博文以若依单体化架构项目为例，重点介绍如何在若依当中实现多表格统一初始化，如何将表格与查询参数表单进行绑定实现差异化提交，最后介绍表单依赖查询的实现。通过本文，您可以学到多表格的实现以及定制灵活的查询条件，为你的业务赋能。如果您刚好有这方面的需求，不妨来这里看看。

一、初始化多表格

        本节将详细介绍如何在若依中进行多表的初始化，采用实例和工程源码相结合的方式来来进行实现。

1、表格初始化

        在讲解表格的初始化之前，对表格对象的相关配置和方法进行简单介绍，更加详细的说明，大家可以参考layui的官方文档，更加详细。这里需要注意使用的layui的版本。这里给出的思维导图是一个简化版的。

​

        在若依框架中，对表格进行了封装，大家只需要进行简单的调用即可。对于若依中的表格初始化及参数的配置，大家可以参考以下链接：表格使用。

​

2、多表格的初始化 

        在了解了以上的表格参数以及初始化方法之后，接下来我们来实际的在一个界面上实例化一个参数表格，这里的实例使用若依提供的官方示例。

$(function() {
    var options = {
        id: "bootstrap-table1",
        formId: "form1",
        toolbar: "toolbar1",
        url: prefix + "/list",
        createUrl: prefix + "/add",
        removeUrl: prefix + "/remove",
        updateUrl: prefix + "/edit/{id}",
		modalName: "用户",
        columns: [{
		    checkbox: true
		},
		{
			field : 'userId', 
			title : '用户ID'
		},
		{
			field : 'userCode', 
			title : '用户编号'
		},
		{
		    title: '操作',
		    align: 'center',
		    formatter: function(value, row, index) {
		    }
		 }]
   };
   $.table.init(options);
});     
$(function() {
    var options = {
        id: "bootstrap-table2",
        formId: "form2",
        toolbar: "toolbar2",
        url: prefix + "/list",
        createUrl: prefix + "/add",
        removeUrl: prefix + "/remove",
        updateUrl: prefix + "/edit/{id}",
		modalName: "用户",
        columns: [{
		    checkbox: true
		},
		{
			field : 'userId', 
			title : '用户ID'
		},
		{
			field : 'userCode', 
			title : '用户编号'
		},
		{
		    title: '操作',
		    align: 'center',
		    formatter: function(value, row, index) {
		            	
		    }
		}]
     };
     $.table.init(options);
});

        来看一下经过我们初始化的表格效果，如下图所示：

​

二、绑定自定义查询表单

        在每个表格的数据展示需求中，通常都会对应有一个查询表单，比如在上面的查询中，我们需要支持按照用户名称来查询。在单个表格的查询中，一般会提交一个默认的表单，那么在多个表格的场景中，如何将查询参数和当前表单进行绑定呢。本节将重点介绍如何绑定自定义表单以及其背后的执行原理。

1、查询表单绑定

        在进行查询表单的绑定时，首先需要在前端界面中创建一个form表单，在表单中进行查询参数的绑定。这里给出示例的html代码，

<form id="form1">
    <div class="select-list">
        <ul>
			<li>
				用户名称：<input type="text" name="userName"/>
			</li>
			<li>
			<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('form1', 'bootstrap-table1')"><i class="fa fa-search"></i>&nbsp;搜索</a>
			<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('form1', 'bootstrap-table1')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
			</li>
		</ul>
	</div>
</form>

        这是第一个表格的自定义查询表单，对于其它的表格需要绑定查询表单，也采用如上的定义方式。将表单定义好之后，在执行查询的时候，将表单和表格绑定到一起，具体是绑定到按钮上，具体方法如下：

<a class="btn btn-primary btn-rounded btn-sm" 
onclick="$.table.search('form1', 'bootstrap-table1')">
<i class="fa fa-search"></i>&nbsp;搜索</a>

        在上述代码中，使用$.table.search('form1','bootstrap-table1')进行查询绑定，第一个参数是表单的id，请一定使用id，至于为什么，在下一小节中说明，第二个参数是表格对象的ID。

2、表单查询原理

        这里对表单查询原理进行详细介绍，主要是为了让大家了解在若依中时如何封装表格的查询的，默认的查询参数是如何设置的。了解了表单的查询原理，对于掌握多表单的查询非常有帮助。首先，我们在若依中看一下是如何对表单的查询进行统一封装的。打开若依的封装源代码，在ry-ui.js 中，代码位于356行，这里将代码分享出来，

// 搜索-默认第一个form
search: function(formId, tableId, pageNumber, pageSize) {
    table.set(tableId);
    table.options.formId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
    var params = $.common.isEmpty(tableId) ? $("#" + table.options.id).bootstrapTable('getOptions') : $("#" + tableId).bootstrapTable('getOptions');
    if ($.common.isNotEmpty(pageNumber)) {
         params.pageNumber = pageNumber;
    }
    if ($.common.isNotEmpty(pageSize)) {
         params.pageSize = pageSize;
    }
    if($.common.isNotEmpty(tableId)){
         $("#" + tableId).bootstrapTable('refresh', params);
    } else{
         $("#" + table.options.id).bootstrapTable('refresh', params);
    }
}

        通过阅读上述的源码，对于在表单提交中传入的表单需要传入ID应该知道为什么了吧？主要的代码就是：$('form').attr('id')，这是通过获取id属性信息。所以，如果在提交查询参数时，没有获取到相应的数据，可以尝试自己检查form表单的id是否定义或者传入的参数有误。

三、关联表单查询

        通过上一节的自定义表单绑定的查询实例，相信大家对多表单的自定义查询有了一定的认识。这里将介绍最后一种场景，即关联表单的查询，其中一个子表单的查询参数来源于某一个前置表单。比如，先查询出学校的列表信息后，再根据学校的id查询出学校班级信息。这就是一个明显的关联查询示例。

1、子表单定义

        要想实现实现根据父表格的参数值来决定子表单的查询参数。有两种实现方式，第一种是在子表单查询时，动态修改查询参数值。第二个是在请求的URL中带入值，这里介绍第一种方式，第二种方式也是可以实现的，留一道题目给大家来进行实现。在进行动态查询表单时，需要定义个查询参数，设置如下：

var options = {
	 id:"airportinfo-table",
	 formId: "airport_form",
	 queryParams: queryParams,
	 modalName: "机场列表",
	   columns: [
	      {
	        field: 'pkId',
	        title: '',
	        visible: false
	      },
	      {
	        field: 'nameZh',
	        title: '机场名称',
	        formatter: function(value, row, index) {
	            return row.nameEn + "(" + row.nameZh + ")";
	        }
	      },
	      {
	        title: '操作',
	        align: 'center',
	        formatter: function(value, row, index) {
	                   }
	        }]
	};
$.table.init(options);

        来看一下查询参数的函数定义，如下：

function queryParams(params) {
    var search = $.table.queryParams(params);
    search.countryId = $("#countryId").val();
    return search;
}

        函数执行的原理就是在在构建查询参数时，带入一个隐藏表单的值，在执行前面的查询逻辑时，将需要的值动态设置到隐藏表单域中，代码如下：

$("#countryId").val(gid);

        然后调用表格的刷新代码，将子表单的数据进行刷新，代码如下所示：

$("#airportinfo-table").bootstrapTable('refresh', {
	silent: false
});

        通过以上的代码就基本实现了表格联动的查询需求。

2、联动查询示例

        下面通过一个实例来看一下有关联查询的联动查询实例。首先来看一下父表格的请求执行情况。

​

        在点击左边的表格之后，右边的表格跟着进行刷新，在网络请求中可以到具体的函数执行，

        这样就基本实现了表格的联动查询请求。

四、总结

        以上就是本文的主要内容。本文以若依单体化架构项目为例，重点介绍如何在若依当中实现多表格统一初始化，如何将表格与查询参数表单进行绑定实现差异化提交，最后介绍表单依赖查询的实现。通过本文，您可以学到多表格的实现以及定制灵活的查询条件，为你的业务赋能。综上所述，若依平台在多表格管理、自定义查询和依赖查询方面具有强大的功能和灵活的实现方式，能够有效满足企业在数据管理和分析方面的多样化需求。通过若依平台的应用，企业可以更好地整合和利用数据资源，提高决策效率和业务协同能力，从而在激烈的市场竞争中占据有利地位。行文仓促，定有许多不足之处，在此还恳请各位专家朋友不吝赐教，万分感谢。

​

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Java 遥感
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

目录

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入