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.

原文地址:https://www.cnblogs.com/magel/p/14893526.html