BootstrapTreeView 实现懒加载和点击事件。

BootstrapTreeView的js下载位置：https://github.com/patternfly/patternfly-bootstrap-treeview。（注意不是https://github.com/jonmiles/bootstrap-treeview，这个版本没有懒加载功能。）

官方案例：https://github.com/patternfly/patternfly-bootstrap-treeview/issues/69

 

各个js需要下载下来放到相应位置。(主义还有个jquery.js)

 

 

复制代码
<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Tree View</title>
  <!-- <link href="./libs/bootstrap/css/bootstrap.css" rel="stylesheet"> -->
  <link href="./css/bootstrap.css" rel="stylesheet">
  <link href="./css/bootstrap-treeview.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <h1>Bootstrap Tree View - DOM Tree</h1>
    <br />
    <div class="row">
      <div class="col-sm-12">
        <label for="treeview"></label>
        <div id="tree" />
      </div>
    </div>
  </div>
  <!-- <script src="./libs/jquery/jquery.js"></script>   -->
  <script src="./js/jquery.js"></script>

  <script src="./js/bootstrap-treeview.js"></script>
  <script type="text/javascript">
    function lazyLoad(data, func) {
      func([{
        text: "Parent 2-1",
        lazyLoad: true
      },])
      console.log(data, func)
    }

    $(function () {

      var options = {
        bootstrap2: false,
        showTags: true,
        levels: 5,
        data: [
          {
            icon: "glyphicon glyphicon-stop",
            text: "Parent 2",
            lazyLoad: true
          },
          {
            text: "Parent 3"
          },
        ],
        lazyLoad: function (data, func) {
          lazyLoad(data, func);
        }
      };

      $('#tree').treeview(options);
      $('#tree').on('nodeSelected', function (event, data) {
        console.log(data);
      });
    });
  </script>
</body>
复制代码

 

 

补充Node操作方法

addNode(nodes, parentNode, index, options)

Add nodes to the tree.

$('#tree').treeview('addNode', [ nodes, parentNode, index, { silent: true } ]);

If parentNode evaluates to false, node will be added to root If index evaluates to false, node will be appended to the nodes

Triggers nodeRendered event; pass silent to suppress events.

removeNode()

Removes given nodes from the tree.

$('#tree').treeview('removeNode', [ nodes, { silent: true } ]);

updateNode(node, newNode, option)

Updates / replaces a given tree node.

$('#tree').treeview('updateNode', [ node, newNode, { silent: true } ]);

Triggers nodeRendered event; pass silent to suppress events.

posted @   magel  阅读(1549)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
点击右上角即可分享
微信分享提示
AI IDE Trae