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打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
vue+elementUI实现简单日历功能
Sep 24 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
用js遍历 table的脚本
2008/07/23 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
理解JS事件循环
2016/01/07 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
手机端转换rem适应
2017/04/01 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
对python中的float除法和整除法的实例详解
2019/07/20 Python
Python安装selenium包详细过程
2019/07/23 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
秋季运动会加油稿200字
2014/01/11 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
小学生读书笔记范文
2015/06/30 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript
oracle索引总结
2021/09/25 Oracle
Linux中sftp常用命令整理
2022/06/28 Servers
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL