bootstrap treeview lazyload懒加载实践bootstrap treeview 增删改的正确姿势

版权声明:本文为博主原创文章,未经博主允许不得转载。 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]);这一句和上面一句等同
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏进击的程序猿

6.824 Lab 3: Fault-tolerant Key/Value Service Part-AIntroduction实际设计中出现的问题

该实验是mit 6.824课程的第3个实验,基于raft协议完成一个key-value系统

1773
来自专栏Django中文社区

统计文章阅读量

如何精确地记录一篇文章的阅读量是一个比较复杂的问题,不过对于我们的博客来说,没有必要记录的那么精确。因此我们使用一种简单但有效的方式来记录博客文章的阅读量:文章...

4135
来自专栏debugeeker的专栏

《coredump问题原理探究》Linux x86版第二章coredump捕获的环境配置

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

892
来自专栏小白安全

EvilURL 一个生成用于钓鱼攻击的IDN域名的工具

EvilURL v2.0一个生成用于钓鱼攻击的IDN域名的工具 secist2018-01-27共191208人围观 ,发现 1 个不明物体 ? ...

42113
来自专栏nummy

Jupyter notebook 快速入门

在浏览器中输入http://localhost:8888,就出现了notebook的页面。

752
来自专栏FreeBuf

某开源博客系统最新版源码审计

近期审计一个JAVA开源博客系统mblog2.5最新版,整体系统还是很安全的,漏洞较少,传统的问题像XSS系统使用全局过滤的方式进行实体化处理,上传问题使用白名...

1625
来自专栏小狼的世界

[每天五分钟,备战架构师-3]操作系统基本原理之存储管理

存储器是计算机系统中最重要的资源之一,任何程序和数据及各种控制用的数据结构都必须占有一定的存储空间,因此,存储管理直接影响系统性能。

1002
来自专栏cs

计算机网络--子网划分+思科CiscroPacket使用

<h1>1.0概念</h1> <p> <p><b>子网划分</b>是通过借用IP地址的若干位主机位来充当子网地址从而将原网络划分为若干子网而实现的...

4309
来自专栏小鹏的专栏

tf API 研读6:Running Graphs

会话管理 (Session management) 操作 描述 class tf.Session 运行TF操作的类, 一个Session对象将操作节...

2146
来自专栏小樱的经验随笔

【python进阶】深入理解系统进程1

2123

扫码关注云+社区

领取腾讯云代金券