Angular实现递归指令 - 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>
效果如下,当然你也可以在jsbin中体验它:
Angular实现递归指令 - Tree View的更多相关文章
- 多层json的构造,取值,还有使用bootstrap的tree view在前端展示的相关问题
bootstrap-tree view是一款非常好用的插件,它可以添加任意多层节点,效果如下所示: 使用之前需要在HTML页面添加依赖文件: <link href="bootstrap ...
- [UE4]Tree View
类似List View,但Tree View要求提供树形结构的数据.Tree View和Tile View都是继承自List View 一.创建一个名为“TreeEntry”的UserWidget,添 ...
- SAP CRM 树视图(TREE VIEW)
树视图可以用于表示数据的层次. 例如:SAP CRM中的组织结构数据可以表示为树视图. 在SAP CRM Web UI的术语当中,没有像表视图(table view)或者表单视图(form view) ...
- delphi 保存 和 打开 TREE VIEW的节点已经展开的状态
保存 和 打开 TREE VIEW的节点已经展开的状态 如果每次打开后能自动读取上次展开的状态就会非常快捷 下载地址: 实现方法 将已经展开的节点索引 放在一个文本中最后选中的那个节点索引放在最后一位 ...
- Angular.js之指令学习笔记
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- OpenERP how to set the tree view limit
return { 'name':u'库存报表', 'view_type':'form', 'view_mode':'tree,form', 'res_model':'rainsoft.account. ...
- angular内置指令相关知识
原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...
- Angular内置指令
记录一下工作中使用到的一些AngularJS内置指令 内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突 1. ng-model 使用ng-model实现双向绑定,通过表单的 ...
- Angular结构型指令,模块和样式
结构型指令 *是一个语法糖,<a *ngIf="user.login">退出</a>相当于 <ng-template [ngIf]="use ...
随机推荐
- XE3随笔21:系统默认语言与系统支持的语言列表
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...
- C#数据结构选择
选择一个合适的数据结构会对程序的性能有着显著的提高 线性表和链表: 1.LinkedList<T>:适合于元素数组不固定,存在大量列表的头尾添加动作场合.其它可使用List<T> ...
- angular js 自定义js错误处理(Angularjs js error handler)
使用AngularJS的时候,对JS错误如何自定义处理?(比如用Google Analytics记录angularjs使用中出现的js错误) AngularJS自带一个错误处理service:$exc ...
- iazq更新网址
[版本:1.1] [介绍:哈哈(ಡωಡ)hiahiahia 新版软件试试去和哥哥刚放学噢噢噢天然呆翡翠城] [链接:http://info.3g.qq.com/g/s?aid=index&g_ ...
- 探 寻 宝 藏--- DP
题目描述 传说HMH大沙漠中有一个M*N迷宫,里面藏有许多宝物.某天,Dr.Kong找到了迷宫的地图,他发现迷宫内处处有宝物,最珍贵的宝物就藏在右下角,迷宫的进出口在左上角.当然,迷宫中的通路不是平坦 ...
- java 读取文件内容 三种形式及效率对比
IOUtils.getStringFromReader() 读取方式为最快的 InputStream in = null; String line = ""; long start ...
- textarea 在浏览器中固定大小和禁止拖动
HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 ...
- PHP导出大量数据到excel表格
/** * @creator Jimmy * @data 2016/8/22 * @desc 数据导出到excel(csv文件) * @param $filename 导出的csv文件名称 如date ...
- android 的闪屏效果
android的闪屏效果,就是我们刚开始启动应用的时候弹出的界面或者动画,过2秒之后自动的跳转到主界面. 其实,实现这个效果很简单,使用Handler对象的postDelayed方法就可以实现.在这个 ...
- 如何判断UIPanGestureRecognizer的拖动方向
最近做一个项目,需要用到UIPanGestureRecognizer做一个侧滑菜单,需求是不能向右侧拖动(点击按钮右滑),但可以向左侧手势拖动收回:于是需要判断拖动的方向,百度了一下,网上大部分的答案 ...