前言

• 若依(ruoyi)： v4.3
• mysql：5.7.31

自定义的数据选择对话框的开发说明

在“若依(ruoyi)”中，数据选择对话框可以分为2类：

• 树表数据的选择对话框，比如选择部门。
• 非树表数据的选择对话框，比如选择商品、订单等。

树表的代码生产模板所生产的代码，已预置一个选择框，参考选择部门对话框的调用方法调用即可。参考这里：【若依(ruoyi)】数据选择对话框。

非树表的数据选择对话框需要安装这里说的“自定义的数据选择对话框”的开发方式开放。

自定义的数据选择对话框开发

1. 新增一个查询功能。自定义的数据选择对话框打开该查询功能。该查询功能参考若依(ruoyi)与之相近的功能实现。假设功能为A，通常情况下会得到：/xxx/A(A功能的url地址)、A.html（A功能的html页面）、…。

2. 在A.html中修改table的参数，使其可以点击选中、记住选中、…。

	$(function() {var options = {url: prefix + "/selectA",showSearch: false,showRefresh: false,showToggle: false,showColumns: false,clickToSelect: true, // 当点击某行时，是否选中该行rememberSelected: true, // 默认false。设为false不启用翻页记住前面的选择，设为true启用singleSelect: false, // 默认false。是否单选checkboxmodalName: "A",columns: [{checkbox: true},{field : ...},...]};$.table.init(options);});

3. 在B功能中调用选择A的对话框。在B功能的B.html（B功能的html页面）中添加弹出选择对话框代码（对话框中的页面是A功能的html页面）。

	function selectA() {var url = ctx + "A/selectA";var title = "选择A";$.modal.open(title, url, null, null, selectACallback);}

4. 在B功能的B.html（B功能的html页面）中添加弹出选择对话框的确定按钮的回调方法。

	function selectACallback(index, layero) {var opJquery = layero.find("iframe")[0].contentWindow.$;var selectedIds = opJquery.table.selectFirstColumns(); //此时，第1列应该是ID，隐藏的ID也行。if (selectedIds.length == 0) {$.modal.alertWarning("请至少选择一条记录");return;}var selectedNames = opJquery.table.selectColumns("name"); //name列$("selectedIds").val(selectedIds.join());$("selectedNames").val(selectedNames.join());layer.close(index);}

或者：

	function selectACallback(index, layero) {var opJquery = layero.find("iframe")[0].contentWindow.$;var selectedRows = opJquery.table.selectRows();//所有已选择的行if ($.common.isEmpty(selectedRows)) {$.modal.alertWarning("请至少选择一条记录");return;}selectedRows.forEach(function(data,index){$("selectedIds").val($("selectedIds").val()+index>0?",":""+data.id);$("selectedNames").val($("selectedNames").val()+index>0?",":""+data.id);});layer.close(index);}

• selectRows：需要自行添加。

关于单选

上面介绍的是多选，当单选时，有以下几点不一样的地方：

1. A.html的不同

	$(function() {var options = {url: prefix + "/selectA",showSearch: false,showRefresh: false,showToggle: false,showColumns: false,clickToSelect: true, // 当点击某行时，是否选中该行rememberSelected: false, // 默认false。设为false不启用翻页记住前面的选择，设为true启用singleSelect: true, // 默认false。是否单选checkboxmodalName: "A",columns: [{radio: true},{field : ...},...]};$.table.init(options);});

selectRows

找到ruoyi.js，在table下面添加selectRows函数：

            // 查询表格已选择的行selectRows: function() {var rows = $("#" + table.options.id).bootstrapTable('getSelections');if ($.common.isNotEmpty(table.options.rememberSelected) && table.options.rememberSelected) {var selectedRows = table.rememberSelecteds[table.options.id];if($.common.isNotEmpty(selectedRows)) {return selectedRows;}}return rows;},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！