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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
JavaScript 数组去重详解
Sep 15 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
举例讲解Python中装饰器的用法
2015/04/27 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Pytorch to(device)用法
2020/01/08 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
什么是反射
2012/03/17 面试题
十八大宣传标语
2014/10/09 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL