Angularjs树形结构
2024-04-10 04:01:33
思路
组件递归
<!DOCTYPE html>
<html ng-app="treeDemo">
<head>
<meta name="description" content="ng trrview example"><meta charset="utf-8"><title>JS Bin</title><script src="http://greengerong.github.io/self/cdn/angular.js"></script>
</head>
<body ><div ng-controller="DemoController as demo" class="container"><div class="row"><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></div><div class="row"><h2>Item selected</h2><!--展示数据部分--> <pre>{{demo.selectedItem | json}}</pre><pre>{{demo.checkeditem | json}}</pre></div><script type="text/ng-template" id="/treeView.html"><ul class="tree-view"><li ng-repeat="item in treeData" ng-include="itemTemplateUrl || '/treeItem.html'" ></li></ul></script><script type="text/ng-template" id="/treeItem.html"><i class="{{getItemIcon(item)}}"></i><input ng-click="itemExpended(item, $event);" 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);">{{item[textField]}}</span><ul ng-if="!isLeaf(item)"ng-show="item.$$isExpend"><li ng-repeat="item in item.children" ng-include="itemTemplateUrl || '/treeItem.html'"></li></ul></script></div>
</body>
</html>
<script>angular.module("treeDemo", []).controller("DemoController", ['$http',function($http){var that = this;that.tree = [{"id":"1","parentId":"0","name":"电器","children":[{"id":"4","parentId":"1","name":"大家电","children":[{"id":"7","parentId":"4","name":"空调","children":[{"id":"15","parentId":"7","name":"海尔空调"},{"id":"16","parentId":"7","name":"美的空调"}]},{"id":"8","parentId":"4","name":"冰箱"},{"id":"9","parentId":"4","name":"洗衣机"},{"id":"10","parentId":"4","name":"热水器"}]},{"id":"5","parentId":"1","name":"生活电器","children":[{"id":"19","parentId":"5","name":"加湿器"},{"id":"20","parentId":"5","name":"电熨斗"}]}]},{"id":"2","parentId":"0","name":"服饰","children":[{"id":"13","parentId":"2","name":"男装"},{"id":"14","parentId":"2","name":"女装"}]},{"id":"3","parentId":"0","name":"化妆","children":[{"id":"11","parentId":"3","name":"面部护理"},{"id":"12","parentId":"3","name":"口腔护理"}]}
];that.itemClicked = function ($item) {that.selectedItem = $item;console.log($item, 'item clicked');};that.itemCheckedChanged = function($item){$http.post('/url', $item);that.checkeditem = $item;console.log($item,'item checked');};return that;}]).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.isLeaf = function(item){return !item.children || !item.children.length; };$scope.warpCallback = function(callback, item, $event){($scope[callback] || angular.noop)({$item:item,$event:$event});};}]};}]);
</script>
转载：1
Angularjs树形结构相关推荐
- android treeview 树形结构,前端开发中，使用TreeView控件创建树形结构
原标题:前端开发中,使用TreeView控件创建树形结构 Wijmo是一款使用Type编写的新一代Java/HTML5控件集.它秉承触控优先的设计理念,在全球率先支持AngularJS,并提供性能卓越 ...
- 树形结构在关系数据库中的设计
在程序设计中,经常以树形结构表示数据的层次关系,如菜单的结构.商品的分类等. 这样的层次结构在关系数据库中难以直观地表示.常见的一种做法是用一个字段指向上级节点来表示记录的上下级关系. fid pid ...
- html树状结构怎么展开,纯css实现树形结构
纯css实现属性结构 **css实现属性结构的思路是利用伪类实现树形结构连接线,如果想实现点击展开和收 缩以及复选框效果还得配合js来实现.其实展开和收缩就是一个点击元素其子元素隐藏 和显示的切换.* ...
- 使用树形结构保存实体
阅读原文请访问我的博客BrightLoong's Blog 之前在项目需要实现一个功能--将xml文件映射成实体,然后对映射的实体进行逻辑处理,最后保存到数据库中:由于xml结构的数据是结构化的数据, ...
- 在winform中从外部拖动节点到树形结构（treeview和listview相互拖动）（一）
最近一个项目要用到从listview向treeview拖动item,达到从外部拖动图标成为树形结构的一部分,通过查阅资料总结了一些实现方式,分享给大家.这是winform中的例子. 在进行拖放操作之前 ...
- Java8 Stream流递归，几行代码搞定遍历树形结构
欢迎关注方志朋的博客,回复"666"获面试宝典 可能平常会遇到一些需求,比如构建菜单,构建树形结构,数据库一般就使用父id来表示,为了降低数据库的查询压力,我们可以使用Java8中 ...
- 浅谈树形结构的特性和应用（上）:多叉树，红黑树，堆，Trie树，B树，B+树......
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 上篇文章我们主要介绍了线性数据结构,本篇233酱带大家看看 无所不 ...
- 使用ztree.js，受益一生，十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
- vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件 发布时间:2021-06-11 17:26:48 来源:亿速云 阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
最新文章
- Azure实践之automation自动整理资产信息
- Python 爬虫从入门到进阶之路（七）
- 考虑使用静态工厂方法替代构造方法
- DNS support edns-client-subnet
- centos6.5卸载java_删除CentOS6.5系统自带的jdk
- c# 操作oracle数据库,C#连接oracle数据库增删改查实例
- [SCOI2005]骑士精神
- studioone机架效果模板_studioone3机架效果包
- sl400上面安装ubuntu
- 广东第二师范学院学计算机,广东第二师范学院计算机科学系党总支一行来我院调研交流...
- 关于阿里云云虚拟主机上传php论坛代码的那点事
- 获上市公司投资的睿图智能，如何打开“机器视觉”新空间？
- 如何高效的进行空值的填充
- 采集日志实践-ELK以及filebeat配置解析
- 中国软件企业自主创新
- uname命令详解（图文）
- python珠穆朗玛峰问题_珠穆朗玛峰有多可怕？看沿途看完就明白了！
- 数字加减与摄氏华氏度转化 王明哲
- 解释器，一个交互式外壳
- Docker中安装Mysql报错--[Warning] TIMES TAMP with implicit DEFAULT value is deprecated. Please use - - exp