zTree学习笔记之入门

ZTREE的官网例子和JS地址：http://code.google.com/p/jquerytree/。

     首先，要在JSP中引入js文件和css文件

    

Java代码 
  1. <script type="text/javascript" src="jquery.ztree-2.6.js"></script>  
  2. <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">  

 Js代码

    1. var zTree1;  
    2. var setting;  
    3. setting = {  
    4.             editable: false,  
    5.             checkable: false,  
    6.             showIcon : false,  
    7.             edit_renameBtn : false,  
    8.             edit_removeBtn : false,   
    9.               
    10.             callback: {  
    11.             //点击触发的方法  
    12.                 rightClick: zTreeOnRightClick,  
    13.                 mouseDown: zTreeOnMouseDown,  
    14.                 click: zTreeOnClick  
    15.             }  
    16.         };  
    17. 方法：  
    18. function zTreeOnRightClick(event, treeId, treeNode) {  
    19.             if (null == treeNode) {  
    20.                 return false;  
    21.             }  
    22.             var level = treeNode.level;  
    23.             clickedId =  treeNode.id;  
    24.             if (level == 0) {  
    25.                 zTree1.selectNode(treeNode);  
    26.                 showRMenu("root", event.clientX, event.clientY);  
    27.             } else if (level == 1) {  
    28.                 zTree1.selectNode(treeNode);  
    29.                 showRMenu("region", event.clientX, event.clientY);  
    30.             } else if (level == 2) {  
    31.                 zTree1.selectNode(treeNode);  
    32.                 showRMenu("point", event.clientX, event.clientY);  
    33.             } else if(level == 3) {  
    34.                 zTree1.selectNode(treeNode);  
    35.                 showRMenu("device", event.clientX, event.clientY);  
    36.             }  
    37.         }     
    38. 节点：  
    39.         var zNodes = [  
    40.             {id:000, name:"监控点列表", open:true,  
    41.                 nodes: ${strTree}  
    42. •   (json类型的数据格式是：id:””,nodes:[如果有和外边一样],name:””)  
    43. •   例子：  
    44. •   [{"id":"1",  
    45. •   "nodes":[   {"id":"1","nodes":[],"name":"mp1"},  
    46.    {"id":"2","nodes":[],"name":"mp2"},  
    47.    {"id":"3","nodes":[],"name":"mp3"}],  
    48. "name":"region1"},  
    49.   
    50. {"id":"2",  
    51. "nodes":[  {"id":"4","nodes":[],"name":"mp4"},  
    52. {"id":"5","nodes":[],"name":"mp5"}],  
    53. "name":"region2"},  
    54.             }                         
    55.         ];  
    56. zTree1 = $("#treeDemo").zTree(setting, zNodes);

　　

一、以下是ZTREE的一些常用的方法和方法返回值：

1、zTree.getNodes()      

 获取全部节点数据，不管是否采用简单数据模式（isSimpleData = true），都返回树形结构的 JSON 数据

Getnodes()的返回值形式代码  收藏代码
  1. [  
  2.     {"id":1, "name":"test1", "nodes":[  
  3.       {"id":11, "name":"test11", "nodes":[  
  4.         {"id":111, "name":"test111"}  
  5.       ]},  
  6.       {"id":12, "name":"test12"}  
  7.     ]},  
  8.     ......  
  9. ];  

 2、zTree. getNodeByParam(key, value) 

根据节点数据的属性精确搜索满足条件的的 JSON 数据对象,如果有多个同样属性值的节点，则只返回第一个找到的节点。

 3、zTree.getNodesByParam(key, value, parentNode)

获取某个节点下key=value的节点数据。

 4、zTree.getNodesByParamFuzzy(key, value[, parentNode])

根据节点数据的属性模糊搜索指定节点 parentNode 下面的子节点中key=value的 JSON 数据对象集合。当parentNode为空时，搜索全部节点。

 5、zTree.addNodes(parentNode, newNodes, isSilent)

参数：

parentNode： 指定的父节点，如果增加根节点，请设置 parentNode 为 null 即可。

newNodes  ： Array(JSON)类型，需要增加的节点数据 JSON 对象集合，支持将节点的n级子节点一次性增加，只需要符合zTree的节点数据结构即可。

isSilent       ： Boolean类型，设定增加节点后是否展开其父节点。isSilent = true 时，不展开父节点，其他值或缺省状态都自动展开。

 6、zTree.removeNode(treeNode)

删除某个节点。

 7、zTree.getSelectedNode()

获取 zTree 当前被选中的节点数据 JSON 对象。

 8、zTree.transformToArray(treeNodes)(这个方法我也不是很理解，感觉是将选定的节点转换成一个Array)

将 zTree 使用的标准格式转换为简单 Array 格式，便于将数据返回给后台

 9、zTree.selectNode(treeNode)

选中某个节点。

10、zTree.getNodeByTId(tID)

根据某个节点数据的 tId 属性获取该获取该节点的 JSON 数据对象

11、 zTree.moveNode(targetNode, treeNode, moveType)

将某节点移动到其他节点下

targetNode     ：指定移动到的目标节点 JSON 数据，如果移入根节点，请设置 targetNode 为 null 即可

treeNode        ：指定被移动的节点 JSON 数据

moveType       ：指定移动到目标节点的相对位置("inner"：成为子节点（默认值），"before"：成为同级前一个节点，"after"：成为同级后一个节点)

 二、setting的属性：

1、 expandSpeed 展开、折叠效果  'fast'(default)  、 'slow'、  ''三种，其中 '' 表示展开、折叠效果关

2、 setting1.isSimpleData = false;

       setting1.treeNodeKey = "id";

       setting1.treeNodeParentKey = "pId";

       isSimpleData = false时需要传json数据，=true时需要传array数据

 3、showLine    是否显示节点之间的连线。

 4、editable      是否允许节点移动。

 5、dragCopy   拖拽节点时进行复制。

 6、dragMove   拖拽节点时进行移动。

三、事件监控

 1、 beforeClick()

 2、 beforeDblclick()

 3、 beforeRightClick()

 4、 beforeMouseDown()

 5、 beforeMouseUp()

 6、 beforeChange()

 7、 beforeDrag()

 8、 confirmDragOpen()

 9、 beforeDrop()

 10、beforeRename()

 11、confirmRename()

 12、beforeRemove()

 13、beforeExpand()

 14、beforeCollapse()

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/qingqinglanlan/p/9335660.html