最近使用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);//重新加载树
}
}