zTree插件使用

插件使用效果

                                                                                                             

在需要的页面中引入css，js.

　　<link rel="stylesheet" type="text/css" href="zTree_v3/demo.css" />
　　<link rel="stylesheet" type="text/css" href="zTree_v3/zTreeStyle.css"/>

　　<script type="text/javascript" src="zTree_v3/jquery.ztree.core.min.js"></script>

在HTML页面中插件展示处

<div id="treeDemo" class="ztree"></div>

自定义内容

SCRIPT type="text/javascript">
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: beforeClick,
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"普通的父节点", open:true},//open为true表示为展开状态
            { id:11, pId:1, name:"叶子节点 - 1",},
            { id:12, pId:1, name:"叶子节点 - 2",},
            { id:13, pId:1, name:"叶子节点 - 3",},
            { id:2, pId:0, name:"NB的父节点",open:true},
            { id:21, pId:2, name:"叶子节点2 - 1", click:false},
            { id:22, pId:2, name:"叶子节点2 - 2", click:false},
            { id:23, pId:2, name:"叶子节点2 - 3", click:false}
　　　　　　 ];

　　　　　　function beforeClick(treeId, treeNode, clickFlag) {//点击节点获取该节点信息

　　　　　　　　treeNode.getParentNode()//点击节点的父节点参数

　　　　　　　　treeNode//判断点击节点的所有信息
　　　　　　　　return(treeNode.click != false);
　　　　　　}

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
    </SCRIPT>

 给选中节点添加标记

　　var zTree = $.fn.zTree.getZTreeObj("treeDemo");
　　var node = zTree.getNodeByParam("id",1);//当前节点的id
　　zTree.selectNode(node);

 插件下载http://pan.baidu.com/s/1eSJ7bpg