ztree的初级使用

来源：互联网发布：外婆的澎湖湾知乎编辑：程序博客网时间：2024/05/22 14:14

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  }]随便网上瞎找的jsonhtml`<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);    }

“`都是CV的，怎么办，我也很绝望。反正就是这样了。没办法了，反正是条咸鱼

阅读全文

0 0