什么是ztree
ZtreeAPI
官网解说：
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。 zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 采用了 延迟加载 技术，上万节点轻松加载，
即使在 IE6
下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 支持 JSON 数据 支持静态 和
Ajax 异步加载节点数据 支持任意更换皮肤 / 自定义图标（依靠css） 支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟 在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现 灵活多变的功能
应用场景
组织架构、菜单展示、树展示等等
具体功能
初始化数据
window.zTreeInit.init(C5("#treeDemo"), Win.setting, Win.zNodes);
Win.fun.fuzzySearch('treeDemo', '#key', false, true);
设置
setting : {
check: {
enable: false//是否显示复选框checkbox
},
view: {
nameIsHTML: true, //允许name支持html
selectedMulti: false,//设置是否允许同时选中多个节点。
expandSpeed:"",//三种预定速度之一的字符串("slow", "normal", or "fast")设置为 "" 时，不显示动画效果
fontCss:function getFont(treeId,node){
return node.font ? node.font:{
};
}// parse.font = {'font-weight': 'bold'} 设置目录字体加粗
},
edit: {
enable: false,//设置 zTree 是否处于编辑状态
editNameSelectAll: false//节点编辑名称 input 初次显示时,设置 txt 内容是否为全选状态
},
data: {
simpleData: {
enable: true//true / false 分别表示 使用 / 不使用 简单数据模式
},key:{
title:"title"//zTree 节点数据保存节点提示信息的属性名称
}
},
callback:{
//选中事件
onClick:function clickNode(event,treeid,treeNode){
xxxxxxx
//更新链接地址
},//折叠事件
onCollapse:function sollapseNode(event,treeid,treeNode){
console.log("我已折叠");
},//展开事件
onExpand:function expandNode(event,treeid,treeNode){
console.log("我已展开");
},onNodeCreated:function onNodeCreated(){
console.log("创建节点");
},
beforeClick:function beforeClick(treeId, node){
console.log("用于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作");
}
}
}
//数据 可以设置为空，动态生成
zNodes:[
{
id:"xxxxx", pId:0, name:"xxxx", t:"id=1", open:true,icon:"图片路径",title:"内容提示"},
........
]
上下级通过ID和PID识别展示
ID-->PID 关系
应用实例
搜索定位：修改对应的demo直接使用
实现异步加载组织数据结构图，动态生成节点数据，默认选中第一条，模糊查询叶子节点数据显示，其他目录节点进行折叠
var zTreeObj = window.zTreeInit.getZTreeObj(zTreeId);//get the ztree object by ztree id
//默认展开第一个子节点
var nodes=zTreeObj.getNodes();
Win.parem.zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
var indexs=1;
var indexNode=0;
for(var i=0;i<indexs;i++){
if(i===0){
indexs++;
Win.parem.curMenu=Win.parem.zTree_Menu.getNodes()[indexNode];
}
if(i>0 && typeof(Win.parem.curMenu)=="undefined"){
break;
}
if(Win.parem.curMenu.level===3 && typeof(Win.parem.curMenu.children)=="undefined"){
//配变
/* i=3;
indexs=i+1;
indexss=i;
Win.parem.curMenu=Win.parem.curMenu.children[i]; */
//Win.parem.curMenu=Win.parem.zTree_Menu.getNodes()[indexNode];
break;
}else if(Win.parem.curMenu.level===2 && typeof(Win.parem.curMenu.children)=="undefined"){
//线
i=2;
Win.parem.curMenu=Win.parem.curMenu.getParentNode();
if(Win.parem.curMenu.getNextNode()!=null){
Win.parem.curMenu=Win.parem.curMenu.getNextNode();
}else{
Win.parem.curMenu=Win.parem.curMenu.getParentNode();
Win.parem.curMenu=Win.parem.curMenu.getNextNode();
}
}else if(Win.parem.curMenu.level===1 && typeof(Win.parem.curMenu.children)=="undefined"){
//站
i=1;
Win.parem.curMenu=Win.parem.curMenu.getParentNode();
if(Win.parem.curMenu.getNextNode()!=null){
Win.parem.curMenu=Win.parem.curMenu.getNextNode();
}else{
Win.parem.curMenu=Win.parem.curMenu.getParentNode();
Win.parem.curMenu=Win.parem.curMenu.getNextNode();
}
}else if(Win.parem.curMenu.level===0 && typeof(Win.parem.curMenu.children)=="undefined"){
//供电局
i=0;
if(Win.parem.curMenu.getNextNode()!=null){
Win.parem.curMenu=Win.parem.curMenu.getNextNode();
indexNode++;
}else{
break;
}
}else if(i>0 && Win.parem.curMenu!=null && typeof(Win.parem.curMenu.children)!="undefined"){
Win.parem.curMenu=Win.parem.curMenu.children[0];
indexs++;
}
}
zTreeObj.checkNode(Win.parem.curMenu,Win.parem.curMenu,true,true);
//获取第一个节点
//var node = checkData;
//默认是关闭的
zTreeObj.expandAll(false);
//选中第一个子节点
zTreeObj.selectNode(Win.parem.curMenu);
Win.setting.callback.onClick(null, zTreeObj.setting.treeId, Win.parem.curMenu);
if(!zTreeObj){
alert("fail to get ztree object");
}
var nameKey = zTreeObj.setting.data.key.name; //get the key of the node name
isHighLight = isHighLight===false?false:true;//default true, only use false to disable highlight
isExpand = isExpand?true:false; // not to expand in default
zTreeObj.setting.view.nameIsHTML = isHighLight; //allow use html in node name for highlight use
var metaChar = '[\\[\\]\\\\\^\\$\\.\\|\\?\\*\\+\\(\\)]'; //js meta characters
var rexMeta = new RegExp(metaChar, 'gi');//regular expression to match meta characters
// keywords filter function
function ztreeFilter(zTreeObj,_keywords,callBackFunc) {
if(!_keywords){
_keywords =''; //default blank for _keywords
}
// function to find the matching node
function filterFunc(node) {
if(node && node.oldname && node.oldname.length>0){
node[nameKey] = node.oldname; //recover oldname of the node if exist
}
zTreeObj.updateNode(node); //update node to for modifications take effect
if (_keywords.length == 0) {
//return true to show all nodes if the keyword is blank
//zTreeObj.showNode(node);
//zTreeObj.expandNode(node,isExpand);
return true;
}
//transform node name and keywords to lowercase
if (node[nameKey] && node[nameKey].toLowerCase().indexOf(_keywords.toLowerCase())!=-1) {
if(isHighLight){
//highlight process
//a new variable 'newKeywords' created to store the keywords information
//keep the parameter '_keywords' as initial and it will be used in next node
//process the meta characters in _keywords thus the RegExp can be correctly used in str.replace
var newKeywords = _keywords.replace(rexMeta,function(matchStr){
//add escape character before meta characters
return '\\' + matchStr;
});
node.oldname = node[nameKey]; //store the old name
var rexGlobal = new RegExp(newKeywords, 'gi');//'g' for global,'i' for ignore case
//use replace(RegExp,replacement) since replace(/substr/g,replacement) cannot be used here
node[nameKey] = node.oldname.replace(rexGlobal, function(originalText){
//highlight the matching words in node name
var highLightText =
'<span style="color: whitesmoke;background-color: darkred;">'
+ originalText
+'</span>';
return highLightText;
});
zTreeObj.updateNode(node); //update node for modifications take effect
}
//zTreeObj.showNode(node);//show node with matching keywords
return true; //return true and show this node
}
//zTreeObj.hideNode(node); // hide node that not matched || 若不隐藏其他节点的数据，注释此处
return false; //return false for node not matched
}
var nodesShow = zTreeObj.getNodesByFilter(filterFunc); //get all nodes that would be shown
processShowNodes(nodesShow, _keywords);//nodes should be reprocessed to show correctly
}
/**
* reprocess of nodes before showing
*/
function processShowNodes(nodesShow,_keywords){
if(nodesShow && nodesShow.length>0){
//process the ancient nodes if _keywords is not blank
if(_keywords.length>0){
$.each(nodesShow, function(n,obj){
var pathOfOne = obj.getPath();//get all the ancient nodes including current node
if(pathOfOne && pathOfOne.length>0){
//i < pathOfOne.length-1 process every node in path except self
for(var i=0;i<pathOfOne.length-1;i++){
zTreeObj.showNode(pathOfOne[i]); //show node
zTreeObj.expandNode(pathOfOne[i],true); //expand node
if((i+1)==pathOfOne.length-1){
//选中搜索的节点 ||在此处根据具体要求显示对应的层级数据
if(pathOfOne[i+1].type==8){
zTreeObj.selectNode(pathOfOne[i+1]);//选中指定节点
Win.setting.callback.onClick(null, zTreeObj.setting.treeId, pathOfOne[i+1]);//选中之后的动作
}
}
}
}
});
}else{
//show all nodes when _keywords is blank and expand the root nodes ||若无则显示默认层级格式数据
var rootNodes = zTreeObj.getNodesByParam('level','0');//get all root nodes
$.each(rootNodes,function(n,obj){
//zTreeObj.expandNode(obj,true); //expand all root nodes
});
}
}
}
var timeoutId = null;
var lastKeyword = '';
// excute lazy load once after input change, the last pending task will be cancled
//节点模糊查询入口
function searchNodeLazy(_keywords) {
if (timeoutId) {
//clear pending task
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function() {
if (lastKeyword === _keywords) {
return;
}
ztreeFilter(zTreeObj,_keywords); //lazy load ztreeFilter function
// $(searchField).focus();//focus input field again after filtering
lastKeyword = _keywords;
}, 500);
}
//通过页面点击事件||回车事件 进行全局调用
App.parem.pollewValFun= function(data){
searchNodeLazy(data.objName);
}
}