一、需要引用的包(项目本地包)
<script language="JavaScript" src="resources/lib/jquery.min.js"></script>
<script src="angulartree/demo/angular.1.2.29.js"></script>
<script src="angulartree/demo/bootstrap.3.1.1.js"></script>
<script src="angulartree/demo/ui-bootstrap-tpls.0.11.2.js"></script>
<script src="angulartree/demo/prettify.1.0.1.js"></script>
<link href="angulartree/demo/bootstrap.3.1.1.css" rel="stylesheet" type="text/css">
<link href="angulartree/demo/prettify-style.css" rel="stylesheet" type="text/css">
<script src="angulartree/angular-tree-control.js"></script>
<link rel="stylesheet" type="text/css" href="angulartree/css/tree-control.css">
<link rel="stylesheet" type="text/css" href="angulartree/css/tree-control-attribute.css">
=、通过ajax从后台获取数据
var path= "<%=path%>";
var json;
$.ajax({
cache: false,
type: "get",
url:path+"/rs/res/tetra/equipmentDetail/detail",
async: false,
error: function(request) {
},
success: function(data) {
json=data;
}
});
三。对数据进行处理,转化成需要的json格式
var baseJson="[]";
var hazsbaseJsonarray = eval('('+baseJson+')');
var basearr;
for(var i=1;i<json.length;i++){
if(json[i].devType=="1"){
if(json[i].cityId=="杭州市"){
basearr = {
"id" :json[i].provinceId,
"label" : json[i].devName,
"type" : "file"
};
hazsbaseJsonarray.push(basearr);
}
}else{}
四、在对应的angularjs树形框架上添加改写的参数
function Children($scope) {
$scope.treedata = [
{
id : "id1",
label : "杭州市",
links : [
{
id : "id1.1",
label : "基站设备 ("+hazsbaseJsonarray.length+") 台",
links : hazsbaseJsonarray
},
......其它类似...........
]
}, ......其它类似...........
];
//可以更改子节点的名称
$scope.opts = {
nodeChildren : "links"
};
//加载这棵树
var angulartree = angular.module(
"angulartree",
[ "treeControl"]);