zTree 树形结构常用功能点

数据格式：

这里写图片描述
示例：

这里写图片描述

一、获取zTree中选中的节点

/**
 * 获取treeId中选中的节点Id和Name
 */

function onCheck(treeId){
    var treeObj=$.fn.zTree.getZTreeObj(treeId),
    nodes=treeObj.getCheckedNodes(true),
    v="";
    pid="";
    for(var i=0;i<nodes.length;i++){
        v+=nodes[i].text + ",";
        pid+=nodes[i].pid;
        console.log("节点id:"+nodes[i].id+", 节点名称："+v+", pid:"+pid); //获取选中节点的值
    }
}

js数组：https://www.cnblogs.com/qianjinyan/p/8921216.html

二、点击增加

/**
 * 批量-点击添加
 */

violationAllot.add = function() {
    // 获取已选道路台账列表 selectAllotList(全局变量)
    var treeObj = $.fn.zTree.getZTreeObj("waitTree");
    // 获取待选道路列表选中的节点的ID、pid、text;
    nodes = treeObj.getCheckedNodes(true);
    // 保存json中所有的ID
    var allId = getAllAllotId();
    var jsonChild = {};
    var json = {};
    var j = 0;
    // 调用js进行添加（单个、批量）; 
    for(var i = 0; i < nodes.length; i++){
        // 去重
        if(allId.indexOf(nodes[i].id) != -1 && nodes[i].pid != null) {continue;}
        if(nodes[i].pid == null) {// 父级节点
            json[nodes[i].id] = {
                    id: nodes[i].id,
                    pid: nodes[i].pid,
                    text: nodes[i].text,
                    children: new Array()
                };

        }else {// 如果是子节点
            jsonChild = {
                    id: nodes[i].id,
                    pid: nodes[i].pid,
                    text: nodes[i].text
            };
            json[nodes[i].pid]["children"].push(jsonChild);
        }
    }
    // json和selectAllotList 取并集
    // 默认父级没有
    var flagParent = false;
    // 默认子级没有
    var flagChild = false;
    var location = 0;
    var parentId = null;
    var count = 0;
    // selectAllotList > json 增加父级存在的节点
    for(var i = 0; i < selectAllotList.length; i++) {
        count = 0;
        parentId = selectAllotList[i].id;
        if(json[parentId] != null) {// 父级有
            if(json[parentId].children.length == 0) {continue;}
            location = i;
            flagParent = true;
        }else {// 父级没有则添加父级
            continue;
        }
        for(var j = 0; j < selectAllotList[i].children.length; j++) {
            if(selectAllotList[i].children[j].id == json[parentId].children[count].id) {// 子级有
                flagChild = true;
                break;
            }
        }
        if(!flagChild) {
            jsonChild = {
                    id: json[parentId].children[count].id,
                    pid: json[parentId].children[count].pid,
                    text: json[parentId].children[count++].text
            };
            selectAllotList[location].children.push(jsonChild);
        }
    }
    // json > selectAllotList 增加父级不存在的节点
    allId = getAllAllotId();
    for(var i in json) {
        // 增加父级节点
        if(allId.indexOf(json[i].id) == -1) {
            selectAllotList.push(json[i]);
        }
    }
    //返回更新已选台账列表
    selectedTreeObj = $.fn.zTree.init($("#selectTree"), setting, selectAllotList); 
    selectedTreeObj.expandAll(true);
}

三、点击删除

/**
 * 批量-点击删除
 */
violationAllot.deleteOne = function() {
    // 获取已选道路台账列表 selectAllotList(全局变量)
    // 获取选中的节点
    var treeObj=$.fn.zTree.getZTreeObj("selectTree");
    // 获取已选道路列表选中的节点的ID、pid、text
    nodes = treeObj.getCheckedNodes(true);
    // 从selectAllotList删除对应id的节点
    for(var i = 0; i < nodes.length; i++){
        selectAllotList = removeByValue(selectAllotList, nodes[i].id);
    }
    // 返回更新已选台账列表
    selectedTreeObj = $.fn.zTree.init($("#selectTree"), setting, selectAllotList); 
    selectedTreeObj.expandAll(true);
}
/**
 * 删除数组中id=val的节点
 */
function removeByValue(arr, val) {
  for(var i=0; i<arr.length; i++) {
      for(var j = 0; j < arr[i].children.length; j++) {
          if(arr[i].children[j].id == val){
              arr[i].children.splice(j, 1);
          }
      }
      if(arr[i].children.length == 0 ){
          arr.splice(i, 1);
      }
  }
  return arr;
}

四、点击增加所有

/**
 * 批量-添加所有未分配道路
 */
violationAllot.add_all = function() {
    selectAllotList = new Array();
    var ajax = new $ax(GlobalUtils.ctxPath + "/maintenance/allot/unassignedTreeData" , function (data) {
        if (GlobalUtils.isSuccess(data)) {
            allAllot = data.content;
            selectedTreeObj = $.fn.zTree.init($("#selectTree"), setting, allAllot); 
            // 展开所有
            selectedTreeObj.expandAll(true);
            selectAllotList = allAllot;
        }
    }, function (data) {
    });
    ajax.start();
}

