前言

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

自定義的數據選擇對話框的開發說明

在“若依(ruoyi)”中，數據選擇對話框可以分為2類：

• 樹表數據的選擇對話框，比如選擇部門。
• 非樹表數據的選擇對話框，比如選擇商品、訂單等。

樹表的代碼生產模板所生產的代碼，已預置一個選擇框，參考選擇部門對話框的調用方法調用即可。參考這里：【若依(ruoyi)】數據選擇對話框。

非樹表的數據選擇對話框需要安裝這里說的“自定義的數據選擇對話框”的開發方式開放。

自定義的數據選擇對話框開發

新增一個查詢功能。自定義的數據選擇對話框打開該查詢功能。該查詢功能參考若依(ruoyi)與之相近的功能實現。假設功能為A，通常情況下會得到：/xxx/A(A功能的url地址)、A.html（A功能的html頁面）、…。

在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);});

在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);}

在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：需要自行添加。

關于單選

上面介紹的是多選，當單選時，有以下幾點不一樣的地方：

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;},

總結

以上是生活随笔為你收集整理的【若依(ruoyi)】自定义的数据选择对话框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。