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 相关文章推荐
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 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实现的MySQL通用查询程序
2007/03/11 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
php生成图片验证码的方法
2016/04/15 PHP
Nginx实现反向代理
2017/09/20 Servers
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
python基于http下载视频或音频
2018/06/20 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
学习Python列表的基础知识汇总
2020/03/10 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
管道维修工岗位职责
2013/12/27 职场文书
实习生求职自荐信
2014/02/07 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
增员口号大全
2014/06/18 职场文书
学校个人对照检查材料
2014/08/26 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
小兵张嘎观后感
2015/06/03 职场文书
同学会感言
2015/07/30 职场文书
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android