前段时间一直在看AngularJS的资料,感觉是个很好的框架,很想有机会尝试用它做点什么。
JQuery ZTree是国内非常不错的JQuery插件,功能齐全,文档和API也非常的友好,之前项目上常用此插件。
AngularJS 功能虽然非常强大,但UI上提供的插件不像JQuery那么多,而且只能通过directive定义扩展的UI插件,虽然国外已经提供了一些基于 directive的Tree功能实现,但毕竟不像ZTree那样强大,而且Tree是做项目中很长用的一个基本功能。
因此,花了一点时间做了一个例子将ZTree应用到AngularJS中。
<!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <title>ZTree</title> <link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/animations.css"> <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css"> <script src="lib/jquery-1.10.2.min.js"></script> <script src="lib/jquery.ztree.all-3.5.js"></script> <script src="lib/angular.min.js"></script> <script src="app.js"></script> </head> <body> <body ng-controller='MyController'> <ul tree class="ztree" ng-model="selectNode"></ul> </body> <pre> {{selectNode | json}} </pre> </body> </html>
app.js
'use strict'; /* App Module */ var appModule = angular.module('app', []); appModule.directive('tree', function () { return { require: '?ngModel', restrict: 'A', link: function ($scope, element, attrs, ngModel) { //var opts = angular.extend({}, $scope.$eval(attrs.nlUploadify)); var setting = { data: { key: { title: "t" }, simpleData: { enable: true } }, callback: { onClick: function (event, treeId, treeNode, clickFlag) { $scope.$apply(function () { ngModel.$setViewValue(treeNode); }); } } }; var zNodes = [ { id: 1, pId: 0, name: "普通的父节点", t: "我很普通,随便点我吧", open: true }, { id: 11, pId: 1, name: "叶子节点 - 1", t: "我很普通,随便点我吧" }, { id: 12, pId: 1, name: "叶子节点 - 2", t: "我很普通,随便点我吧" }, { id: 13, pId: 1, name: "叶子节点 - 3", t: "我很普通,随便点我吧" }, { id: 2, pId: 0, name: "NB的父节点", t: "点我可以,但是不能点我的子节点,有本事点一个你试试看?", open: true }, { id: 21, pId: 2, name: "叶子节点2 - 1", t: "你哪个单位的?敢随便点我?小心点儿..", click: false }, { id: 22, pId: 2, name: "叶子节点2 - 2", t: "我有老爸罩着呢,点击我的小心点儿..", click: false }, { id: 23, pId: 2, name: "叶子节点2 - 3", t: "好歹我也是个领导,别普通群众就来点击我..", click: false }, { id: 3, pId: 0, name: "郁闷的父节点", t: "别点我,我好害怕...我的子节点随便点吧...", open: true, click: false }, { id: 31, pId: 3, name: "叶子节点3 - 1", t: "唉,随便点我吧" }, { id: 32, pId: 3, name: "叶子节点3 - 2", t: "唉,随便点我吧" }, { id: 33, pId: 3, name: "叶子节点3 - 3", t: "唉,随便点我吧" } ]; $.fn.zTree.init(element, setting, zNodes); } }; }); appModule.controller('MyController', function ($scope) { });
实现功能:定义tree这个属性,使<ul tree class="ztree" ng-model="selectNode"></ul>自动变成一个有数据的tree,点击树节点,自动变更model 的selectNode。
相关推荐
运用示例代码给大家详细介绍了利用AngularJS如何实现树形结构(ztree)菜单,文中仅用了几行AngularJS代码就是了这个功能,对大家日常开发很有帮助,有需要的朋友们可以参考借鉴,下面来一起看看吧。
开箱即用的ztree封装:右键事件、拖动节点、一键展开关闭节点、windows风格图标等等
js集成zTree实现树形结构菜单
主要介绍了在AngularJS中使用jQuery的zTree插件的方法,Angular中集成了jqLite,但还不是完全版的jQuery,需要的朋友可以参考下
ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网...
zTree -- jQuery 树插件
ztree脚本、ztree下载、包含ztree文件、ztree的pdf教程、ztree的chm教程
Ztree利用getNodesByFilter进行js搜索 搜索可以实现父级隐藏,只展示符合搜索的父级和子集的数据
ztree使用说明
zTree组件api,官方可用chm版(zTree api)
前端框架ztree前端框架ztree
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
最新版的ztree插件源码zTree-zTree_v3.5.17!
基于最新版本ztree而开发的下拉树插件,还拥有搜索功能
里面三个压缩包的代码,ztree filter demo ztree的一些代码,供写ztree的人查看使用。
ztree官网参考文档,及对应的demo可以参考学习ztree树是如何实现的
非常好看的ztree样式,可以使用不同图标,可以兼容IE6,Hunter's Home zTree in Google zTree 功能演示 基本功能演示 不兼容 IE6 兼容 IE6 check 演示 CheckBox演示 Radio演示 异步加载演示 事件演示 编辑演示 默认...
树形菜单js包,zTree 内含各种demo演示,需要zTree的朋友可以下载,java