bootstrap-treeview是一款效果非常酷的基于bootstrap的多级列表树插件。
boostrap-treeview插件依赖于jquery和bootstrap，需要引用相对应版本的这两个插件才能使用bootstrap-treeview。
需要应用bootstrap-treeview.js文件可以从github。
可以使用任何html dom元素作为改列表树容器
<div id="dictree"></div>
我要评论angular.element("#dictree").treeview({
data: respose.data,
levels: 2,
color: '#000000',
backcolor: '#ffffff',
href: '#node-1'
});
其中data为我们的数据，数据以数组对象的形式组织，还可以设置如上其他属性背景色、前景色、默认展开的级别。
在本次实例中我们使用了三个属性，text、id、href属性，数据结构如下：
[{
"id":"41",
"text":"业务字典",
"href":"01",
"nodes":[{
"id":"42",
"text":"法律法规管理系统",
"href":"001","
nodes":[{
"id":"24","text":
"业务类别","href":"0001",
"nodes":null}]}]}]
通过调用http远程服务调用服务器上的数据，也就是已经写好的接口：
(function () {
var controllerid = 'app.views.dictionarymanager.index';
var mymodule = angular.module("app");
mymodule.controller(controllerid, ['$scope','$http', function ($scope,$http) {
//初始化treeview
getdictinary();
function getdictinary() {
$http({ method: 'get', url: '/api/dictionarymain/get' }).then(
function sunccesscallback(respose) {
angular.element("#dictree").treeview({
data: respose.data,
levels: 2,
color: '#000000',
backcolor: '#ffffff',
href: '#node-1'
});
}, function errorcallback(respose) {
alert(respose.data);
});
}
}]);
})();
其他内容不在本次介绍的范围内，如全局参数、可用的方法和事件不在本次讨论范围内，如果想要详细了解请访问。
如对本文有疑问， 点击进行留言回复！！
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】
网友评论