zTree使用小结

最近使用ztree插件：遇到接个问题，贴出来需要总结下：

问题描述：如果在js中把zNodes写死为：

var zNodes = [{id:110100101,pId:0,name:'活跃用户数',nocheck:true}]：

然后直接$.fn.zTree.init($("#treeDemo"), setting, zNodes);树结构就出来了没有问题，

但是修改为用ajax方式请求返回自己拼装的json格式的数据则不行，注意只是json格式，但他并不是真正的json，需要自己转为json【用eval函数】

解决办法如下：

$(document).ready(function(){
var url = '${base}/manager/messagesend/getIndexDimTreeData.feinno';
$.post(url,function(data){
$("#waitDataDiv").hide();
     zNodes = eval("("+data+")");
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
},"text");
});

总结：

// 总结1：ztree需要的节点必须是json对象，而且不是json样式的字符串【其实是因为setting配置了

// 总结2：js中声明变量var zNodes = [{id:110100101,pId:0,name:'活跃用户数',nocheck:true}]本身就是一个json对象了

// 总结3：用eval转化为真正的json对象，及时你自己拼接的是json格式的字符串，但是他依然是字符串，只有显式的转化才行。

另外补充几个有关ztree的小知识点：

1，有关setting

var setting = {
check: {
enable: true,
chkStyle: "radio",---勾选框类型(checkbox 或 radio）
radioType: "all"---radio 的分组范围，

"level" 时，在每一级节点范围内当做一个分组。在当前树内唯一 

"all"    时，在整棵树范围内当做一个分组，在整棵树内唯一
},
data: {
simpleData: {

		enable: true,
		idKey: "id",
		pIdKey: "pId",
		rootPId: 0

}
},
callback: {-----这里是注册函数的

onClick:zTreeOnClick,//节点点击事件

onCheck:zTreeOnClick//节点被选中事件
}
};

function zTreeOnClick(event, treeId, treeNode) {
//    alert(treeNode.tId + ", " + treeNode.name+","+treeNode.value);//success

}

=============================================树搜索开发=======================================

今天有个新需求，由于数据庞大，导致结果树很臃肿，不好查找，好像在汪洋海中找寻自己想要的东西，于是有搜索的需求：

有两种方式：

方式一：全部树都还在，只是给搜索到的结果高亮显示:

效果图 ：

缺点很明显：还是有大量的无用信息展示，效果只是比没有好一些

于是想要方式二：

直接只显示匹配的结果：

效果：

这样就不用高亮显示了，直接只展示匹配的，简洁明了太多了，很好。

下面看看实现：

方式一的实现：

    function getFontCss(treeId, treeNode) {  
   return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};  
}
var setting = {
check: {
enable: true,
chkStyle: "checkbox",
radioType: "all"
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
},  
       view :{ 
        showIcon: true,
           fontCss: getFontCss  
       }  
};

//搜索方式一、高亮显示
//使用搜索数据 加高亮显示功能，需要2步  
//1.在tree的setting 的view 设置里面加上 fontCss: getFontCss 设置  
//2.在ztree容器上方，添加一个文本框，并添加onkeyup事件，该事件调用固定方法  changeColor(id,key,value）  
//  id指ztree容器的id，一般为ul，key是指按ztree节点的数据的哪个属性为条件来过滤,value是指过滤条件，该过滤为模糊过滤  
function changeColor(id,key,value){
if(value==""){
return;
}
   treeId = id;  
   var treeObj = $.fn.zTree.getZTreeObj(treeId); 
   var Nodes = treeObj.getNodes();
   nodeList = treeObj.transformToArray(Nodes);
   
   updateNodes(false);  
   if(value != ""){  
       nodeList = treeObj.getNodesByParamFuzzy(key, value);  
       if(nodeList && nodeList.length>0){  
           updateNodes(true);  
       }  
   }  
}  
function updateNodes(highlight) {  
   var treeObj = $.fn.zTree.getZTreeObj(treeId);  
   for( var i=0; i<nodeList.length;  i++) {  
       nodeList[i].highlight = highlight;  
       treeObj.updateNode(nodeList[i]);  
   }  
} 

方式二实现：

//搜索方式二:直接只显示需要的节点
function onlyShowResult(treeId,key,value){

initZTree(allData);//先显示所有的节点
   if(value != ""){
//     var node =  treeObj.getNodesByFilter(filter, true); // 仅查找一个节点
//     var selectNodeList = treeObj.getNodesByFilter(filter); // 查找节点集合
    var selectNodeList = treeObj.getNodesByParamFuzzy(key, value);  //搜索到的节点,
       if(selectNodeList.length==0){
        return;
       }
       $.fn.zTree.destroy(treeId);//先销毁旧树
       //下面接着组装新树的json数据，因为如果直接用selectNodeList则，总会有重复的问题，很无奈啊，估计是ztree的bug
       var selectNodeListReal="[";
       for(var i = 0;i<selectNodeList.length;i++){
        var nodeItem = selectNodeList[i];
        var id = nodeItem.id;
        var pId = nodeItem.pId;
        var value = nodeItem.value;
        var name = nodeItem.name;
        selectNodeListReal =selectNodeListReal+ "{id:"+id+",open:true,pId:"+pId+",name:'"+name+"',value:'"+value+"'},"; 
       }
       selectNodeListReal = selectNodeListReal+"]";
var data = eval(selectNodeListReal);
initZTree(data);//重新加载树

   }  
   
}