快捷導(dǎo)航

AngularJS遞歸指令實現(xiàn)Tree View效果示例

更新時間：2016年11月07日 09:56:55 作者：破狼

這篇文章主要介紹了AngularJS遞歸指令實現(xiàn)Tree View效果,結(jié)合實例形式分析了AngularJS基于遞歸指令實現(xiàn)樹形結(jié)構(gòu)層次數(shù)據(jù)的相關(guān)操作步驟與注意事項,需要的朋友可以參考下

本文實例講述了AngularJS遞歸指令實現(xiàn)Tree View效果的方法。分享給大家供大家參考，具體如下：

在層次數(shù)據(jù)結(jié)構(gòu)展示中，樹是一種極其常見的展現(xiàn)方式。比如系統(tǒng)中目錄結(jié)構(gòu)、企業(yè)組織結(jié)構(gòu)、電子商務(wù)產(chǎn)品分類都是常見的樹形結(jié)構(gòu)數(shù)據(jù)。

這里我們采用Angular的方式來實現(xiàn)這類常見的tree view結(jié)構(gòu)。

首先我們定義數(shù)據(jù)結(jié)構(gòu)，采用以children屬性來掛接子節(jié)點方式來展現(xiàn)樹層次結(jié)構(gòu)，示例如下：

[
  {
   "id":"1",
   "pid":"0",
   "name":"家用電器",
   "children":[
     {
      "id":"4",
      "pid":"1",
      "name":"大家電"
     }
   ]
  },
  {
   ...
  }
  ...
]

則我們對于ng way的tree view可以實現(xiàn)為：

JavaScript:

angular.module('ng.demo', [])
.directive('treeView',[function(){
   return {
     restrict: 'E',
     templateUrl: '/treeView.html',
     scope: {
       treeData: '=',
       canChecked: '=',
       textField: '@',
       itemClicked: '&',
       itemCheckedChanged: '&',
       itemTemplateUrl: '@'
     },
     controller:['$scope', function($scope){
       $scope.itemExpended = function(item, $event){
         item.$$isExpend = ! item.$$isExpend;
         $event.stopPropagation();
       };
       $scope.getItemIcon = function(item){
         var isLeaf = $scope.isLeaf(item);
         if(isLeaf){
           return 'fa fa-leaf';
         }
         return item.$$isExpend ? 'fa fa-minus': 'fa fa-plus';
       };
       $scope.isLeaf = function(item){
        return !item.children || !item.children.length;
       };
       $scope.warpCallback = function(callback, item, $event){
         ($scope[callback] || angular.noop)({
           $item:item,
           $event:$event
         });
       };
     }]
   };
 }]);

HTML:

樹內(nèi)容主題HTML： /treeView.html

<ul class="tree-view">
    <li ng-repeat="item in treeData" ng-include="'/treeItem.html'" ></li>
</ul>

每個item節(jié)點的HTML：/treeItem.html

<i ng-click="itemExpended(item, $event);" class=""></i>
<input type="checkbox" ng-model="item.$$isChecked" class="check-box" ng-if="canChecked" ng-change="warpCallback('itemCheckedChanged', item, $event)">
<span class='text-field' ng-click="warpCallback('itemClicked', item, $event);"></span>
<ul ng-if="!isLeaf(item)" ng-show="item.$$isExpend">
  <li ng-repeat="item in item.children" ng-include="'/treeItem.html'">
  </li>
</ul>

這里的技巧在于利用ng-include來加載子節(jié)點和數(shù)據(jù)，以及利用一個warpCallback方法來轉(zhuǎn)接函數(shù)外部回調(diào)函數(shù)，利用angular.noop的空對象模式來避免未注冊的回調(diào)場景。對于View交互的數(shù)據(jù)隔離采用了直接封裝在元數(shù)據(jù)對象的方式，但它們都以$$開頭，如$$isChecked、$$isExpend。在Angular程序中以$$開頭的對象會被認(rèn)為是內(nèi)部的私有變量，在angular.toJson的時候，它們并不會被序列化，所以利用$http發(fā)回服務(wù)端更新的時候，它們并不會影響服務(wù)端傳送的數(shù)據(jù)。同時，在客戶端，我們也能利用對象的這些$$屬性來控制View的狀態(tài)，如item.$$isChecked來默認(rèn)選中某一節(jié)點。

我們就可以如下方式來使用這個tree-view：

復(fù)制代碼代碼如下:

<tree-view tree-data="demo.tree" text-field="name" value-field='id' item-clicked="demo.itemClicked($item)" item-checked-changed="demo.itemCheckedChanged($item)" can-checked="true"></tree-view>

效果如下：