bootstrap treeview lazyload懒加载实践

hotqin888

发布于 2022-05-07 14:26:00

9100

发布于 2022-05-07 14:26:00

文章被收录于专栏：hotqin888的专栏hotqin888的专栏

用这里的：https://github.com/patternfly/patternfly-bootstrap-treeview

翻译：https://my.oschina.net/u/3242594/blog/886961

可以先看我的前一篇文章

bootstrap treeview 增删改的正确姿势

https://cloud.tencent.com/developer/article/1334406

树状目录的懒加载就是第一次只加载第一层，然后当用户点击加号的时候，再从后端取得数据，添加到这个节点下面。优点是对于大量的树状目录数据，不需要一次性查询到下级节点目录，速度快，体验好，缺点是，如果树状目录带了成果数量的信息（tags），它还是要递归到所有的子节点才能获取成果数量，效率没有提高多少。

它的issue里有这个例子：

https://github.com/patternfly/patternfly-bootstrap-treeview/issues/69

https://jsfiddle.net/theezz/tqadhy4v/15/

$(function () {
  var data = 
  [
    {
      text: "系统设置",
      href: "#node-1",
      selectable: true,
      id: '00',
      selectable: false,
      tags: ['available'],
      nodes: 
      [
        { 
          text: "目录设置",
          id: '01',
          nodeId: '01',
          lazyLoad:true,//本节点为懒加载节点
        }, 
        { 
          text: "爬虫设置",
          id: '02',
          lazyLoad:true,
        }, 
        { 
          text: "项目权限",
          id: '03'
        }, 
        { 
          text: "账号管理",
          id: '04',
          selectable: false,
        }
      ]
    }
  ]

  $('#tree').treeview({
    data: data,         // data is not optional
    levels: 2,
    showTags:true,
    loadingIcon:"fa fa-hourglass",//懒加载过程中显示的沙漏字符图标
    lazyLoad:loaddata//loaddata为点击懒加载节点目录时，运行的函数名称，把后端的数据添加到这个节点下面
  }); 
})

function loaddata(node,func){//这个技巧真高，即能得到节点数据，又能把节点下级的数据通过函数发回去
  // alert(node.id);
  // alert(func);
  <!-- $.ajax({
    type:"get",
    url:"/project/getprojcate",
    data: {id:node.id},
    success:function(data,status){
      func(data);
    }
  }); -->
  var singleNode = {
    text: "projcatename2",
    id:"08",
  };
  func(singleNode);//把新的下级节点数据发回到后端，这样明显优雅很多
  // $("#tree").treeview("addNode", [singleNode,node]);这一句和上面一句等同
}