Angular實現遞迴指令 - Tree View

標籤：

在層次資料結構展示中，樹是一種極其常見的展現方式。比如系統中目錄結構、企業組織圖、電子商務產品分類都是常見的樹形結構資料。

這裡我們採用Angular的方式來實現這類常見的tree view結構。

首先我們定義資料結構，採用以children屬性來掛接子節點方式來展現樹階層，樣本如下：

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

則我們對於ng way的tree view可以實現為：

JavaScript:

angular.module(‘ng.demo‘, []).directive(‘treeView‘,[function(){     return {          restrict: ‘E‘,          templateUrl: ‘/treeView.html‘,          scope: {              treeData: ‘=‘,              canChecked: ‘=‘,              textField: ‘@‘,              itemClicked: ‘&‘,              itemCheckedChanged: ‘&‘          },         controller:[‘$scope‘, function($scope){             $scope.itemExpended = function(item, $event){                 item.$$isExpend = ! item.$$isExpend;                 $event.stopPropagation();             };             $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:

樹內容主題HTML： /treeView.html

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

每個item節點的HTML：/treeItem.html

<i ng-click="itemExpended(item, $event);" class="fa" ng-class="{‘fa-minus‘: !isLeaf(item)&& item.$$isExpend, ‘fa-plus‘: !isLeaf(item)&&!item.$$isExpend, ‘fa-leaf‘: isLeaf(item)}"></i><input id="checkItem" 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來載入子節點和資料，以及利用一個warpCallback方法來轉接函數外部回呼函數，利用angular.noop的Null 物件模式來避免未註冊的回調情境。

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

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

效果如下，當然你也可以在jsbin中體驗它：

Angular實現遞迴指令 - Tree View