ztree的初级使用

最新推荐文章于 2021-09-02 19:22:29 发布

原创最新推荐文章于 2021-09-02 19:22:29 发布 · 373 阅读

1 ·

CC 4.0 BY-SA版权

树菜单专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的zTree使用案例，展示了如何通过JSON数据构建组织结构树，并提供了多种交互功能，如节点选择、全选及获取选中节点等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ztree的初级使用

公司有要求要树菜单，而且还要美观，我那么low比的一个人，又不会写，很绝望，于是就找到网上ztree的bootstrap版本。

凑合用吧，在深入我就不行了。下面直接放demo吧。
json

  {
    "id": 1,
    "text": "总经办",
    "state": "open",
    "checked": false,
    "attributes": null,
    "iconCls": "fi-social-windows",
    "pid": null,
    "openMode": null
  },
  {
    "id": 2,
    "text": "采购",
    "state": "open",
    "checked": false,
    "attributes": null,
    "iconCls": "fi-social-snapchat",
    "pid": 1,
    "openMode": null
  },
  {
    "id": 3,
    "text": "出纳",
    "state": "open",
    "checked": false,
    "attributes": null,
    "iconCls": "fi-social-snapchat",
    "pid": 1,
    "openMode": null
  },
  {
    "id": 4,
    "text": "财务",
    "state": "open",
    "checked": false,
    "attributes": null,
    "iconCls": "fi-social-snapchat",
    "pid": 1,
    "openMode": null
  },
  {
    "id": 6,
    "text": "测试组",
    "state": "open",
    "checked": false,
    "attributes": null,
    "iconCls": "fi-social-snapchat",
    "pid": 3,
    "openMode": null
  },
  {
  "id":7,
  "text": "java组",
  "state": "open",
  "checked": false,
  "attributes": null,
  "iconCls": "fi-social-snapchat",
  "pid": 3,
  "openMode": null
},
  {
    "id": 8,
    "text": "C++组",
    "state": "open",
    "checked": false,
    "attributes": null,
    "iconCls": "fi-social-snapchat",
    "pid": 3,
    "openMode": null
  },
  {
    "id": 9,
    "text": "C--组",
    "state": "open",
    "checked": false,
    "attributes": null,
    "iconCls": "fi-social-snapchat",
    "pid": 3,
    "openMode": null
  },
  {
    "id": 3,
    "text": "技术部",
    "state": "open",
    "checked": false,
    "attributes": null,
    "iconCls": "fi-social-github",
    "pid": null,
    "openMode": null
  },
  {
    "id": 5,
    "text": "产品部",
    "state": "open",
    "checked": false,
    "attributes": null,
    "iconCls": "fi-social-apple",
    "pid": null,
    "openMode": null
  },
  {
  "id": 11,
  "text": "A产品",
  "state": "open",
  "checked": false,
  "attributes": null,
  "iconCls": "fi-social-snapchat",
  "pid": 5,
  "openMode": null
},
  {
    "id": 12,
    "text": "B产品",
    "state": "open",
    "checked": false,
    "attributes": null,
    "iconCls": "fi-social-snapchat",
    "pid": 5,
    "openMode": null
  },
  {
    "id": 13,
    "text": "C产品",
    "state": "open",
    "checked": false,
    "attributes": null,
    "iconCls": "fi-social-snapchat",
    "pid": 5,
    "openMode": null
  }
]
随便网上瞎找的json
html`<body>
<button onclick="clear_tree()">清空</button>
<button onclick="add_tree()">加载</button>
<button onclick="ceshi()">测试</button>
<br>
<input type="checkbox" onclick="checcAll()" id="checkAll">全选
<div id="content" style="width: 300px;height: 300px;background: #cfcfcf;position: absolute;left:220px"></div>
<div id="treeDemo" class="ztree"></div>
</body>`

ztree插件的使用

<script>
    var setting = {
        data:{
            simpleData : {
                enable:true,
                checkable : true,
                idkey : "id",               //在isSimpleData格式下，当前节点id属性
                pIdKey : "pid"       //在isSimpleData格式下，当前节点的父节点id属性
            },
            key:{
                name:"text"
            }
        },
        check: {
            enable: true
        },
        callback:{
//            beforeCheck:beforeCheck,//捕获选中之前的回调函数
            onCheck:onCheck,         //捕获选中之后的回调函数
            onClick:Click,           //捕获单击事件
            onDblClick:onDblClick   //双击
        }
    };


    function onCheck(){
//        alert("选中了")
        getCheckNodes();
    }

    function Click(){
//       console.log("单击")
    }

    function onDblClick(){
//        alert("双击")
    }


    //清空树
    function clear_tree(){
//        $.fn.zTree.destroy("treeDemo");   //效果相同

        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getNodes();
        for (var i = nodes.length-1; i >= 0; i--) {
            treeObj.removeNode(nodes[i]);
        }
    }

//重新加载
    function add_tree(){
        onload_tree()
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getCheckedNodes()
    }
    //测试
    function ceshi(){
//        getCheckNodes();
    }

    //返回一个根节点包括他所有子集
    function getRoot() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var node = treeObj.getNodesByFilter(function (node) { return node.level == 0 }, true);
        console.log(node)
    }

    //返回根节点集合
    function getRoots() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getNodesByFilter(function (node) { return node.level == 0 });
        console.log(nodes)
        }

    //获取当前节点的根节点(treeNode为当前节点)
    function getCurrentRoot(treeNode){
        if(treeNode.getParentNode()!=null){
            var parentNode = treeNode.getParentNode();
            return getCurrentRoot(parentNode);
        }else{
            return treeNode.id;
        }
    }


    //获取当前被勾选的节点集合
    function getCheckNodes(){
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getCheckedNodes(true);
        var res ="";
        for(var i=0;i<nodes.length;i++){
            if(nodes[i].getParentNode()!==null&&nodes[i].getParentNode().getCheckStatus().half===false){//勾选这里if判断是重点。
                console.log(nodes[i].text);
                res += nodes[i].text
            }else if(nodes[i].getCheckStatus().half==false){
                console.log(nodes[i].text);
                res += nodes[i].text
            }
        }
        $("#content").html(res)
    }

   // 获取当前被选中的节点数据集合，非勾选
    function getNode(){
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getSelectedNodes();
        for(var i=0;i<nodes.length;i++){
            console.log(nodes[i].text);
            alert(nodes[i].text)
        }
    }
    //全选按钮操作
function checcAll(){
    if($('#checkAll').is(':checked')) {
        CheckAllNodes();//全选
        getCheckNodes();//获取当前勾选的
    }else {
        CancelAllNodes();//全取消
        $("#content").html("")
    }

}
    //全选
    function CheckAllNodes() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        treeObj.checkAllNodes(true);
    }

    //全取消
    function CancelAllNodes() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        treeObj.checkAllNodes(false);
    }