前言

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

假設的需求

• 使用部門選擇框，選擇部門。
  
• 其它使用選擇框的操作。比如：選擇入庫單、出庫單、用戶、…

分析

在“RuoYi”中，可以以 下面的方式實現：
將備選數據以彈出對話框的方式，展現給用戶。用戶從展示數據中選擇所需的數據。用戶選擇完數據后，彈出對話框被關閉，系統記錄被選擇的數據。

將上面描述的彈出對話框叫做數據選擇對話框。在“RuoYi”中，數據選擇對話框可以分為2類：

• 系統預置的數據選擇對話框：部門、用戶的選擇框已預置在系統中，需要時，按照系統的方法使用即可。
• 自定義的數據選擇對話框：比如入庫單、出庫單、…，需要由開發者進行開發。

如何使用系統預置的數據選擇對話框

系統預置的數據選擇對話框有：

• 部門選擇
• 用戶選擇

下面以部門選擇為例，說明如何使用系統預置的數據選擇對話框。

在HTML中，添加或替換input元素。

<div class="input-group"><input name="deptId" type="hidden" id="treeId"/><input name="deptName" onclick="selectDeptTree()" id="treeName" type="text" placeholder="請選擇歸屬部門" class="form-control" required><span class="input-group-addon"><i class="fa fa-search"></i></span> </div>

添加JavaScript。

/*用戶管理-新增-選擇部門樹*/ function selectDeptTree() {var treeId = $("#treeId").val(); (1)var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val(); (2)var url = ctx + "system/dept/selectDeptTree/" + deptId;var options = {title: '選擇部門',width: "380",url: url,callBack: selectDeptTreeCallback};$.modal.openOptions(options); } /*選擇對話框的回調方法，記錄被選擇的數據*/ function selectDeptTreeCallback(index, layero){var tree = layero.find("iframe")[0].contentWindow.$._tree;if ($.tree.notAllowParents(tree)) {var body = layer.getChildFrame('body', index);$("#treeId").val(body.find('#treeId').val()); (3)$("#treeName").val(body.find('#treeName').val()); (4)layer.close(index);} }

(1)(2)處的treeId、(3)處的第1個treeId、(4)處的第1個treeName，是上一步指定的Html元素的id值。

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

參考system/dept/selectDeptTree功能開發自定義的數據選擇對話框

總結

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

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