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 动态生成私有变量访问器
Dec 06 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
写gulp遇到的ES6问题详解
Dec 03 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 include加载文件两种方式效率比较
2010/08/08 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php的debug相关函数用法示例
2016/07/11 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
javascript 内存回收机制理解
2011/01/17 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python关于调用函数外的变量实例
2019/12/26 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
Python LMDB库的使用示例
2021/02/14 Python
台湾森森购物网:U-mall
2017/10/16 全球购物
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
论文指导教师评语
2014/04/28 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
大学开学感言
2015/08/01 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python