插件要2.1版本的，这个github上有。bootstrap-treeview.js v2.1.0
1.html部分
<div id="treeview">
</div>
2.js部分
//数据源
var defaultData = [{
id: 1,
text: 'Parent 1',
nodes: [{
id: 6,
text: 'Child 1'
},
{
id: 7,
text: 'Child 2'
}
]
},
{
id: 2,
text: 'Parent 2',
nodes: [{
id: 8,
text: 'Child 1'
},
{
id: 9,
text: 'Child 2'
}
]
},
{
id: 3,
text: 'Parent 3',
},
{
id: 4,
text: 'Parent 4'
},
{
id: 5,
text: 'Parent 5'
}
];
//初始化
$('#treeview').treeview({
showCheckbox: true,
data: defaultData,
hierarchicalCheck: true, //级联勾选
propagateCheckEvent: true,
state: {
checked: true,
// disabled: true,
expanded: true,
// selected: true
},
onNodeChecked: function (event, node) {
// $('#checkable-output').prepend('<p>' + node.text + ' was checked</p>');
},
onNodeUnchecked: function (event, node) {
// $('#checkable-output').prepend('<p>' + node.text + ' was unchecked</p>');
}
});
// 模拟ajax add/update
$("#treeViewBtn").click(function () {
var checkedNodes = $('#treeview').treeview('getChecked')
console.log(checkedNodes)
var nodeIds = [];
$.each(checkedNodes, function (i, n) {
nodeIds.push(n.id)
})
console.log(nodeIds)
//[1, 6, 7, 2, 8, 4]
})
// 模拟ajax query
function queryTree() {
$('#treeview').treeview('uncheckAll', {
silent: true
})
var data = ["1", "4", "6", "7", "2", "8"];
$.each(data,function(i,n){
var findCheckableNodess = function () {
return $('#treeview').treeview('findNodes', [n, 'id']);
};
var checkableNodes = findCheckableNodess();
$('#treeview').treeview('checkNode', [checkableNodes, {
silent: true
}]);
})
}
queryTree()
3.若节点点击不能折叠，加上这串css
.node-hidden{
display: none;
}