超级详细的Ztree详解

超级详细的Ztree详解

1、添加样式、js






如果想要hideNodes、showNodes等方法，必须加入

如果不需要那些hideNodes、showNodes等方法以只添加一个js，代替上面的三个js


2、html设置一个div、ul，注意ul的class是固定的ztree


     

     


3、写js操作数据

 1、setting配置详情
var setting = {
    //显示
    view: {
             selectedMulti: false, //在复制的时候，是否允许选中多个节点。true为支持，按下ctrl键生效，false不支持。
            dblClickExpand: false, //双击的时候是否切换展开状态。true为切换，false不切换
             fontCss: setFontCss_ztree  //设置节点的颜色
     },
    //增删改，移动复制
    edit: {
     enable: true, //如果enable为flase，那么树就不能移动了
     showRemoveBtn: true, //是否显示树的删除按钮
     showRenameBtn: true, //是否显示数的重命名按钮
     isSimpleData : true, //数据是否采用简单 Array 格式，默认false
     treeNodeKey : "id",  //在isSimpleData格式下，当前节点id属性
     treeNodeParentKey : "parentId",//在isSimpleData格式下，当前节点的父节点id属性
     showLine : true, //是否显示节点间的连线
     removeTitle: "删除节点",//删除Logo的提示
     renameTitle: "编辑节点",//修改Logo的提示
     //拖拽
     drag: {
      isCopy: true,//能够复制
      isMove: true,//能够移动
     prev: false,//不能拖拽到节点前
      next: false,//不能拖拽到节点后
      inner: true//只能拖拽到节点中
     }
    },
    //异步
    async: {
     enable: true, //开启异步加载
     type:"get",
     url:holly.getPath() + "/rest/treeCode/showZtreeSyncRest",
     contentType:"application/json",
     autoParam: ["id"], //异步加载数据，自动添加id参数，会自动获取当前节点的id值
     dataFilter:filter, //过滤，跟easy-ui中的loadFilter方法一样。
    otherParam: { "id":"1", "code_name":"固网测试"}//提交的时候就会提交参数id=1&code_name=固网测试
    },
    data:{
     key:{
      name:"codeName" //节点显示的值
     },
     //
     simpleData:{
      enable:true,//如果为true，可以直接把从数据库中得到的List集合自动转换为Array格式。而不必转换为json传递
      idKey:"id",//节点的id
      pIdKey:"parentId",//节点的父节点id
      rootPId:null
     }
    },
    //回调函数
    callback: {
     beforeDrag: beforeDrag,//拖拽之前
     beforeDrop: beforeDrop,//拖拽结束
     onDrop: zTreeOnDrop,//拖拽结束后
     //onDrag: zTreeOnDrag,//拖拽的时候
     beforeRemove: zTreeBeforeRemove,//删除节点前
     onRemove: zTreeOnRemove,//节点删除之后
     beforeEditName: zTreeBeforeEditName,//进行编辑之前
     //beforeRename: zTreeBeforeRename,//重命名节点之前
     //onRename: zTreeOnRename,//重命名之后
     onClick: zTreeOnClick,//点击
     onRightClick: zTreeOnRightClick,//右键
     onAsyncSuccess: zTreeOnAsyncSuccess//异步加载
     //beforeExpand: beforeExpand,//展开节点前
     //onAsyncSuccess: onAsyncSuccess,//异步数据加载成功的回调
    //onAsyncError: onAsyncError //异步数据加载错误后回调
    }
   };
