<!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>