zTree使用总结

想要使用zTree实现的效果如下:

zTree使用总结_第1张图片

即当鼠标点击进入文本框时,即通过ashx文件访问数据库后弹出zTree信息框。当点击窗口其他区域时此信息框隐藏。在这里,访问数据库的代码省略。

具体实现的代码如下:




    ZTREE DEMO 
    
    
    
    
    
    
    


    
  • name:


zTree添加自定义属性

zTree节点中添加自定义的属性键值,

可以直接在js中,如下。其中,attr是添加的自定义属性。

var zNodes =[
            { id:1, pId:0, name:"pNode 1", open:true, attr:"id1"},
            { id:11, pId:1, name:"pNode 11", attr:"id11"},
            { id:111, pId:11, name:"leaf node 111", attr:"id111"},
            { id:112, pId:11, name:"leaf node 112", attr:"id112"},
            { id:12, pId:1, name:"pNode 12", attr:"id12"},
            { id:2, pId:0, name:"pNode 2", attr:"id2"},
            { id:21, pId:2, name:"pNode 21", open:true, attr:"id21"}
];
也可以通过json转化到js对象来添加属性。

调用此属性的方式如下:

var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = zTree.getSelectedNodes();
nodes.sort(function compare(a, b) { return a.id - b.id; });
var v = "";
for (var i = 0, l = nodes.length; i < l; i++) {
        v += nodes[i].attr+ ",";
    }
if (v.length > 0) v = v.substring(0, v.length - 1);
alert("The attr value of selected nodes:"+v.toString());

你可能感兴趣的:(Web,notes)