bootstrap-treeview 使用

1.引用文件

<link href="~/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="~/js/jquery-2.1.0.min.js"></script>
<script src="~/bootstrap/js/bootstrap-treeview.js"></script>

2.html

 <div id="bootstraptree" ></div>

3.JS

 $(function () {
        initTreeView(); //tree初始化
    });
//tree 初始化
    function initTreeView() {
     $.ajax({
            type: "GET",
            dataType: "json",
            url: "/Search/GetMenuTListbs",
            async: false,
            data: { dbcode: dbcode, sysid: sysid },
            success: function (res) {
                $('#bootstraptree').treeview({
                	data: res,
                	showIcon: false,//是否显示节点图标
            		showCheckbox: true,//是否在节点上显示checkboxs
            		onNodeSelected: function (event, data) { // 选中事件
            			},
            		onNodeUnselected: function (event, data) { // 取消选中事件
            			},
        		});
            }
        });        
    }

其他：
1）给bootstrap-treeview增加点击事件，单击菜单也能展开和折叠
首先修改bootstrap-treeview.js源码，找到<li class="list-group-item"></li>， 增加onClick方法，修改后代码<li class="list-group-item" οnclick="itemOnclick(this)"></li>。

//单击菜单也能展开和折叠
function itemOnclick(target) {
//找到当前节点id
var nodeid = $(target).attr(‘data-nodeid’);
var tree = $(’#bootstraptree’);
//获取当前节点对象
var node = tree.treeview(‘getNode’, nodeid);

if (node.state.expanded) {
    //处于展开状态则折叠
    tree.treeview('collapseNode', node.nodeId);
} else {
    //展开
    tree.treeview('expandNode', node.nodeId);
}

}
2） bootstrap-treeview 修改源码添加id 字段。
修改bootstrap-treeview.js源码，