bootstrap-treeview + angular 使用
程序员文章站
2022-12-24 15:14:10
bootstrap是什么 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。 怎样使用bootstrap 插件依赖 boostrap-treeview插件依赖于jquery和bootstrap,需要引用相对应版本的这两个插件才能使用bootst ......
bootstrap是什么
bootstrap-treeview是一款效果非常酷的基于bootstrap的jquery多级列表树插件。
怎样使用bootstrap
插件依赖
boostrap-treeview插件依赖于jquery和bootstrap,需要引用相对应版本的这两个插件才能使用bootstrap-treeview。
引用bootstrap-treeview
需要应用bootstrap-treeview.js文件可以从github。
html结构
可以使用任何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}]}]}]
与angular结合
通过调用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); }); } }]); })();
其他
其他内容不在本次介绍的范围内,如全局参数、可用的方法和事件不在本次讨论范围内,如果想要详细了解请访问。