<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基于bootstrup treeview多级列表树插件</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script> </head> <body> <div class="jq22-container"> <div class="container"> <div class="row"> <div class="col-sm-4"> <form class="form-inline" role="form"> <div class="form-group"> <input type="input" class="form-control" id="input-select-node" placeholder="Identify node..." value="Parent 1"> </div> <div class="form-group"> <button type="button" class="btn btn-success select-node pull-right" id="btn-select-node">搜索</button> </div> </form> <br> <div id="treeview-selectable" class=""> </div> </div> </div> </div> </div> </body> </html>
<script type="text/javascript"> $(function() { var defaultData = [ { text: 'Parent 1', href: '#parent1', tags: ['4'], nodes: [ { text: 'Child 1', href: '#child1', tags: ['2'], nodes: [ { text: 'Grandchild 1', href: '#grandchild1', tags: ['0'] }, { text: 'Grandchild 2', href: '#grandchild2', tags: ['0'] } ] }, { text: 'Child 2', href: '#child2', tags: ['0'] } ] }, { text: 'Parent 2', href: '#parent2', tags: ['0'] }, { text: 'Parent 3', href: '#parent3', tags: ['0'] }, { text: 'Parent 4', href: '#parent4', tags: ['0'] }, { text: 'Parent 5', href: '#parent5' , tags: ['0'] } ]; var initSelectableTree = function() { return $('#treeview-selectable').treeview({ data: defaultData, onNodeSelected: function(event, node) { //$('#selectable-output').prepend('<p>' + node.text + ' was selected</p>'); }, onNodeUnselected: function (event, node) { //$('#selectable-output').prepend('<p>' + node.text + ' was unselected</p>'); } }); }; var $selectableTree = initSelectableTree(); var findSelectableNodes = function() { return $selectableTree.treeview('search', [ $('#input-select-node').val(), { ignoreCase: false, exactMatch: false } ]); }; var selectableNodes = findSelectableNodes(); // Select/unselect/toggle nodes $('#input-select-node').on('keyup', function (e) { selectableNodes = findSelectableNodes(); $('.select-node').prop('disabled', !(selectableNodes.length >= 1)); }); }); </script>