先上效果圖：
代碼如下：
1、html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no minimal-ui">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圖紙Tree</title>
<style >
.tree-content
{
display: block;
position: absolute;
height: auto;
left: 0 !important;
top: 8px !important;
background: #ffffff;
z-index: 9999999;
//border: 1px solid #C9C9C9 !important;
overflow-y: auto;
}
</style>
<!--<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript" src="layui/layui.js"></script>-->
<link rel="stylesheet" type="text/css" href="ztree/css/zTreeStyle/zTreeStyle.css">
<script src="jq/jquery.min.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="plugin/js/selectTreeM.js"></script>
</head>
<body>
<div>選擇的是：<input id = "xmtShow" type="text" value = "" style="margin-left:10px;margin-top:10px;width: 160px;"></input></div>
<div class = "tree-content scrollbar" style = "margin-top: 40px;">
<input hidden id="xmtHide" name="xmt">
<input id="xmtQuery" type="text" value="" style="margin-left:10px;margin-top:10px;height:18px;line-height:18px;vertical-align:bottom;">
<input id="xmtQbut" class="xmtQbut" type="button" value="查詢">
<input id="xmtCbut" class="xmtQbut" type="button" value="重置">
<ul id="xmtTree" class="ztree scrollbar" style="margin-top:0;">
</ul>
</div>
<script type="text/javascript">
var zNodes = [{id: 1,name: "一級標題1",pId: 0,open:true
}, {id: 2, name: "一級標題2",pId: 0,open:true
}, {id: 3, name: "2.1級標題",pId: 2
}, {id: 4, name: "2.2級標題",pId: 2
}, {id: 5, name: "1.1級標題", pId: 1
}, {id: 6, name: "1.2級標題",pId: 1
}, {id: 7, name: "1.21級標題",pId: 6
}, {id: 8, name: "一級標題3",pId: 0
}, {id: 9, name: "1.22級標題",pId: 6
}, {id: 10, name: "1.221級標題", pId: 9
}, {id: 11, name: "1.2211級標題", pId: 10
}, {id: 12, name: "1.2212級標題", pId: 10 } ];
$(document).ready(function (){
initTree("xmtTree",zNodes,myClick,false);
var setting = {
view: {
dblClickExpand: false,
showLine: false
},
data: {
simpleData: {
enable: true
}
},
check: {
enable: false,
chkboxType: { "Y": "ps", "N": "s" }
},
callback: {
onClick: myClick,
onCheck: onCheck
}
};
$("#xmtQbut").on('click',function(){//查詢項目
var keyword=$("#xmtQuery").val();
var zNodeQuery=[];
if(keyword!=""){
for(var i=0;i<zNodes.length;i++){
if(zNodes[i].name.indexOf(keyword)!=-1){
zNodeQuery.push(zNodes[i]);
}
}
}
$("#xmtTree").empty();
//alert("123");
$.fn.zTree.init($("#xmtTree"), setting, zNodeQuery);
});
$("#xmtCbut").on('click',function(){//重置項目
$("#xmtQuery").val("");
$.fn.zTree.init($("#xmtTree"), setting, zNodes);
});
})
function myClick(event, treeId, treeNode){
console.log(event);
console.log(treeNode);
var deptId = treeNode.id;
console.log(deptId);
var zTree = $.fn.zTree.getZTreeObj(treeId);
var names = "";
var ids = "";
var nodes;
if (zTree.setting.check.enable == true) {
zTree.checkNode(treeNode, !treeNode.checked, false);
nodes = zTree.getCheckedNodes();
} else{
nodes = zTree.getSelectedNodes();
}
for (var i = 0, l = nodes.length; i < l; i++) {
names += nodes[i].name + ",";
ids += nodes[i].id + ",";
}
if (names.length > 0) {
names = names.substring(0, names.length - 1);
ids = ids.substring(0, ids.length - 1);
}
console.log("names = "+names+",ids = "+ids);
$("#xmtHide").attr("value",names);
$("#xmtHide").attr("ids",ids);
$("#xmtShow").attr("value",names);
$("#xmtShow").attr("ids",ids);
}
</script>
</body>
</html>
2、selectTreeM.js：封裝一個針對點擊click和初始化的函數js
function onClick(event, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
var names = "";
var ids = "";
var nodes;
if (zTree.setting.check.enable == true) {
zTree.checkNode(treeNode, !treeNode.checked, false);
nodes = zTree.getCheckedNodes();
} else{
nodes = zTree.getSelectedNodes();
}
for (var i = 0, l = nodes.length; i < l; i++) {
names += nodes[i].name + ",";
ids += nodes[i].id + ",";
}
if (names.length > 0) {
names = names.substring(0, names.length - 1);
ids = ids.substring(0, ids.length - 1);
}
$("#xmtHide").attr("value",names);
$("#xmtHide").attr("ids",ids);
$("#xmtShow").attr("value",names);
$("#xmtShow").attr("ids",ids);
}
function onCheck(event, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
var nodes = zTree.getCheckedNodes();
var names = "";
var ids = "";
for (var i = 0, l = nodes.length; i < l; i++) {
names += nodes[i].name + ",";
ids += nodes[i].id + ",";
}
if (names.length > 0) {
names = names.substring(0, names.length - 1);
ids = ids.substring(0, ids.length - 1);
}
}
function initTree(fullTreeId,zNodes,myClick,isMultiple,chkboxType){
var setting = {
view: {
dblClickExpand: false,
showLine: false
},
data: {
simpleData: {
enable: true
}
},
check: {
enable: false,
chkboxType: { "Y": "ps", "N": "s" }
},
callback: {
onClick: myClick? myClick : onClick,
onCheck: onCheck
}
};
if (isMultiple) {
setting.check.enable = isMultiple;
}
if (chkboxType !== undefined && chkboxType != null) {
setting.check.chkboxType = chkboxType;
}
$.fn.zTree.init($("#" + fullTreeId ), setting, zNodes);
}
zTree的源碼上傳到百度雲
https://pan.baidu.com/s/15mIxwPRwsUP5CYz_a_8_ag
提取碼：zzuz
注意這裏只傳入了onclick的方法，oncheck方法也需要重寫的情況請自己參看onclick如何寫