前言

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

假設(shè)的需求

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

分析

在“RuoYi”中，可以以 下面的方式實(shí)現(xiàn)：
將備選數(shù)據(jù)以彈出對話框的方式，展現(xiàn)給用戶。用戶從展示數(shù)據(jù)中選擇所需的數(shù)據(jù)。用戶選擇完數(shù)據(jù)后，彈出對話框被關(guān)閉，系統(tǒng)記錄被選擇的數(shù)據(jù)。

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

• 系統(tǒng)預(yù)置的數(shù)據(jù)選擇對話框：部門、用戶的選擇框已預(yù)置在系統(tǒng)中，需要時(shí)，按照系統(tǒng)的方法使用即可。
• 自定義的數(shù)據(jù)選擇對話框：比如入庫單、出庫單、…，需要由開發(fā)者進(jìn)行開發(fā)。

如何使用系統(tǒng)預(yù)置的數(shù)據(jù)選擇對話框

系統(tǒng)預(yù)置的數(shù)據(jù)選擇對話框有：

• 部門選擇
• 用戶選擇

下面以部門選擇為例，說明如何使用系統(tǒng)預(yù)置的數(shù)據(jù)選擇對話框。

在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); } /*選擇對話框的回調(diào)方法，記錄被選擇的數(shù)據(jù)*/ 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個(gè)treeId、(4)處的第1個(gè)treeName，是上一步指定的Html元素的id值。

如何開發(fā)自定義的數(shù)據(jù)選擇對話框

參考system/dept/selectDeptTree功能開發(fā)自定義的數(shù)據(jù)選擇對話框

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。