zTree+ashx获取数据形成树形菜单的例子

使用zTree实现的效果如下:

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

具体实现的代码如下：
1、html代码：

   
   
    css" rel="Stylesheet"
        type="text/css" />
   
   
   
   
   


   

2、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());

文章转自:http://www.suchso.com/UIweb/ztree-ashx-net-demo.html