Vue.NetCore/Vue.Net/VOL.Web/Html/ztree.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../Content/ztree/metroStyle/metroStyle.css" rel="stylesheet" />
    <script src="../Scripts/jquery-1.10.2.js"></script>
    <script src="../Scripts/ztree.3.5.26/jquery.ztree.core.js"></script>
    <script src="../Scripts/ztree.3.5.26/jquery.ztree.excheck.js"></script>
    <!--<script src="../Scripts/ztree.3.5.26/jquery.ztree.exedit.js"></script>-->
    <style>
        .ico_open, .ico_close {
            color: red;
        }
        .ztree li span.button.diy01_ico_open, .ztree li span.button.diy01_ico_close {
          background:red;
        }
        [class^="icon-"],
        [class*=" icon-"] {
            display: inline;
            width: auto;
            height: auto;
            line-height: normal;
            vertical-align: baseline;
            background-image: none;
            background-position: 0% 0%;
            background-repeat: repeat;
            margin-top: 0;
        }
        a [class^="icon-"],
        a [class*=" icon-"] {
            display: inline;
        }
        [class^="icon-"],
        [class*=" icon-"] {
            font-family: FontAwesome;
            font-weight: normal;
            font-style: normal;
            text-decoration: inherit;
            -webkit-font-smoothing: antialiased;
            *margin-right: .3em;
        }
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>

    </head>
<body>
    <span class=" icon-circle">
        &nbsp;
    </span>
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</body>
</html>
<script>
    var setting = {
        view: {
            showIcon: false
            //showIcon:false
            //addHoverDom: addHoverDom,
            //removeHoverDom: removeHoverDom,
          //  selectedMulti: false
        },
        check: {
            enable: false//显示复选框
        },
        callback: {
            onClick: onClickNode
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        edit: {
            enable: true
        }
    };

    var zNodes = [
        { id: 1, pId: 0, name: "父节点1", open: true, iconSkin: "diy01" },
        { id: 11, pId: 1, name: "父节点11" },
        { id: 111, pId: 11, name: "叶子节点111", isParent: true },
         { id: 11221, pId: 111, name: "叶子节点1222222" },
        { id: 112, pId: 11, name: "叶子节点112" },
        { id: 113, pId: 11, name: "叶子节点113" },
        { id: 114, pId: 11, name: "叶子节点114" },
        { id: 12, pId: 1, name: "父节点12" },
        { id: 121, pId: 12, name: "叶子节点121" },
        { id: 122, pId: 12, name: "叶子节点122" },
        { id: 123, pId: 12, name: "叶子节点123" },
        { id: 124, pId: 12, name: "叶子节点124" },
        { id: 13, pId: 1, name: "父节点13" },
        { id: 2, pId: 0, name: "父节点2" },
        { id: 21, pId: 2, name: "父节点21", open: true },
        { id: 211, pId: 21, name: "叶子节点211" },
        { id: 212, pId: 21, name: "叶子节点212" },
        { id: 213, pId: 21, name: "叶子节点213" },
        { id: 214, pId: 21, name: "叶子节点214" },
        { id: 22, pId: 2, name: "父节点22" },
        { id: 221, pId: 22, name: "叶子节点221" },
        { id: 222, pId: 22, name: "叶子节点222" },
        { id: 223, pId: 22, name: "叶子节点223" },
        { id: 224, pId: 22, name: "叶子节点224" },
        { id: 23, pId: 2, name: "父节点23" },
        { id: 231, pId: 23, name: "叶子节点231" },
        { id: 232, pId: 23, name: "叶子节点232" },
        { id: 233, pId: 23, name: "叶子节点233" },
        { id: 234, pId: 23, name: "叶子节点234" },
        { id: 3, pId: 0, name: "父节点3", isParent: true }
    ];

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

    function onClickNode(e, treeId, treeNode) {
        alert(treeNode);
    }
    var newCount = 1;
    //function addHoverDom(treeId, treeNode) {
    //    var sObj = $("#" + treeNode.tId + "_span");
    //    if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
    //    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
    //        + "' title='add node' onfocus='this.blur();'></span>";
    //    sObj.after(addStr);
    //    var btn = $("#addBtn_" + treeNode.tId);
    //    if (btn) btn.bind("click", function () {
    //        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    //        zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });
    //        return false;
    //    });
    //};
    //function removeHoverDom(treeId, treeNode) {
    //    $("#addBtn_" + treeNode.tId).unbind().remove();
  //  };
</script>