最近在用ztree，网上收集了一些ztree但都不完善，目前把完善的树结构查询代码分享一下！
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>zTree搜索</title>
<link rel="stylesheet" href="css/zTree-css/zTreeStyle/zTreeStyle.css" type="text/css" />
<link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="js/bootstrap/js/jquery.min.js" ></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</head>
<body>
<div class="col-md-3 sidebar">
<div class="row">
<div class="col-sm-3">业务权限</div>
<div class="col-sm-9">
<input type="text" id="key" class="empty form-control" placeholder="Search..." οnkeyup="callNumber()">
</div>
<div class="row" style="width:90px;position: relative;top:-33px;left:250px;">
<div clss="col-sm-12">
<div class="col-sm-8" style="padding-top:5px;padding-right:-5px;">
<label id="number"></label>
</div>
<div class="col-sm-4">
<i id="clickUp" class="glyphicon glyphicon-menu-up" οnclick="clickUp()"></i>
<i id="clickDown" class="glyphicon glyphicon-menu-down" οnclick="clickDown()"></i>
</div>
</div>
</div>
</div>
<ul id="tree" class="ztree"></ul>
</div>
<script>
$(document).ready(function(){
var zNodes=[
{ id:123456, pId:0, name:"根节点", open:true},
{ id:1, pId:123456, name:"部门1", open:true},
{ id:11, pId:1, name:"部门1.1", open:true},
{ id:111, pId:11, name:"部门1.1.1"},
{ id:112, pId:11, name:"部门1.1.2"},
{ id:12, pId:1, name:"部门1.2", open:true},
{ id:121, pId:12, name:"部门1.2.1"},
{ id:122, pId:12, name:"部门1.2.2"},
{ id:123, pId:12, name:"部门1.2.3"},
{ id:124, pId:12, name:"部门1.2.4"},
{ id:125, pId:12, name:"部门1.2.5"},
{ id:126, pId:12, name:"部门1.2.6"},
{ id:127, pId:12, name:"部门1.2.7"},
{ id:128, pId:12, name:"部门1.2.8"},
{ id:2, pId:123456, name:"部门2", checked:true, open:true},
{ id:21, pId:2, name:"部门2.1"},
{ id:22, pId:2, name:"部门2.2", open:true},
{ id:221, pId:22, name:"部门2.2.1", checked:true},
{ id:222, pId:22, name:"部门2.2.2"},
{ id:23, pId:2, name:"部门2.3"},
{ id:24, pId:2, name:"部门2.4"},
{ id:25, pId:2, name:"部门2.5"},
{ id:26, pId:2, name:"部门2.6"},
{ id:27, pId:2, name:"部门2.7"},
{ id:28, pId:2, name:"部门2.8"},
{ id:29, pId:2, name:"部门2.9"}
];
var setting = {
data: {
simpleData: {
enable: true
}
}
};
$.fn.zTree.init($("#tree"), setting, zNodes);
document.getElementById("key").value = ""; //清空搜索框中的内容
//绑定事件
key = $("#key");
key.bind("focus", focusKey)
.bind("blur", blurKey)
.bind("propertychange", searchNode) //property(属性)change(改变)的时候，触发事件
.bind("input", searchNode);
});
var lastValue = "", nodeList = [], fontCss = {};
//键盘释放：当输入框的键盘按键被松开时，把查询到的数据结果显示在标签中
function callNumber(){
var zTree = $.fn.zTree.getZTreeObj("tree");
//如果结果有值，则显示比例；如果结果为0，则显示"[0/0]"；如果结果为空，则清空标签框；
if(nodeList.length){
//让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框
zTree.selectNode(nodeList[0],false );
document.getElementById("key").focus();
clickCount=0; //防止重新输入的搜索信息的时候，没有清空上一次记录
var num=clickCount+1;
//显示当前所在的是第一条
document.getElementById("number").innerHTML="["+num+"/"+nodeList.length+"]";
}else if(nodeList.length == 0){
document.getElementById("number").innerHTML="[0/0]";
zTree.cancelSelectedNode(); //取消焦点
}
//如果输入框中没有搜索内容，则清空标签框
if(document.getElementById("key").value ==""){
document.getElementById("number").innerHTML="";
zTree.cancelSelectedNode();
}
}
function focusKey(e) {
if (key.hasClass("empty")) {
key.removeClass("empty");
}
}
function blurKey(e) {
if (key.get(0).value === "") {
key.addClass("empty");
}
}
//搜索节点
function searchNode(e) {
var zTree = $.fn.zTree.getZTreeObj("tree");
var value = $.trim(key.get(0).value);
var keyType = "name";
if (key.hasClass("empty")) {
value = "";
}
if (lastValue === value) return;
lastValue = value;
if (value === ""){
updateNodes(false);
return;
};
nodeList = zTree.getNodesByParamFuzzy(keyType, value); //调用ztree的模糊查询功能，得到符合条件的节点
updateNodes(true); //更新节点
}
//高亮显示被搜索到的节点
function updateNodes(highlight) {
var zTree = $.fn.zTree.getZTreeObj("tree");
for( var i=0, l=nodeList.length; i<l; i++) {
nodeList[i].highlight = highlight; //高亮显示搜索到的节点(highlight是自己设置的一个属性)
zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //将搜索到的节点的父节点展开
zTree.updateNode(nodeList[i]); //更新节点数据，主要用于该节点显示属性的更新
}
}
//点击向上按钮时，将焦点移向上一条数据
function clickUp(){
var zTree = $.fn.zTree.getZTreeObj("tree");
//如果焦点已经移动到了最后一条数据上，就返回第一条重新开始，否则继续移动到下一条
var total=nodeList.length-1;
if(nodeList.length==0){
alert("没有搜索结果！");
return ;
}else if(clickCount==0) {
alert("您已位于第一条记录上！");
return;
//让结果集里边的下一个节点获取焦点（主要为了设置背景色），再把焦点返回给搜索框
//zTree.selectNode(nodeList[clickCount], false)
}else{
//让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框
clickCount--;
zTree.selectNode(nodeList[clickCount], false);
}
document.getElementById("key").focus();
//显示当前所在的是条数
num=clickCount+1;
document.getElementById("number").innerHTML = "[" + num + "/" + nodeList.length + "]";
}
//点击向上按钮时，将焦点移向下一条数据
function clickDown(){
var zTree = $.fn.zTree.getZTreeObj("tree");
//如果焦点已经移动到了最后一条数据上，则提示用户（或者返回第一条重新开始），否则继续移动到下一条
var total=nodeList.length-1;
if(nodeList.length==0){
alert("没有搜索结果！");
return ;
}else if(total==clickCount)
{
alert("您已位于最后一条记录上！")
return;
}else{
//让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框
clickCount ++;
zTree.selectNode(nodeList[clickCount], false)
}
document.getElementById("key").focus();
//显示当前所在的条数
num=clickCount+1;
document.getElementById("number").innerHTML = "[" + num + "/" + nodeList.length + "]";
}
</script>
</body>
</html>
扫一扫
1149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
