<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/eleTree.css?v=2.0.6">
<style>
#addsousuo .eleTree{
width: 99.6%;
text-align: left;
background: #FFFFFF;
position: absolute;
top: 73px;
left: 0px;
z-index: 99;
display: none;
border: 1px solid #E6E6E6;
height: 200px;
overflow: auto;
font-size: 16px;
}
.eleTreeSearch{
display: none;
height: 35px;
border-bottom: 0px;
border-color: #E6E6E6;
margin-top: 1px;
}
</style>
</head> <body>
<div id="addsousuo">
<input type="text" name="reginPer" id="reginPer" lay-verify="required" placeholder="请选择单位权限" readonly class="layui-input"> <input type="text" placeholder="请输入关键字进行搜索" autocomplete="off" class="layui-input eleTree-search eleTreeSearch" > <div class="eleTree ele7" lay-filter="data7"></div> <input type="hidden" name="regiCode" id="regiCode" value="" />
</div>
</body> <script src="lib/layui/layui.js?v=2.0.6"></script> <script type="text/javascript"> layui.use(['element', 'layer', 'form', 'layedit', 'jquery', 'steps', 'eleTree'], function() {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var layedit = layui.layedit;
var element = layui.element;
var steps = layui.steps;
var eleTree = layui.eleTree;
var el7;
$("[name='reginPer']").on("click", function(e) {
e.stopPropagation();
// if (!el7) {
var data = [
{
'id':'1',
'code': '1',
'name': '一级单位1',
'parentId':''
},
{
'id':'1-1',
'code': '1-1',
'name': '二级单位1',
'parentId':'1'
},
{
'id':'1-2',
'code': '1-2',
'name': '二级单位2',
'parentId':'1'
},
{
'id':'2',
'code': '2',
'name': '一级单位2',
'parentId':''
},
{
'id':'3',
'code': '3',
'name': '一级单位3',
'parentId':''
}
];
data = toJsonTree8(data);
el7 = eleTree.render({
elem: '.ele7',
data: data,
// url: "../eleTree/tree.json",
showCheckbox: true,
defaultExpandAll: true,
searchNodeMethod: function(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
});
var reList = $("[name='regiCode']").val();
reList = reList.split(',');
el7.setChecked(reList,true);
// }
$(".ele7").toggle();
var node7 = $('.eleTreeSearch');
if(node7.is(':hidden')){ //如果node是隐藏的则显示node元素，否则隐藏
node7.show();
}else{
node7.hide();
};
$(".eleTreeSearch").on("input", function(e) {
el7.search(e.delegateTarget.value);
return false
});
})
eleTree.on("nodeChecked(data7)", function(d) {
var roleName = el7.getChecked();
var rolePush = [];
var rolushName = [];
var rolushCode = [];
if (roleName && roleName.length > 0) {
console.log(roleName)
for (var i = 0; i < roleName.length; i++) {
var label = roleName[i].label;
var len = label.lastIndexOf("-");
label = label.substr(len+1,label.length);
var code = roleName[i].id;
rolePush.push(label);
rolushName.push(code);
};
var data1 = [
{
'id':'1',
'code': '1',
'name': '一级单位1',
'parentId':''
},
{
'id':'1-1',
'code': '1-1',
'name': '二级单位1',
'parentId':'1'
},
{
'id':'1-2',
'code': '1-2',
'name': '二级单位2',
'parentId':'1'
},
{
'id':'2',
'code': '2',
'name': '一级单位2',
'parentId':''
},
{
'id':'3',
'code': '3',
'name': '一级单位3',
'parentId':''
}
];
for(var j = 0;j < data1.length;j++){
var code1 = data1[j].code;
var id1 = data1[j].id;
for(var k = 0;k < roleName.length; k++){
var id2 = roleName[k].id;
if(id2 == id1){
rolushCode.push(code1);
}
};
};
rolePush = rolePush.toString();
rolushName = rolushName.toString();
rolushCode = rolushCode.toString();
$("[name='reginName']").val(rolePush);
$("[name='reginPer']").val(rolushCode);
$("[name='regiCode']").val(rolushName);
} else {
$("[name='reginName']").val('');
$("[name='reginPer']").val('');
$("[name='regiCode']").val('');
};
});
$(document).on("click", function() {
$(".ele7").hide();
$('.eleTreeSearch').hide();
});
$('.eleTreeSearch').on("click", function(e) {
e.stopPropagation()
});
});
</script>
</html>
标签：code,name,layui,下拉树,eletree,parentId,var,id From： https://www.cnblogs.com/jianglinqian/p/15946517.html