当前位置:   article > 正文

zTree异步加载数据,默认展开全部节点_ztree默认展开所有节点

ztree默认展开所有节点


异步加载Tree 想要默认展开全部节点,使用普通的方法是不行的。

例如:

  1. $(document).ready(function(){
  2. $.fn.zTree.init($("#areaTree2"), setting3, zNodes3);
  3. var treeObj = $.fn.zTree.getZTreeObj("areaTree2"); //得到该tree
  4. var node = treeObj.getNodeByTId("areaTree2_1"); //选中第一个节点
  5. treeObj.expandNode(node, true, false, true); //打开节点 ,第一个参数表示哪个节点,第二个参数表示展开还是关闭,第三个参数表示 是否打开全部子孙节点
  6. });

这样使用 expandNode 方法是不能展开异步加载的数据的。


官方demo 中 有一个 异步展开全部节点的 页面 在  \zTree-zTree_v3-2ffc0fa\demo\cn\super\asyncForAll.html 这个页面 


但是他给定的方法不一定适合自己  ,所以我做了一些优化,删除了对自己显示数据没用的方法。

  1. <input type="button" value="为该角色添加功能" οnclick="addFunction()">
  2. <ul id="areaTree4" class="ztree"></ul>
  3. </div>
  4. <script type="text/javascript">
  5. var setting2 = {
  6. check: {
  7. enable: true
  8. },
  9. async: { //异步
  10. enable: true,
  11. url: getUrl
  12. },
  13. data: {//数据
  14. key: {
  15. name: "functionName" //name
  16. },
  17. simpleData: {
  18. enable: true,
  19. idKey: "functionId", //id
  20. pIdKey: "pid" //pid
  21. }
  22. },
  23. callback: { //回调函数,实现展开功能
  24. beforeAsync: beforeAsync,
  25. onAsyncSuccess: onAsyncSuccess,
  26. onAsyncError: onAsyncError
  27. }
  28. }
  29. function getUrl(treeId, treeNode){ //默认注入两个参数,第一个是当前树的名字,第二个是选中的节点
  30. return "/roleProject/FunctionServlet?dir=getFunctionTree&functionId="+treeNode.functionId+"&roleNo="+key;
  31. }
  32. function filter(treeId, parentNode, childNodes) {
  33. if (!childNodes) return null;
  34. for (var i=0, l=childNodes.length; i<l; i++) {
  35. childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
  36. }
  37. return childNodes;
  38. }
  39. function beforeAsync() {
  40. curAsyncCount++;
  41. }
  42. function onAsyncSuccess(event, treeId, treeNode, msg) {
  43. curAsyncCount--;
  44. if (curStatus == "expand") {
  45. expandNodes(treeNode.children);
  46. } else if (curStatus == "async") {
  47. asyncNodes(treeNode.children);
  48. }
  49. if (curAsyncCount <= 0) {
  50. if (curStatus != "init" && curStatus != "") {
  51. asyncForAll = true;
  52. }
  53. curStatus = "";
  54. }
  55. }
  56. function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
  57. curAsyncCount--;
  58. if (curAsyncCount <= 0) {
  59. curStatus = "";
  60. if (treeNode!=null) asyncForAll = true;
  61. }
  62. }
  63. var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
  64. goAsync = false;
  65. function expandAll() {
  66. var zTree = $.fn.zTree.getZTreeObj("areaTree4");
  67. if (asyncForAll) {
  68. zTree.expandAll(true);
  69. } else {
  70. expandNodes(zTree.getNodes());
  71. if (!goAsync) {
  72. curStatus = "";
  73. }
  74. }
  75. }
  76. function expandNodes(nodes) {
  77. if (!nodes) return;
  78. curStatus = "expand";
  79. var zTree = $.fn.zTree.getZTreeObj("areaTree4");
  80. for (var i=0, l=nodes.length; i<l; i++) {
  81. zTree.expandNode(nodes[i], true, false, false);
  82. if (nodes[i].isParent && nodes[i].zAsync) {
  83. expandNodes(nodes[i].children);
  84. } else {
  85. goAsync = true;
  86. }
  87. }
  88. }
  89. var zNodes2=[{functionId:0,functionName:"功能",pid:-1,isParent:true,checked:true}];
  90. $(document).ready(function(){
  91. $.fn.zTree.init($("#areaTree4"), setting2, zNodes2);
  92. expandAll(); //调用写好的展开全部节点方法
  93. });
这段代码 有很高的复用性,只需要传过来的Json对象 正确,使用zTree 完全不需要做改动,即可使用,只要将你自己的属性字段修改就可以了。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/在线问答5/article/detail/934183
推荐阅读
相关标签
  

闽ICP备14008679号