zTree -- tree plugin

@{
    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;

        // Parameter configuration of zTree, please refer to the API documentation for in-depth use (detailed explanation of setting configuration)
        var setting = {
            check: {
                enable: true, //Set whether to display the checkbox checkbox
                chkDisabledInherit: true
            },
            view: {
                selectedMulti: true, //Set whether multiple nodes can be selected at the same time
                showIcon: true, //Set whether to display the node icon
                showLine: true, //Set whether to display the connection between nodes
                showTitle: true, //Set whether to display the title prompt information of the node
                expandSpeed: "slow", //Set the animation speed when the zTree node expands, collapses or cancels the animation (three default definitions: "slow", "normal", "fast") or a millisecond value representing the animation duration (eg: 1000 )
                selectedMulti: false, //Set whether to allow multiple nodes to be selected at the same time. Default: true
            },
            data: {
                key: {
                    title: "t",
                    name: "name"
                },
                keep: {
                    parent: true,
                    leaf: true
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                },
                callback: {
                    // onCollapse: collapseNode,
                    //onExpand: expandNode,
                },
            },
        };

        // Data attributes of zTree, please refer to the API documentation for in-depth use (detailed explanation of zTreeNode node data)
        var zNodes = [
            {
                id: 1, pId: 0, name: "Level 1", t: "I'm very ordinary, just expand/collapse me", //whether the node is expanded
                icon: "", //The icon of the node
                iconOpen: "/Content/img/1_open.png", //node expanded icon
                iconClose: "/Content/img/1_close.png", //icon when the node is collapsed
                children: [
                    {
                        id: 3, pId: 1, name: "Secondary 1",
                        children: [
                            {
                                name: "Level 3 1", children: [
                                    { name: "Level 4 1", icon: "/Content/img/2.png", /*Node icon*/ },
                                    { name: "Level 4 2", icon: "/Content/img/3.png", /*Node icon*/ }
                                ]
                            },
                            { name: "Level 3 2" }
                        ]
                    },
                    { id: 4, pId: 1, name: "Secondary 2", icon: "/Content/img/4.png", /*Node icon*/ }
                ]
            },
            {
                id: 2, pId: 0, name: "Level 1",
                iconOpen: "/Content/img/1_open.png", //node expanded icon
                iconClose: "/Content/img/1_close.png", //icon when the node is collapsed
                children: [
                    { id: 5, pId: 2, name: "Secondary 1", icon: "/Content/img/5.png", /*Node icon*/ },
                    { id: 6, pId: 2, name: "Secondary 2", icon: "/Content/img/6.png", /*Node icon*/ }
                ]
            }
        ];

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

            var nodes = zTreeObj.getNodes();
            for (var i = 0; i < nodes.length; i++) { //Set node expansion (default expansion level 2)
                zTreeObj.expandNode(nodes[i], true, false, true);
            }
        });
    </SCRIPT>
</head>
<body>
    <div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</body>
</html>
zTree -- tree plugin

Guess you like
