jQuery树插件–zTree的使用

zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。zTree的特点：（官方文档）

• 1.zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
• 2.采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
• 3.兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
• 4.支持 JSON 数据
• 5.支持静态 和 Ajax 异步加载节点数据
• 6.支持任意更换皮肤 / 自定义图标（依靠css）
• 7.支持极其灵活的 checkbox 或 radio 选择功能
• 8.提供多种事件响应回调
• 9.灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
• 10.在一个页面内可同时生成多个 Tree 实例
• 11.简单的参数配置实现 灵活多变的功能

        zTree的官方文档写的是很详细的，demo文件夹中有案例展示，index页面打开就可以整体预览，具体看如图标更改或者check等可以进入demo中的excheck文件夹下具体查看说明。ztree的文档见文章后面链接

       下面是一个一个应用例子，节点是手写的，其实应该是json传过来的。

        $(function () {
            initTable();//初始化表格
            ztreeload();//加载左侧节点
            checked();
        });
        //ztree加载
        var zTreeObj;
        // zTree 的参数配置

        var setting = {
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: { "Y": "s", "N": "s" }//设置级联状态为：（勾选与否均为：关联子，不关联父）
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: zTreeOnCheck//定义选中事件
            }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [
             { id: 1, pId: 0, name: "南方", font: { 'font-weight': 'bold' }, level: 0, attr: 0, open: true },
             { id: 11, pId: 1, name: "广东省", level: 1, attr: 440000, open: true },
             { id: 111, pId: 11, name: "广州市", level: 2, attr: 2941, icon: "css/zTreeStyle/img/diy/8.png" },
             { id: 112, pId: 11, name: "深圳市", level: 2, attr: 2943, icon: "css/zTreeStyle/img/diy/8.png" },
             { id: 12, pId: 1, name: "四川省", level: 1, attr: 510000, open: true },
             { id: 121, pId: 12, name: "成都市", level: 2, attr: 3218, icon: "css/zTreeStyle/img/diy/8.png" },
             { id: 122, pId: 12, name: "雅安市", level: 2, attr: 3233, icon: "css/zTreeStyle/img/diy/8.png" },

             { id: 2, pId: 0, name: "北方", font: { 'font-weight': 'bold' }, level: 0, attr: 1, open: true },
             { id: 21, pId: 2, name: "河南省", level: 1, attr: 410000, open: true },
             { id: 211, pId: 21, name: "开封市", level: 2, attr: 2241, icon: "css/zTreeStyle/img/diy/8.png" },
             { id: 212, pId: 21, name: "洛阳市", level: 2, attr: 2242, icon: "css/zTreeStyle/img/diy/8.png" },
        ];
        function ztreeload() {
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        }

        ztree文档下载地址：zTree_v3

       ztree官方地址：http://www.ztree.me/v3/main.php#_zTreeInfo