zTree -- jQuery 树插件

zTree 简介

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

zTree的简单使用过程

1、首先是导入 zTree的相关js库和css

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

2、在js中写好的树的相关配置

    var setting = {

        check: {
            enable: true,
            chkStyle: "checkbox",  //设置为checkbox类型的树
            chkDisabledInherit: false,
            chkboxType:{ "Y" : "s", "N" : "" } //设置勾选和取消勾选时的父子关系
        },
        data: {
            simpleData: {
                enable: true
            },
            key:
            {
                title:"id"
            }   
        }
    };

3、在js中设置树要显示的数据

#数据格式可以是Array:
    var zTreeNodes =[
                { id:1, pId:0, name:"随意勾选 1", open:true},
                { id:11, pId:1, name:"随意勾选 1-1", open:true}
                ];
#或者是json:
    var zTreeNodes = [{"id":"1", "name":"test1","chkDisabled":true,open:true,"children":[{"id":"2","name":"test2",open:true}]}];

4、调用zTree的js库中的方法初始化树

#初始化树时必须有一个标签的class 为 ztree
    <ul id="treeDemo" class="ztree"></ul>
#使用之前创建的 配置setting 和 数据zTreeNodes 初始化树，且生成一个树对象
    var treeObj = $.fn.zTree.init($("#treeDemo"), setting, zTreeNodes);

5、获取在树中勾选的数据

#通过初始化树时生成的树对象treeObj，获取被勾选的数据
    function getTree()
    {
        //var treeObj = $.fn.zTree.getZTreeObj("#treeDemo");
        var nodes = treeObj.getCheckedNodes(true);
        var permissions="";
        for(i in nodes)
        {
            permissions += nodes[i].id + ";";
        }

        $("#list").text(permissions+"test");
    }

参考文档

1.zTree -- jQuery 树插件 2.Moving the Steam client installation 3.Steam fatal error steam needs to be online to update, but was set to offline movies