树状菜单---zTree插件使用

zTree使用

zTree 是一个依靠 jQuery 实现的多功能 “树插件”， 而且拥有较好的浏览器兼容性，有着丰富的功能以及可以自定义样式，足以满足大部分业务的开发。jQuery 实现的树状菜单、树状数据的Web显示、权限管理等等。使用步骤如下：

1.引入css和js文件

<link rel="stylesheet" href="/static/zTree_v3/css/demo.css" type="text/css">
<link rel="stylesheet" href="/static/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="{{ static_url('js/jquery-3.3.1.min.js') }}"></script>
<script type="text/javascript" src="/static/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/static/zTree_v3/js/jquery.ztree.excheck.js"></script>

2.在html页面中想要显示树的地方创建ztree Div

<div class="modal-body">
    <ul id="treeDemo" class="ztree" style="width:260px; overflow:auto;"></ul>
    <!-- <div id="tree" style="height:220px;overflow-x:hidden;"> -->
</div>

3.初始化ztree

<script type="text/javascript">
      var setting = {
          check: {
             enable: true
          },
          data: {
             simpleData: {
                enable: true
             }
          }
      };

      var zNodes =[
          { id:1, pId:0, name:"can check 1",open:true},
          { id:11, pId:1, name:"can check 1-1", open:true},
          { id:111, pId:11, name:"can check 1-1-1"},
          { id:112, pId:11, name:"can check 1-1-2"},
          { id:12, pId:1, name:"can check 1-2", open:true},
          { id:121, pId:12, name:"can check 1-2-1"},
          { id:122, pId:12, name:"can check 1-2-2"},
          { id:2, pId:0, name:"can check 2", checked:true, open:true},
          { id:21, pId:2, name:"can check 2-1"},
          { id:22, pId:2, name:"can check 2-2", open:true},
          { id:221, pId:22, name:"can check 2-2-1", checked:true},
          { id:222, pId:22, name:"can check 2-2-2"},
          { id:23, pId:2, name:"can check 2-3"}
      ];

      function setCheck() {
          var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
          type = { "Y":'ps', "N":'ps'};
          zTree.setting.check.chkboxType = type;
      }
      
      $(document).ready(function(){
          $.fn.zTree.init($("#treeDemo"), setting, zNodes);
          setCheck();
      });
</script>

 上面仅仅是静态的树，效果如下图所示：

   

4.动态的生成树

<script type="text/javascript">
    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    
    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        type = { "Y":'ps', "N":'ps'};
        zTree.setting.check.chkboxType = type;
    }
    
    function playlist_bind(obj, playlistid, stores) {
        var tds = $(obj).parent().parent().find('td');
        $("small.font-bold").each(function () {
            $(this).html(tds.eq(2).text());
        });
        $("#binded_playlist").data("id",playlistid);
        $('#myModal5').modal('show');
    }

    $(function(){
        $.ajax({
            url: '/ajax/playlist/bind',
            type: 'post',
            data: {
                '_xsrf':$("input[name='_xsrf']").val(),
            },
            success: function (data) {
                var json = $.parseJSON(data);
                var val = Object.values(json);
                var zNodes =[]
                //var a = 1;
                var i = 0;
                for (var k in json){
                    var dict = {"id":k,"pId":0,"name":k,open:true}
                    zNodes.push(dict);
                    if (val[i].length!=0){
                        for (var j=0; j < val[i].length;j++){
                            var dict = {"id":val[i][j],"pId":k,"name":val[i][j]};
                            zNodes.push(dict);
                        }
                        //a=a+1;
                        i=i+1;
                        continue;
                    }
                    //a=a+1;
                    i=i+1;
                }
                $("#tree").data("id",zNodes);
                $(document).ready(function(){
                     $.fn.zTree.init($("#treeDemo"), setting, $("#tree").data("id"));
                     setCheck();
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
            }
        });
        // var zNodes = $("#tree").data("id")
        // console.log(zNodes)
    })
</script>

动态的树，效果如下图所示：生成门店名称以及门店下面的终端id

5.遍历选中的节点

<script>        
$(function () {        
    $('.btn.btn-white.bind_playlist').click(function () {
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
        // 获取选中的节点
        nodes=treeObj.getCheckedNodes(true),
        v="";
        arr1 = []
        // 获取选中节点的id
        for(var i=0;i<nodes.length;i++){
            v+=nodes[i].name + ",";//获取选中节点的name值
            alert(nodes[i].id);    //获取选中节点的id值
            arr1.push(nodes[i].id);
        }
        code = $("#tree").data("id");
        arr2 = [];
        // 获取所有节点的id
        for (var i in code){
            console.log(code[i].id);
            arr2.push(code[i].id);
        }
        // 获取没有选中节点的id
        arr3 = [];
        for(var x=0;x<arr2.length;x++){
            a = $.inArray(arr2[x], arr1);
            if (a==-1){
                arr3.push(arr2[x]);
            }
        }
        var json2 = {
            "_xsrf": $("input[name='_xsrf']").val(),
            'playlistid': $("#binded_playlist").data("id"),
            'bind':arr1,
            "unbind":arr3,
        };
        $.ajax({
            url: '/admin/playlist/bind',
            type: 'post',
            data: json2,
            success: function (data) {
                var jsons = jQuery.parseJSON(data);
                alert(jsons.msg);
                if (jsons.status == "ok") {
                    location.reload();
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
            }
        });
    });
});
</script>