ztree初体验

标签（空格分隔）： js

zTree是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件。整个zTree的页面显示核心。

1，引入zTreeStyle.css和jquery.ztree.core.min.js以及jquery.ztree.excheck.min.js
2，准备好dom元素，也就是用于显示ztree的容器
<ul id="detCaseMeansTree" class="ztree list-auto"></ul>
3，在js中设置setting值
4，给zNodes赋值,zNodes就是用于填充Setting中定义的树的数据源
5，初始化树$.fn.zTree.init($("#" + treeId), setting2, zNodes2);

具体demo

  var crimeMeansData = [];
  var msgCaseMeans = "";
  var arrCaseMeans = [];

  function getCrimeMeansData(treeId) {
    var setting1 = {
      view: {
        showIcon: false, //是否显示文件夹图标
        showLine: false //是否显示连接线
      },
      check: {
        enable: true,
        chkboxType: {
          "Y": "p",
          "N": "s"
        } //Y:勾选（参数：p:影响父节点），N：不勾（参数s：影响子节点）[p 和 s 为参数]
      },
      data: {
        simpleData: {
          enable: true
        }
      },
      callback: {
        beforeCheck: true,
        onCheck: getCheckedAll,
      }
    };
    var zNodes1 = [];
    crimeMeansData = crimeMeans.para;
    getFormatData(crimeMeansData, zNodes1);//处理数据
    $.fn.zTree.init($("#" + treeId), setting1, zNodes1);
  }
  function getCheckedAll(event, treeId, treeNode) {
    var treeObj = $.fn.zTree.getZTreeObj(treeId); //detCaseMeansTree
    var nodes = treeObj.getCheckedNodes(true);
    var caseMeansArr = [];
    msgCaseMeans = "";
    arrCaseMeans = [];
    for (var i = 0; i < nodes.length; i++) {
      caseMeansArr.push(nodes[i].name);
    }
    if (caseMeansArr) {
      for (var item in caseMeansArr) {
        var caseMeansItem = caseMeansArr[item].split("|");
        msgCaseMeans += caseMeansItem[1] + " ";
        arrCaseMeans.push(caseMeansItem[0]);

      }

    }
  }


function getFormatData(data, zNodes) {
    for (var i = 0; i < data.length; i++) {
      var twoTier = data[i].childs;
      var temp1 = {
        "name": data[i].code + '|' + data[i].name,
        "id": data[i].id,
        "pId": data[i].parentId,
        "isParent": true,
          "open": false//默认是否打开树
      };
      zNodes.push(temp1);
      for (var j = 0; j < twoTier.length; j++) {
        var threeTier = twoTier[j].childs;
        var temp2 = {
          "name": twoTier[j].code + '|' + twoTier[j].name,
          "id": twoTier[j].id,
          "pId": twoTier[j].parentId,
          "isParent": true,

        };
        zNodes.push(temp2);

        for (var m = 0; m < threeTier.length; m++) {
          var temp3 = {
            "name": threeTier[m].code + '|' + threeTier[m].name,
            "id": threeTier[m].id,
            "pId": threeTier[m].parentId,
            "isParent": false,

          };
          zNodes.push(temp3);


        }


      }

    }
  }

用的时候直接调用getCrimeMeansData(treeId)就可以了。其中treeId 就是本例子中的detCaseMeansTree

效果图

tool.png