五、点击删除所有

/**
 * 批量-删除所有
 */
violationAllot.delete_all = function() {
    selectAllotList = new Array();
    $.fn.zTree.init($("#selectTree"), setting, null); 
}

六、zTree常用功能

6.1 初始化设置

    var setting = {
            view: {
                showIcon: false,  //隐藏icon
                dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
                showLine: true,//是否显示节点之间的连线
                fontCss:{'color': '#33445D', 'font-family': 'Microsoft YaHei UI'},//字体样式函数
                selectedMulti: true //设置是否允许同时选中多个节点
            },
            data: {
                key: {
                    name: 'text',
                    checked: 'checked',
                    open: 'state'
                },
                simpleData: {
                    enable: true,
                    idKey: 'id',
                    pIdKey: 'pid'
                }
            },
            check : {
                 enable: true,// 显示多选框
                     autoCheckTrigger: false,
                    chkboxType: { "Y": "ps", "N": "ps" }   
            }  
    };

6.2 初始化

    var ajax = new $ax(GlobalUtils.ctxPath + "/maintenance/allot/treeData" , function (data) {
        if (GlobalUtils.isSuccess(data)) {
            allAllot = data.content;
            zTreeObj= $.fn.zTree.init($("#waitTree"), setting, data.content); 
            // 展开所有
            zTreeObj.expandAll(true);
            var node = null;
            var childrenLength = null;
            var child = null;
            for(var i = 0; i < data.content.length; i++) {
                if(data.content[i].checked == 'checked') { // 如果父节点为选中
                    node = zTreeObj.getNodeByParam("id", data.content[i].id);
                    // node.chkDisabled = true;
                    childrenLength = data.content[i].children.length;
                    for(var j = 0; j < childrenLength; j++) {// 如果子节点为选中
                        child = data.content[i].children[j];
                        if(child.checked == 'checked'){
                            node = zTreeObj.getNodeByParam("id", child.id);
                            zTreeObj.setChkDisabled(node, true);   
                        }
                    }
                }
            }
        }
    }, function (data) {
    });
    ajax.start();

6.3 展开所有

zTreeObj.expandAll(true);

6.4 禁用节点操作

zTreeObj.setChkDisabled(node, true);

6.5 根据节点属性值获取节点

node = zTreeObj.getNodeByParam("id", data.content[i].id);

6.6 设置父节点、子节点级联

setting.check : {
                 enable: true,// 显示多选框
                     autoCheckTrigger: false,
                    chkboxType: { "Y": "ps", "N": "ps" }   
            }

6.7 设置后台数据对应

用于后台封装的对象属性值与默认的zTree属性值不一致的情况。

setting. data: {
                key: {
                    name: 'text',
                    checked: 'checked',
                    open: 'state'
                },
                simpleData: {
                    enable: true,
                    idKey: 'id',
                    pIdKey: 'pid'
                }
            },

6.8 设置zTree字体样式

setting.view: {
                showIcon: false,  //隐藏icon
                dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
                showLine: true,//是否显示节点之间的连线
                fontCss:{'color': '#33445D', 'font-family': 'Microsoft YaHei UI'},//字体样式函数
                selectedMulti: true //设置是否允许同时选中多个节点
            },

6.9 设置节点为选中

zTree.selectNode(node, true);

6.10 默认选中第一行

    // 结果列表初始化
    var defaultColunms = ViolationEntry.initColumn();
    _this.table = new BSTable(ViolationEntry.id, "/violation/list", defaultColunms,
        {
            pageSize:_this.pageSize,
            onLoadSuccess: function (data) {
                if(data.rows.length > 0){
                    // 默认选中第一行
                    changeImgMovie(data.rows[0].violationXh);
                }
                _this.total_until = _this.table.getTotal();
                _this.page_num = _this.table.getPageNumber();
                _this.total_page = _this.table.getTotalPage();
                _this.order_filed = _this.table.getOrderField();
                _this.sort_order = _this.table.getSortOrder();
            }
        });
    _this.table.setPaginationType("server");
    _this.table.setQueryParams(ViolationEntry.param());
    _this.table.init();

参考链接：

api文档：http://www.treejs.cn/v3/api.php

http://www.jq22.com/jquery-info15563

https://www.cnblogs.com/linevers/p/4603155.html

实例：https://blog.csdn.net/qq_21856521/article/details/70246180

增删改查：https://blog.csdn.net/proeny/article/details/78766882

增删改查-详细：https://blog.csdn.net/wh_xmy/article/details/79761341

api文档1：http://www.treejs.cn/v3/api.php

api文档2：http://www.jq22.com/yanshi941

https://www.cnblogs.com/jiangyy/p/3791491.html

https://zhidao.baidu.com/question/509424175.html

https://blog.csdn.net/java2ee_android/article/details/78982638