最近做功能的时候,层级关系需要用属性结构显示出来,然后就在网上找了bootstrap-treeview插件。但是发现这个插件只能通过点击前面的+和-才能展开和关闭,然后就研究了一下点击这个节点的时候也能展开和折叠。
一下是参考了网上大神的代码。直接修改了这个插件的源码。
在bootstrap-treeview.js这个文件里查找 <li class="list-group-item"></li> 这句代码,
然后将其改为<li class="list-group-item" οnclick="change_tree()"></li> 目的就是在节点上添加一个单击事件,通过该单击事件来实现节点的展开和关闭。
注意:这个事件是在自己写的js里定义的,不是在bootstrap-treeview.js里定义的。
定义如下:
function change_tree(target){
if ($(event.target).children(".glyphicon").hasClass("glyphicon-plus") ||
$(event.target).children(".glyphicon").hasClass("glyphicon-minus"))
{
$(event.target).children(".glyphicon")[0].click();
}
}
这样就可以通过点击节点来实现树形的关闭和展开。