bootstrap treeview lazyload懒加载实践

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/80551600

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

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

可以先看我的前一篇文章

bootstrap treeview 增删改的正确姿势

https://blog.csdn.net/hotqin888/article/details/54798737

树状目录的懒加载就是第一次只加载第一层,然后当用户点击加号的时候,再从后端取得数据,添加到这个节点下面。优点是对于大量的树状目录数据,不需要一次性查询到下级节点目录,速度快,体验好,缺点是,如果树状目录带了成果数量的信息(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]);这一句和上面一句等同
}

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页