angularjs编写一颗3级目录的树结构

来源:互联网 发布:兄弟连it教育地址 编辑:程序博客网 时间:2024/05/22 03:28

一、需要引用的包(项目本地包)

<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;          

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"]);


0 0
原创粉丝点击