AngularJS递归指令实现Tree View效果示例


Posted in Javascript onNovember 07, 2016

本文实例讲述了AngularJS递归指令实现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: '&',
       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:

树内容主题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=""></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来加载子节点和数据,以及利用一个warpCallback方法来转接函数外部回调函数,利用angular.noop的空对象模式来避免未注册的回调场景。对于View交互的数据隔离采用了直接封装在元数据对象的方式,但它们都以$$开头,如$$isChecked、$$isExpend。在Angular程序中以$$开头的对象会被认为是内部的私有变量,在angular.toJson的时候,它们并不会被序列化,所以利用$http发回服务端更新的时候,它们并不会影响服务端传送的数据。同时,在客户端,我们也能利用对象的这些$$属性来控制View的状态,如item.$$isChecked来默认选中某一节点。

我们就可以如下方式来使用这个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>

效果如下:

AngularJS递归指令实现Tree View效果示例

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript[js]获取url参数的代码
Oct 17 Javascript
ASP SQL防注入的方法
Dec 25 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
js中switch case循环实例代码
Dec 30 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 #Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 #Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 #Javascript
AngularJS实现Input格式化的方法
Nov 07 #Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 #Javascript
webpack常用配置项配置文件介绍
Nov 07 #Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 #Javascript
You might like
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
php使用codebase生成随机数
2014/03/25 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
js控制table合并具体实现
2014/02/20 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
python实现画圆功能
2018/01/25 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
市场部经理岗位职责
2014/04/10 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
工作年限证明模板
2014/11/01 职场文书
网络舆情信息简报
2015/07/21 职场文书
生日祝酒词大全
2015/08/10 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
你知道Java Spring的两种事务吗
2022/03/16 Java/Android