2、zTree回调方法
  //对得到的json数据进行过滤，加载树的时候执行
   function filter(treeId, parentNode, responseData) {
      var contents = (responseData.content)?responseData.content:responseData;
      //当第一次加载的时候只显示一级节点，但是要让别人知道对应一级节点下是否有数据，那么就需要设置isParent,为true可以展开，下面有数据。
    //我这里是由于异步加载数据，只加载根节点以及一级节点。那么一级节点下还有子节点，所以设置isParent显示还有子节点的效果
      if(contents.length >0){
       for(var i= 0 ; i .搜索条件
        var searchCondition = $('#' + searchConditionId).val();
        //<2>.得到模糊匹配搜索条件的节点数组集合
        var highlightNodes = new Array();
        if (searchCondition != "") {
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            //模糊查询
            highlightNodes = treeObj.getNodesByParamFuzzy("CODE_NAME", searchCondition, null);
        }
        //<3>.高亮显示并展示【指定节点】
        highlightAndExpand_ztree(treeId, highlightNodes);
    }
    //展开，并显示不同颜色
    function highlightAndExpand_ztree(treeId, highlightNodes){
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        //<1>. 先把全部节点更新为普通样式
        var treeNodes = treeObj.transformToArray(treeObj.getNodes());
        var nodes = treeObj.transformToArray(treeObj.getNodes()[0].children);
        for (var i = 0; i < treeNodes.length; i++) {
            treeNodes[i].highlight = false;
            treeObj.updateNode(treeNodes[i]);
        }
        //<2>.收起树, 只展开根节点下的一级节点
        close_ztree(treeId);
        //<3>.把指定节点的样式更新为高亮显示，并展开
        if (highlightNodes != null) {
            for (var i = 0; i < highlightNodes.length; i++) {
                  //高亮显示节点，并展开
                  highlightNodes[i].highlight = true;
                  treeObj.updateNode(highlightNodes[i]);
                  //高亮显示节点的父节点的父节点....直到根节点，并展示
                  var parentNode = highlightNodes[i].getParentNode();
                  var parentNodes = getParentNodes_ztree(treeId, parentNode);
                  //展开
                  treeObj.expandNode(parentNodes, true, false, true);
                  treeObj.expandNode(parentNode, true, false, true);
                  //设置颜色
                  setFontCss_ztree("",highlightNodes[i]);
            }
        }
    }
    //递归查找父节点
    function getParentNodes_ztree(treeId, node){
        if (node != null) {
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            var parentNode = node.getParentNode();
            return getParentNodes_ztree(treeId, parentNode);
        } else {
            return node;
        }
    }
    //设置颜色
    function setFontCss_ztree(treeId, treeNode) {
        if (treeNode.PARENT_ID == null) {
            //根节点
            return {color:"#333", "font-weight":"bold"};
        } else if (treeNode.isParent == false){
            //叶子节点
            return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"};
        } else {
            //父节点
            return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
        }
    }
    //点击的时候判断节点有没有数据，以便于datadrid是否请求后台刷新
    if(treeNodes.isParent){
        datagrid刷新
    }else{
        提示
    }
  //获取过滤之外的所有数据
  var filterNodes = treeObj.getNodesByFilter(filters);
  function filters(node) {
        return (node.highlight == true);
   }
  //获取过滤的所有数据
  treeObj.getNodesByParamFuzzy("CODE_NAME", searchCondition, null);
  //当焦点放在节点上显示新增Logo
  function addHoverDom(treeId, treeNode) {
      var sObj = $("#" + treeNode.tId + "_span");
      if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
      var addStr = "";
      sObj.after(addStr);
      var btn = $("#addBtn_"+treeNode.tId);
      if (btn) btn.bind("click", function(){
      //弹出easy-ui新增对话框
      treeBusinessManager.newTreeDialog();
       return false;
      });
  };
 //当鼠标不在节点的时候，自动隐藏新增按钮
  function removeHoverDom(treeId, treeNode) {
      $("#addBtn_"+treeNode.tId).unbind().remove();
  };
  //获取某个节点下的所有节点
 //需求：当只能在叶子节点上添加数据的时候，但是展现的时候，需要如果点击叶子节点显示叶子节点的数据，点击节点显示该节点下的所有叶子节点的信息。
 //注意：这里数据用，区分id，是为了去后台进行in查询
  function getAllChildNodes(treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj("sheetTree");//获取ztree
        var childNodes = treeObj.transformToArray(treeNode);//把该节点的下的所有数据转换为数组
        var nodes = new Array();
        var j = 0;
        for(i = 0; i < childNodes.length; i++) {
          //只有保存叶子节点的数据
           if(!childNodes[i].isParent){
                     nodes[j] = childNodes[i].id;
                     //nodes.join(",");
                     j++;
           }
        }
        return nodes;
  }
  //获取该节点下的所有子节点
  getChildNodes:function(treeNode,result){
        if (treeNode.isParent) {
          var childrenNodes = treeNode.children;
          if (childrenNodes) {
              for (var i = 0; i < childrenNodes.length; i++) {
                  result += ',' + childrenNodes[i].id;
                  result = sheetShareManager.getChildNodes(childrenNodes[i], result);
              }
          }
      }
      return result;
  }
 //刷新节点
    function refreshNode(id) {
     var treeObj = $.fn.zTree.getZTreeObj("busTree");
        var node = treeObj.getNodeByParam("id", id, null);
        if (node) {
         treeObj.reAsyncChildNodes(node, "refresh");
        } else {
            setTimeout(function() {
                refreshNode(id);
            }, 10);
        }
    }
    //刷新父节点
    function refreshParentNode(id) {
     var treeObj = $.fn.zTree.getZTreeObj("busTree");
        var node = treeObj.getNodeByParam("id", id, null);
        var pNode = node.getParentNode();
        if (pNode) {
            refreshNode(pNode.id);
        } else {
            refreshNode("0");
        }
    }
//删除根节点的时候，销毁整棵树
$.fn.zTree.destroy("busTree");

//修改节点名，判断是否为空，或者超出限制
function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
    if (newName.length>10||newName.trim().length<=0) {
        toastr.error("填写信息不符合规则!");
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        treeObj.cancelEditName();
        return false;
    }
    return true;
}
function zTreeOnRename(event, treeId, treeNodes, isCancel) {
    //真正触发的时候为undefiend。触发不成功的时候，为true
    if(isCancel == undefined){
        //修改操作
    }
}

 //右键显示新增，修改，删除（与easy-ui整体类似）
 //右键，填出编辑框
 function zTreeOnRightClick(event, treeId, treeNode) {
  var treeObj = $.fn.zTree.getZTreeObj("busTree");
  //设置选中右键节点
  treeObj.selectNode(treeNode);
  //这里可以为为div添加click事件，进行新增，修改，删除操作。
  注意：设置选中节点，才能去对应的操作方法中获取选中的几点
  （var treeObj = $.fn.zTree.getZTreeObj("busTree");
     var nodes = treeObj.getSelectedNodes();）
   $('#configure-tree-menu').menu('show',{left: event.pageX,top: event.pageY});
 };

 //删除节点的时候需要注意
 //由于数据是异步加载的，所以不仅需要进行数据删除，还需要进行逻辑删除。否则数据没有及时的回显，那么树的状态isParent还没改变。
  for (var i=0, l=nodes.length; i < l; i++) {
     treeObj.removeNode(nodes[i]);
  }
 //在onBeforeRemove中操作，异步的判断
 //在数据操作成功之后
   var treeObj = $.fn.zTree.getZTreeObj("busTree");
    treeObj.selectNode(treeNode);
    var nodes = treeObj.getSelectedNodes();
    for (var i=0, l=nodes.length; i < l; i++) {
        treeObj.removeNode(nodes[i]);//默认是false，如果设置为true,那么就会触发onRemove函数
    }

 //html中的menu
 

  
新增节点
  
编辑节点
  
删除节点