尊重作者,附原文链接:http://my.oschina.net/u/2472104/blog/529055

Ztree的api http://www.ztree.me/v3/api.php

Ztree的网上demo http://www.ztree.me/v3/demo.php#_102

Ztree的本地demo http://yunpan.cn/cLUREC8yghHRs  访问密码 9440

一、添加样式、js

  <link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_v3/css/demo.css" type="text/css">

<link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.core-3.5.js"></script>

<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.excheck-3.5.js">

</script> <script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>

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

<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.exhide-3.5.js"></script>

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

<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script>

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

  <div class="treecontentpane">

    <ul id="busTree" class="ztree">

</ul>

</div>

三、写js操作数据

1、setting配置详情

var setting = {

    //显示

    view: {

             selectedMulti: false, //在复制的时候,是否允许选中多个节点。true为支持,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 <contents.length;i++){

       //是否是叶子节点

        var isParent = contents[i].isParent;

        if(isParent == false){

         isParent = true;

        }else{

         isParent = false;

        }

        contents[i].isParent = isParent;

       }

      }

      return contents;

     };

    //节点异步加载完成后显示形状

   //加载树的默认显示根节点,以及一级节点,每次异步加载数据都会执行这个方法,也就是有请求都会异步

    function zTreeOnAsyncSuccess(event, treeId, msg) {

      try {

      var treeObj = $.fn.zTree.getZTreeObj("busTree");

       //获取所有节点

       var nodes = treeObj .getNodes();

       for(var i = 0;i<nodes.length;i++){

       //展开一级节点

        treeObj .expandNode(nodes[i], true);

       }

      } catch (err) {

       holly.showError("数据异常", err);

      }

    }

    //设置一个标识,是为了解决点击的时候,执行异步。显示所有的以及节点,以及一级节点下的所有节点

   注意:如果你是异步只加载了根节点和一级节点,那么增删改的时候,得到的异步结果,会获取不到该节点的子节点,只有zTreeOnAsyncSuccess方法执行完后,才能够取到子节点的信息。所以在Eclipse中run执行和debugger执行得到不同的结果。因为run运行数据还没接受到。

    /* var firstAsyncSuccessFlag = 0;

    function zTreeOnAsyncSuccess(event, treeId, msg) {

     if (firstAsyncSuccessFlag == 0 ) {

      try {

      var treeObj = $.fn.zTree.getZTreeObj("busTree");

       var selectedNode = zTree.getSelectedNodes();

      //获取整个json节点

       var nodes = zTree.getNodes();

       //展开根节点下的第一个节点

      treeObj.expandNode(nodes[0], true);

       //把根节点下的所有节点转换为数组

       var childNodes = zTree.transformToArray(nodes[0]);

       //展开根节点下的第一个节点的第一节节点

       treeObj .expandNode(childNodes[1], true);

       //选中根节点下的第一个节点

       treeObj .selectNode(childNodes[1]);

      firstAsyncSuccessFlag = 1;

      } catch (err) {

       holly.showError("数据异常", err);

      }

     }

    }*/

   //初始化树

   zTree = $.fn.zTree.init($("#busTree"), setting);

   //获取树

   var treeObj = $.fn.zTree.getZTreeObj("busTree");

   //异步刷新整个树,不推荐使用

   treeObj.reAsyncChildNodes(null, "refresh");

   //新增的时候局部刷新,刷新子节点

   treeObj.reAsyncChildNodes(zTree.getSelectedNodes().childNodes,"refresh");

   //修改的节点的时候,更改节点信息

   //1、设置节点值

   treeObj.getSelectedNodes()[0].codeName = $("#treeRootCodeName").val();

   treeObj.getSelectedNodes()[0].codeValue = $("#treeRootCodeValue").val();

   treeObj.SelectedNodes()[0].remark = $("#treeRootRemark").val();

   //2、更新节点信息

   treeObj.updateNode(zTree.getSelectedNodes()[0]);

    //搜索功能:

    1、根据查询的结果,显示对应树形结构。注意这里只能是对应查找几级节点的信息,还有待优化。

    //根据code_name模糊查询

    function searchByValue(){

        var zTree = $.fn.zTree.getZTreeObj("treeDemo");

        //经过transformToArray转换后是一个Array数组,数组里的每个元素都是object对象,这个对象里包含了node的21个属性。

        var nodes = zTree.transformToArray(zTree.getNodes()[0].children);

        var key=$("#codeName").val();

        //空格回车符 不做查询 直接显示全部

        if(/^\s*$/.test(key)){

         //updateNodes(false);

         zTree.showNodes(nodes);

         return;

        }

        //首先隐藏

        zTree.hideNodes(nodes);

        var nodeList=zTree.getNodesByParamFuzzy("CODE_NAME", key); //模糊匹配

        //把得到的节点放到filterNodes临时数组中

        var filterNodes=[];

        for(var i=0;i<nodeList.length;i++){

            //这里只能是级别是2的

             if(nodeList[i].level==2) {

                filterNodes.push(nodeList[i]);

             }

        }

        //显示

        zTree.showNodes(filterNodes);

        //取得每一个节点的父节点,进行展示

        for(var i=0;i<filterNodes.length;i++){

             //主要是找不到父节点的问题

               var parentNode = filterNodes[i].getParentNode();

            //展开当前节点的父节点下的所有节点

             zTree.expandNode(parentNode, true, false, false);

             //显示所有父节点

             zTree.showNode(parentNode);         

         }

    }

    2、搜索变色功能,但是会显示全部信息,查询到的结果会显示不同的颜色

    //展开所有节点

    function expand_ztree(treeId){

        var treeObj = $.fn.zTree.getZTreeObj(treeId);

        treeObj.expandAll(true);

    }

    //节点没有父节点,展开,有父节点隐藏

    function close_ztree(treeId){

        var treeObj = $.fn.zTree.getZTreeObj(treeId);

        var nodes = treeObj.transformToArray(treeObj.getNodes());

        var nodeLength = nodes.length;

        for (var i = 0; i < nodeLength; i++) {

            if (nodes[i].PARENT_ID == null) {

                //根节点:展开

                treeObj.expandNode(nodes[i], true, true, false);

            } else {

                //非根节点:收起

                treeObj.expandNode(nodes[i], false, true, false);

            }

        }

    }

    //查询的onclick时间

    function searchByValue(){

         searchByFlag_ztree("treeDemo","codeName");

    }

    //得到查询结果,并进行设置样式和展开

    function searchByFlag_ztree(treeId, searchConditionId){

        //<1>.搜索条件

        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 = "<span class='button add' id='addBtn_" + treeNode.tId

       + "' title='新增节点' onfocus='this.blur();'></span>";

      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

 <div id="configure-tree-menu" class="easyui-menu" style="width:150px;">

  <div id="configureAdd"  data-options="iconCls:'icon-add'">新增节点</div>

  <div id="configureEdit"  data-options="iconCls:'icon-edit'">编辑节点</div>

  <div id="configureDelete" data-options="iconCls:'icon-remove'">删除节点</div>

</div>

  

  

Jquery结合Ztree生成树的更多相关文章

  1. ztreeDeptSelect 基于jquery和ztree的部门选择插件

    插件介绍 首先我们来看插件的功能演示(效果): 插件准备好后.前台只需编写html: <input type="text" class="deptName" ...

  2. Jquery插件Ztree使用所遇问题

    问题1.$.fn.zTree为空或为Undefined 我在MVC中引用Jquery插件Ztree的JS并不存任何问题,而当我将Ztree的js引入项目中,就出现$.fn.zTree为空或为Undef ...

  3. jQuery的zTree插件

    写在前面 jQuery的 zTree插件 关键代码 <%@ page language="java" contentType="text/html; charset ...

  4. 项目中jquery插件ztree使用记录

    最近公司要求做一个关于后台的管理系统.在这个mvvm模式横行的年代,虽然这里用jquery做项目可能有点不符合时代的潮流,但是管他呢,能做出来先在说呗(公司以后要改用angular或者vue来统一前端 ...

  5. jQuery插件--zTree中点击节点实现页面跳转时弹出两个页面的问题

    这是第一次使用zTree,所以在使用之前我要先写一个demo来学习一下.我们要注意的是,zTree是一个jQuery插件,所以我们在导入zTree的js文件之前要先导入jQuery的js文件. 我们先 ...

  6. 无限树Jquery插件zTree的使用方法

    其实Ztree官网已经有详细的API文档,一切以官网上的说明为准,我在此只是结合实践总结几条常用的ztree的功能特性. (ztree的语法结构是基于key-value的形式配置) 1:支持异步加载数 ...

  7. jQuery Ztree基本用法

    1.首先在页面上有<ul/>标签 <ul id="tree" class="ztree"></ul> 2.定义ztree的配 ...

  8. jq生成目录文件树jQuery Ztree基本用法

    转自:http://www.cnblogs.com/linjiqin/p/4547452.html 1.首先在页面上有<ul/>标签 ? 1 <ul id="tree&qu ...

  9. jQuery树结构插件推荐zTree

    JQuery zTree 下载地址http://plugins.jquery.com/zTree.v3/

随机推荐

  1. 开始记录blog

    将自己的总结.新的记录下来,形成习惯,为以后的温故知新

  2. C# 和 Unix 时间戳转换

    unix时间戳是从1970年1月1日(UTC/GMT的午夜)开始所经过的秒数,不考虑闰秒. /// 时间戳转为C#格式时间 private DateTime GetTime(string timeSt ...

  3. 关于SQL表联接

    以SQL2008为例,Microsoft SQL Server 2008支持四种表运算符-JOIN,APPLY,PIVOT,UNPIVOT.JOIN表运算符是ANSI标准,而其他三种是T-SQL对标准 ...

  4. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  5. php final static const成员属性用法

    http://www.111cn.net/phper/php/38976.htm 首先来说说final 1.final不能用来修饰成员属性 2.final只能修饰类和方法 作用:被修饰的类不能被子类所 ...

  6. Oozie和Azkaban的技术选型和对比

    1 两种调度工具功能对比图 下面的表格对上述2种hadoop工作流调度器的关键特性进行了比较,尽管这些工作流调度器能够解决的需求场景基本一致,但在设计理念,目标用户,应用场景等方面还是存在区别 特性 ...

  7. 电商、商城类APP常用标签"hot"--第三方开源--LabelView

    LabelView是在github上一个开源的标签库.其项目主页是:https://github.com/linger1216//labelview LabelView为一个TextView,Imag ...

  8. PowerShell 方式部署Sharepoint Solution

    覆盖 Uninstall-SPSolution –Identity Caesarstone.GlobalSite.WebSite.wsp –WebApplication http://myserver ...

  9. 4.0 流量控制preference

    从Android4.0以后,系统设置应用程序允许用户查看他们的应用在前台和后台使用了多少网络数据.用户可以禁用每 个应用在后台使用网络数据.为了避免用户禁用你的应用在后台访问网络,你应该更效率的使用网 ...

  10. 使用 Attribute +反射 来对两个类之间动态赋值

    看同事使用的 一个ORM 框架 中 有这样一个功能  通过特性(附加属性)的功能来 实现的两个类对象之间动态赋值的 功能 觉得这个功能不错,但是同事使用的 ORM 并不是我使用的  Dapper  所 ...