完善功能
This commit is contained in:
parent
af541d0507
commit
e65ca2a92d
@ -3,6 +3,7 @@ function LayuiInputTree(layui) {
|
||||
var layer = layui.layer;
|
||||
var ztree = layui.ztree;
|
||||
var restAjax = layui.restajax;
|
||||
var zIndex = 10000;
|
||||
// 样式
|
||||
var style = `
|
||||
<link rel="stylesheet" href="assets/js/vendor/zTree3/css/metroStyle/metroStyle.css"/>
|
||||
@ -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) {
|
||||
</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() {
|
||||
$(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, '.');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user