Tenlion/wg-basic
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善功能

Browse Source
This commit is contained in:
wanggeng 2022-08-12 11:53:19 +08:00
parent af541d0507
commit e65ca2a92d
1 changed files with 115 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
common/src/main/resources/static/assets/js/common/layui-input-tree.js
View File

@ -3,6 +3,7 @@ function LayuiInputTree(layui) {
var layer = layui.layer; var layer = layui.layer;
var ztree = layui.ztree; var ztree = layui.ztree;
var restAjax = layui.restajax; var restAjax = layui.restajax;
var zIndex = 10000;
// 样式 // 样式
var style = ` var style = `
<link rel="stylesheet" href="assets/js/vendor/zTree3/css/metroStyle/metroStyle.css"/> <link rel="stylesheet" href="assets/js/vendor/zTree3/css/metroStyle/metroStyle.css"/>
@ -20,15 +21,18 @@ function LayuiInputTree(layui) {
* @param opt * @param opt
*/ */
this.initSelect = function (opt) { this.initSelect = function (opt) {
var zTreeUrl = opt.zTreeUrl; var url = opt.url;
if (!zTreeUrl) { if (!url) {
return; return;
} }
var getSelectedData = opt.getSelectedData;
var onConfirm = opt.onConfirm; var onConfirm = opt.onConfirm;
var onClear = opt.onClear; var onClear = opt.onClear;
var key = opt.key;
var id = opt.id; var id = opt.id;
var inputDomId = '#' + id; var inputDomId = '#' + id;
var zTree; var zTree;
var selectedData;
var boxDomId = inputDomId + 'Box'; var boxDomId = inputDomId + 'Box';
var zTreeBoxId = inputDomId + 'ZTreeBox'; var zTreeBoxId = inputDomId + 'ZTreeBox';
var confirmBtnId = inputDomId + 'ConfirmBtn'; var confirmBtnId = inputDomId + 'ConfirmBtn';
@ -57,15 +61,25 @@ function LayuiInputTree(layui) {
var boxDom = $(boxDomId); var boxDom = $(boxDomId);
if (boxDom.is(':hidden')) { if (boxDom.is(':hidden')) {
boxDom.show(); boxDom.show();
boxDom.css('z-index', zIndex++)
if (getSelectedData) {
selectedData = getSelectedData();
}
} else { } else {
boxDom.hide(); boxDom.hide();
// 还原选择
if (selectedData) {
$(inputDomId).val(selectedData.name);
} else {
$(inputDomId).val('');
}
} }
}) })
// 确认事件 // 确认事件
$(document).on('click', confirmBtnId, function () { $(document).on('click', confirmBtnId, function () {
if (onConfirm) { if (onConfirm) {
onConfirm(zTree, selectedNode) onConfirm(zTree, selectedNode)
$(inputDomId).click(); $(boxDomId).hide();
} }
}) })
// 清空事件 // 清空事件
@ -75,9 +89,8 @@ function LayuiInputTree(layui) {
zTree.cancelSelectedNode(); zTree.cancelSelectedNode();
if (onClear) { if (onClear) {
onClear(zTree); onClear(zTree);
$(inputDomId).click(); $(boxDomId).hide();
} }
}) })
} }
@ -88,23 +101,20 @@ function LayuiInputTree(layui) {
enable: true, enable: true,
autoLoad: true, autoLoad: true,
type: 'get', type: 'get',
url: zTreeUrl, url: url,
autoParam: ['id'], autoParam: ['id'],
otherParam: {}, otherParam: {},
dataFilter: function (treeId, parentNode, childNodes) { dataFilter: function (treeId, parentNode, childNodes) {
if (!childNodes) return null; if (!childNodes) return null;
for (var i = 0, l = childNodes.length; i < l; i++) { $.each(childNodes, function (index, item) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.'); asyncDataFilter(key, item);
} });
return childNodes; return childNodes;
} }
}, },
callback: { callback: {
onClick: function (event, treeId, treeNode) { onClick: function (event, treeId, treeNode) {
selectedNode = new SelectedNode(); selectedNode = treeNode;
selectedNode.id = treeNode.id;
selectedNode.name = treeNode.name;
selectedNode.pId = treeNode.pId;
$(inputDomId).val(treeNode.name); $(inputDomId).val(treeNode.name);
return false; return false;
} }
@ -123,29 +133,26 @@ function LayuiInputTree(layui) {
* @param opt * @param opt
*/ */
this.initMultiSelect = function (opt) { this.initMultiSelect = function (opt) {
var zTreeUrl = opt.zTreeUrl; var url = opt.url;
if (!zTreeUrl) { if (!url) {
return; return;
} }
var getSelectedDatas = opt.getSelectedDatas;
var onConfirm = opt.onConfirm; var onConfirm = opt.onConfirm;
var onClear = opt.onClear; var onClear = opt.onClear;
var selectedDatas = opt.selectedDatas;
var checkboxType = opt.checkboxType; var checkboxType = opt.checkboxType;
var id = opt.id; var id = opt.id;
var key = opt.key;
var inputDomId = '#' + id; var inputDomId = '#' + id;
var zTree; var zTree;
var selectedDatas;
var selectedNodesObj = {};
var boxDomId = inputDomId + 'Box'; var boxDomId = inputDomId + 'Box';
var zTreeBoxId = inputDomId + 'ZTreeBox'; var zTreeBoxId = inputDomId + 'ZTreeBox';
var confirmBtnId = inputDomId + 'ConfirmBtn'; var confirmBtnId = inputDomId + 'ConfirmBtn';
var clearBtnId = inputDomId + 'ClearBtn'; var clearBtnId = inputDomId + 'ClearBtn';
var inputDom = $(inputDomId); var inputDom = $(inputDomId);
var inputParentDom = inputDom.parent(); var inputParentDom = inputDom.parent();
var selectedNodesObj = {};
if (selectedDatas && selectedDatas.length > 0) {
$.each(selectedDatas, function (index, item) {
selectedNodesObj[item.id] = item;
})
}
inputParentDom.css('position', 'relative'); inputParentDom.css('position', 'relative');
inputDom.attr('readonly', ''); inputDom.attr('readonly', '');
inputDom.css('cursor', 'pointer'); inputDom.css('cursor', 'pointer');
@ -161,25 +168,83 @@ function LayuiInputTree(layui) {
</div> </div>
`); `);
/**
* 勾选节点
* @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() { function initEvent() {
$(document).on('click', inputDomId, function () { $(document).on('click', inputDomId, function () {
var boxDom = $(boxDomId); var boxDom = $(boxDomId);
if (boxDom.is(':hidden')) { if (boxDom.is(':hidden')) {
boxDom.css('z-index', zIndex++)
boxDom.show(); boxDom.show();
boxDomShow();
} else { } else {
selectedNodesObj = {};
boxDom.hide(); boxDom.hide();
boxHide();
} }
}) })
// 确认事件 // 确认事件
$(document).on('click', confirmBtnId, function () { $(document).on('click', confirmBtnId, function () {
if (onConfirm) { if (onConfirm) {
var selectedNodes = []; var selectedNodes = [];
for(var key in selectedNodesObj) { for (var key in selectedNodesObj) {
selectedNodes.push(selectedNodesObj[key]); selectedNodes.push(selectedNodesObj[key]);
} }
onConfirm(zTree, selectedNodes) onConfirm(zTree, selectedNodes)
$(inputDomId).click(); $(boxDomId).hide();
} }
}) })
// 清空事件 // 清空事件
@ -189,7 +254,7 @@ function LayuiInputTree(layui) {
zTree.checkAllNodes(false); zTree.checkAllNodes(false);
if (onClear) { if (onClear) {
onClear(zTree); onClear(zTree);
$(inputDomId).click(); $(boxDomId).hide();
} }
}) })
} }
@ -201,14 +266,14 @@ function LayuiInputTree(layui) {
enable: true, enable: true,
autoLoad: true, autoLoad: true,
type: 'get', type: 'get',
url: zTreeUrl, url: url,
autoParam: ['id'], autoParam: ['id'],
otherParam: {}, otherParam: {},
dataFilter: function (treeId, parentNode, childNodes) { dataFilter: function (treeId, parentNode, childNodes) {
if (!childNodes) return null; if (!childNodes) return null;
for (var i = 0, l = childNodes.length; i < l; i++) { $.each(childNodes, function (index, item) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.'); asyncDataFilter(key, item);
} });
return childNodes; return childNodes;
} }
}, },
@ -221,20 +286,12 @@ function LayuiInputTree(layui) {
onAsyncSuccess: function (event, treeId, treeNode) { onAsyncSuccess: function (event, treeId, treeNode) {
// 加载完默认勾选 // 加载完默认勾选
for (var key in selectedNodesObj) { for (var key in selectedNodesObj) {
var node = zTree.getNodeByParam('id', key); checkNode(key);
if (!node) {
return;
}
zTree.checkNode(node, true, true);
} }
}, },
onCheck: function (event, treeId, treeNode) { onCheck: function (event, treeId, treeNode) {
if (treeNode.checked) { if (treeNode.checked) {
var selectedNode = new SelectedNode(); selectedNodesObj[treeNode.id] = treeNode;
selectedNode.id = treeNode.id;
selectedNode.name = treeNode.name;
selectedNode.pId = treeNode.pId;
selectedNodesObj[treeNode.id] = selectedNode;
} else { } else {
delete selectedNodesObj[treeNode.id]; delete selectedNodesObj[treeNode.id];
} }
@ -257,10 +314,25 @@ function LayuiInputTree(layui) {
initEvent(); initEvent();
} }
function SelectedNode() { /**
this.id = null; * 异步数据过滤
this.name = null; * @param key
this.pId = null; * @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, '.');
}
} }
} }