bootstrap-treeview的JS库
导入bootstrap-treeview库:bootstrap-treeview依赖于jQuery v2.0.3版本及以上,所以在导入时,要在Jquery文件后导入。CSS文件的导入则没有什么限制。导入时所使用的代码如下(路径请自行确定):
树型JSON结构:树形结构的层次及各种显示内容是用JSON格式的数据来保存的,通常是在程序运行过程中动态生成了。为了展示方便,一个静态的JSON树形结构的代码如下所示:var data = [ { text: 'Parent 1', // 结点文字 icon: 'oi oi-chevron-right', // 未选中时文字左侧的图标 selectedIcon: 'oi oi-badge', // 选中时文字左侧的图标 tags: [9], // 结构最右侧浮动显示的说明文字 state: { expanded: true // 有子结点的时候默认展开 }, nodes: [ // 定义子结点 { text: 'Child 1', nodes: [ // 定义子结点 { text: 'Grandchild 1' }, { text: 'Grandchild 2' } ] }, { text: 'Child 2' } ] }, { // 兄弟结点 text: 'Parent 2' }];
结点的各种属性:一个结点,除了上述提到的属性外,还可以设置以下的这些属性来显示不同的外观: text: 'Node 1', icon: 'glyphicon glyphicon-stop', // 设置的内容取决代码里使用的是那一种图标库。 selectedIcon: 'glyphicon glyphicon-stop', // 设置的样例值是bootstrap3自带的图标,如果你用的是bootstrap2或4,就看不到图标效果了。 color: '#ff0000', backColor: '#00FFFF', href: '#node-1', // 结合全局enableLinks选项为列表树节点指定URL。 selectable: true, // 指定列表树的节点是否可选择。设置为false将使节点展开,并且不能被选择。 state: { checked: true, disabled: true, expanded: true, selected: true }, tags: ['available'], nodes: [ {}, ... ]
初始化树对象:有了上面的基础知识后,就可以在UI上构建我们的树对象了:首先来一个DIV:
然后在初始加载时往上面的DIV中填充树型结构:$(function () { $('#my_tree').treeview({data: getTreeJSON(), showTags: true});});function getTreeJSON() { var data = 动态构造树形JSON结构 return data;}treeview的data参数就是动态构造树形JSON结构,而showTags标识符设置为true,才能让模板结点的tags属性正确显示。treeview方法与事件:treeview方法提供的方法比较丰富,在这里就不一一列举了。只简单举个例子,以下是调用checkAll方法:$('#tree').treeview('checkAll', { silent: true });而事件的绑定可以通过以下两种方式来操作:1. 初始化树对象的回调函数:$('#tree').treeview({ onNodeSelected: function(event, data) { // 事件代码...}); 2. 使用jQuery .on方法:$('#tree').on('nodeSelected', function(event, data) { // 事件代码...});
你要注意的事情:目前bootstrap-treeview的JS库所对应的bootstrap版本为3。如果你使用的是bootstrap2或4,则在有一些效果上会出现偏差。遇到这种情况,你可以根据bootstrap3的CSS效果,在现在的代码去再实现一下即可。