zTree -- 树插件

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ZTreeTest</title>
    <link href="~/Content/zTreeStyle.css" rel="stylesheet" />
    <script src="~/js/jquery-1.11.3.min.js"></script>
    <script src="~/js/jquery.ztree.all-3.5.min.js"></script>
    <SCRIPT LANGUAGE="JavaScript">
        var zTreeObj;

        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            check: {
                enable: true,            //设置是否显示checkbox复选框
                chkDisabledInherit: true
            },
            view: {
                selectedMulti: true,     //设置是否能够同时选中多个节点
                showIcon: true,          //设置是否显示节点图标
                showLine: true,          //设置是否显示节点与节点之间的连线
                showTitle: true,         //设置是否显示节点的title提示信息
                expandSpeed: "slow",     //设置 zTree节点展开、折叠时的动画速度或取消动画(三种默认定义："slow", "normal", "fast")或 表示动画时长的毫秒数值(如：1000)
                selectedMulti: false,    //设置是否允许同时选中多个节点。默认值: true
            },
            data: {
                key: {
                    title: "t",
                    name: "name"
                },
                keep: {
                    parent: true,
                    leaf: true
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                },
                callback: {
                    //onCollapse: collapseNode,
                    //onExpand: expandNode,
                },
            },
        };

        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [
            {
                id: 1, pId: 0, name: "一级", t: "我很普通，随便 展开/折叠 我吧",   //节点是否展开
                icon: "", //节点的图标
                iconOpen: "/Content/img/1_open.png", //节点展开式的图标
                iconClose: "/Content/img/1_close.png", //节点折叠时的图标
                children: [
                    {
                        id: 3, pId: 1, name: "二级1",
                        children: [
                            {
                                name: "三级1", children: [
                                    { name: "四级1", icon: "/Content/img/2.png", /*节点的图标*/ },
                                    { name: "四级2", icon: "/Content/img/3.png", /*节点的图标*/ }
                                ]
                            },
                            { name: "三级2" }
                        ]
                    },
                    { id: 4, pId: 1, name: "二级2", icon: "/Content/img/4.png", /*节点的图标*/ }
                ]
            },
            {
                id: 2, pId: 0, name: "一级",
                iconOpen: "/Content/img/1_open.png", //节点展开式的图标
                iconClose: "/Content/img/1_close.png", //节点折叠时的图标
                children: [
                    { id: 5, pId: 2, name: "二级1", icon: "/Content/img/5.png", /*节点的图标*/ },
                    { id: 6, pId: 2, name: "二级2", icon: "/Content/img/6.png", /*节点的图标*/ }
                ]
            }
        ];

        $(document).ready(function () {
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

            var nodes = zTreeObj.getNodes();
            for (var i = 0; i < nodes.length; i++) {    //设置节点展开（默认展开2级）
                zTreeObj.expandNode(nodes[i], true, false, true);
            }
        });
    </SCRIPT>
</head>
<body>
    <div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</body>
</html>
猜你喜欢
