Ztree的简单使用

ZTree的简介

ZTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

目录节点信息的判断

通过setting的callback中的beforeClick回调函数，在单击前对是不是类目信息，进行判断。

通过点击获取ZTree的节点信息

通过在setting的callback中的onClick回调函数，获取单击的信息，并做处理。

使用ZTree构造一个简单的树

需要导入的js和css文件

        <link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" />
        <script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>

封装的工具方法

var zTreeUtil = {
                defaluts: { //默认参数
                    type: "GET",
                    url: "jsonData.json",
                    dataType: "json",
                    treeId: undefined,
                    showDataId: undefined
                },
                zNodes: "", //用于保存创建的树节点
                setting: { //设置
                    view: {
                        showLine: true, //显示辅助线
                        dblClickExpand: true
                    },
                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "id",
                            pIdKey: "pid",
                            rootPId: 0
                        }
                    },
                    callback: { //回调设置
                        beforeClick: function(treeId, treeNode) { //设置不能选择类目
                            var check = (treeNode && !treeNode.isParent);
                            if(!check) alert("请不要选择类别!");
                            return check;
                        },
                        onClick: function(e, treeId, treeNode) {
                            var zTree = $.fn.zTree.getZTreeObj(zTreeUtil.defaluts.treeId), //页面传递的treeId
                                nodes = zTree.getSelectedNodes(),
                                nameData = "";
                            nodes.sort(function compare(a, b) {
                                return a.id - b.id;
                            });
                            for(var i = 0, l = nodes.length; i < l; i++) { //获取nameData
                                nameData += nodes[i].name + ",";
                            }
                            if(nameData.length > 0) {
                                nameData = nameData.substring(0, nameData.length - 1);
                            }
                            if(undefined != zTreeUtil.defaluts.showDataId) { //数据回显
                                var nameObj = $("#" + zTreeUtil.defaluts.showDataId);
                                nameObj.attr("value", nameData);
                                var nameid = ""; //设置nameid属性
                                for(var i = 0, l = nodes.length; i < l; i++) {
                                    nameid += nodes[i].id + ",";
                                }
                                if(nameid.length > 0) {
                                    nameid = nameid.substring(0, nameid.length - 1);
                                }
                                nameObj.attr("nameid", nameid);
                            }

                        }
                    }
                },
                createTree: function(options) { //创建树
                    zTreeUtil.defaluts = $.extend({}, zTreeUtil.defaluts, options); //使用jQuery.extend 覆盖插件默认参数
                    $.ajax({ //请求数据,创建树
                        type: zTreeUtil.defaluts.type,
                        url: zTreeUtil.defaluts.url,
                        dataType: zTreeUtil.defaluts.dataType, //返回的结果为json  
                        success: function(data) {
                            zNodes = $.fn.zTree.init($("#" + zTreeUtil.defaluts.treeId), zTreeUtil.setting, data); //创建树
                        },
                        error: function(data) {
                            alert("创建树失败!");
                        }
                    });
                }
            };

在页面生成一个树

页面JS代码

    $(function() { //创建
        zTreeUtil.createTree({
            url: "jsonData.json",
            treeId: "treeDemo",
            showDataId: "nameSel"
        });
    });

页面HTML代码

<body>
    <div style="margin-left: 40%;">
        <input id="nameSel" type="text" readonly placeholder="选中的内容..." />
        <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 160px;">
        </ul>
    </div>
</body>

页面截图

使用的JSON数据

[
    {
        "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"
    }
]