diff --git a/common/src/main/resources/static/assets/js/common/layui-input-tree.js b/common/src/main/resources/static/assets/js/common/layui-input-tree.js index c8065a09..2f0548be 100644 --- a/common/src/main/resources/static/assets/js/common/layui-input-tree.js +++ b/common/src/main/resources/static/assets/js/common/layui-input-tree.js @@ -3,6 +3,7 @@ function LayuiInputTree(layui) { var layer = layui.layer; var ztree = layui.ztree; var restAjax = layui.restajax; + var zIndex = 10000; // 样式 var style = ` @@ -20,15 +21,18 @@ function LayuiInputTree(layui) { * @param opt */ this.initSelect = function (opt) { - var zTreeUrl = opt.zTreeUrl; - if (!zTreeUrl) { + var url = opt.url; + if (!url) { return; } + var getSelectedData = opt.getSelectedData; var onConfirm = opt.onConfirm; var onClear = opt.onClear; + var key = opt.key; var id = opt.id; var inputDomId = '#' + id; var zTree; + var selectedData; var boxDomId = inputDomId + 'Box'; var zTreeBoxId = inputDomId + 'ZTreeBox'; var confirmBtnId = inputDomId + 'ConfirmBtn'; @@ -57,15 +61,25 @@ function LayuiInputTree(layui) { var boxDom = $(boxDomId); if (boxDom.is(':hidden')) { boxDom.show(); + boxDom.css('z-index', zIndex++) + if (getSelectedData) { + selectedData = getSelectedData(); + } } else { boxDom.hide(); + // 还原选择 + if (selectedData) { + $(inputDomId).val(selectedData.name); + } else { + $(inputDomId).val(''); + } } }) // 确认事件 $(document).on('click', confirmBtnId, function () { if (onConfirm) { onConfirm(zTree, selectedNode) - $(inputDomId).click(); + $(boxDomId).hide(); } }) // 清空事件 @@ -75,9 +89,8 @@ function LayuiInputTree(layui) { zTree.cancelSelectedNode(); if (onClear) { onClear(zTree); - $(inputDomId).click(); + $(boxDomId).hide(); } - }) } @@ -88,23 +101,20 @@ function LayuiInputTree(layui) { enable: true, autoLoad: true, type: 'get', - url: zTreeUrl, + url: url, autoParam: ['id'], otherParam: {}, dataFilter: function (treeId, parentNode, childNodes) { if (!childNodes) return null; - for (var i = 0, l = childNodes.length; i < l; i++) { - childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.'); - } + $.each(childNodes, function (index, item) { + asyncDataFilter(key, item); + }); return childNodes; } }, callback: { onClick: function (event, treeId, treeNode) { - selectedNode = new SelectedNode(); - selectedNode.id = treeNode.id; - selectedNode.name = treeNode.name; - selectedNode.pId = treeNode.pId; + selectedNode = treeNode; $(inputDomId).val(treeNode.name); return false; } @@ -123,29 +133,26 @@ function LayuiInputTree(layui) { * @param opt */ this.initMultiSelect = function (opt) { - var zTreeUrl = opt.zTreeUrl; - if (!zTreeUrl) { + var url = opt.url; + if (!url) { return; } + var getSelectedDatas = opt.getSelectedDatas; var onConfirm = opt.onConfirm; var onClear = opt.onClear; - var selectedDatas = opt.selectedDatas; var checkboxType = opt.checkboxType; var id = opt.id; + var key = opt.key; var inputDomId = '#' + id; var zTree; + var selectedDatas; + var selectedNodesObj = {}; var boxDomId = inputDomId + 'Box'; var zTreeBoxId = inputDomId + 'ZTreeBox'; var confirmBtnId = inputDomId + 'ConfirmBtn'; var clearBtnId = inputDomId + 'ClearBtn'; var inputDom = $(inputDomId); var inputParentDom = inputDom.parent(); - var selectedNodesObj = {}; - if (selectedDatas && selectedDatas.length > 0) { - $.each(selectedDatas, function (index, item) { - selectedNodesObj[item.id] = item; - }) - } inputParentDom.css('position', 'relative'); inputDom.attr('readonly', ''); inputDom.css('cursor', 'pointer'); @@ -161,25 +168,83 @@ function LayuiInputTree(layui) { `); + /** + * 勾选节点 + * @param id + */ + function checkNode(id) { + var node = zTree.getNodeByParam('id', id); + if (!node) { + return; + } + zTree.checkNode(node, true, true); + } + + /** + * 输入框显示 + */ + function boxDomShow() { + if (!getSelectedDatas) { + return; + } + selectedDatas = getSelectedDatas(); + if (!selectedDatas || selectedDatas.length == 0) { + return; + } + $.each(selectedDatas, function (index, item) { + selectedNodesObj[item.id] = item; + // 勾选节点 + checkNode(item.id); + }) + } + + /** + * 输入框隐藏 + */ + function boxHide() { + // 还原原有选择 + if (selectedDatas && selectedDatas.length > 0) { + var names = ''; + $.each(selectedDatas, function (index, item) { + if (names != '') { + names += ','; + } + names += item.name; + }) + $(inputDomId).val(names); + } else { + $(inputDomId).val(''); + } + // 取消所有勾选状态 + var checkedNodes = zTree.getCheckedNodes(); + $.each(checkedNodes, function (index, item) { + zTree.checkNode(item, false); + }); + } + // 初始化事件 function initEvent() { $(document).on('click', inputDomId, function () { var boxDom = $(boxDomId); if (boxDom.is(':hidden')) { + boxDom.css('z-index', zIndex++) boxDom.show(); + boxDomShow(); } else { + selectedNodesObj = {}; boxDom.hide(); + boxHide(); } }) // 确认事件 $(document).on('click', confirmBtnId, function () { if (onConfirm) { var selectedNodes = []; - for(var key in selectedNodesObj) { + for (var key in selectedNodesObj) { selectedNodes.push(selectedNodesObj[key]); } onConfirm(zTree, selectedNodes) - $(inputDomId).click(); + $(boxDomId).hide(); } }) // 清空事件 @@ -189,7 +254,7 @@ function LayuiInputTree(layui) { zTree.checkAllNodes(false); if (onClear) { onClear(zTree); - $(inputDomId).click(); + $(boxDomId).hide(); } }) } @@ -201,14 +266,14 @@ function LayuiInputTree(layui) { enable: true, autoLoad: true, type: 'get', - url: zTreeUrl, + url: url, autoParam: ['id'], otherParam: {}, dataFilter: function (treeId, parentNode, childNodes) { if (!childNodes) return null; - for (var i = 0, l = childNodes.length; i < l; i++) { - childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.'); - } + $.each(childNodes, function (index, item) { + asyncDataFilter(key, item); + }); return childNodes; } }, @@ -221,20 +286,12 @@ function LayuiInputTree(layui) { onAsyncSuccess: function (event, treeId, treeNode) { // 加载完默认勾选 for (var key in selectedNodesObj) { - var node = zTree.getNodeByParam('id', key); - if (!node) { - return; - } - zTree.checkNode(node, true, true); + checkNode(key); } }, onCheck: function (event, treeId, treeNode) { if (treeNode.checked) { - var selectedNode = new SelectedNode(); - selectedNode.id = treeNode.id; - selectedNode.name = treeNode.name; - selectedNode.pId = treeNode.pId; - selectedNodesObj[treeNode.id] = selectedNode; + selectedNodesObj[treeNode.id] = treeNode; } else { delete selectedNodesObj[treeNode.id]; } @@ -257,10 +314,25 @@ function LayuiInputTree(layui) { initEvent(); } - function SelectedNode() { - this.id = null; - this.name = null; - this.pId = null; + /** + * 异步数据过滤 + * @param key + * @param item + */ + function asyncDataFilter(key, item) { + if (key) { + item.id = item[key.id] ? item[key.id] : item.id; + item.name = item[key.name] ? item[key.name].replace(/\.n/g, '.') : item.name; + item.title = item[key.title] ? item[key.title] : item.title; + item.pId = item[key.pId] ? item[key.pId] : item.pId; + item.checked = item[key.checked] ? item[key.checked] : item.checked; + item.children = item[key.children] ? item[key.children] : item.children; + item.isParent = item[key.isParent] ? item[key.isParent] : item.isParent; + item.isHidden = item[key.isHidden] ? item[key.isHidden] : item.isHidden; + item.url = item[key.url] ? item[key.url] : item.url; + } else { + item.name = item.name.replace(/\.n/g, '.'); + } } } \ No newline at end of file