什么是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);
}
}