BootstrapTreeView 實現懶載入和點選事件。
阿新 • • 發佈：2021-06-17
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
TriggersnodeRenderedevent; 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 } ]);
TriggersnodeRenderedevent; pass silent to suppress events.