AngularJS 利用directive集成JQuery ZTree
2014-05-09 18:45
501 查看
前段时间一直在看AngularJS的资料,感觉是个很好的框架,很想有机会尝试用它做点什么。
JQuery ZTree是国内非常不错的JQuery插件,功能齐全,文档和API也非常的友好,之前项目上常用此插件。
AngularJS功能虽然非常强大,但UI上提供的插件不像JQuery那么多,而且只能通过directive定义扩展的UI插件,虽然国外已经提供了一些基于directive的Tree功能实现,但毕竟不像ZTree那样强大,而且Tree是做项目中很长用的一个基本功能。
因此,花了一点时间做了一个例子将ZTree应用到AngularJS中。
页面代码
实现功能:定义tree这个属性,使<
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/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 treeclass="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) { });页面效果地址:http://twobugerphp.jd-app.com/ztree.html
实现功能:定义tree这个属性,使<
ul
tree
class
=
"ztree"
ng-model
=
"selectNode"
></
ul
>自动变成一个有数据的tree,点击树节点,自动变更model的selectNode。
相关文章推荐
- AngularJS进阶(十三)JS利用正则表达式校验手机号
- 利用Angularjs和Bootstrap前端开发案例实战
- AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)
- AngularJS进阶(十三)JS利用正则表达式校验手机号
- 利用VS Code开发你的第一个AngularJS 2应用程序
- 利用browserify or requirejs 来构建angularjs
- 如何利用AngularJS打造一款简单Web应用
- AngularJS - 利用ui-route及provider实现页面数据预加载的关键
- 使用Angularjs获取数组中的值利用一个函数的返回值来决定相应的dom是否生成
- angularJS 的利用ng-repeat遍历二维数组
- Angularjs 利用 $on、$emit和$broadcast传值,利用$watch监听模型变化
- 利用AngularJS中ng-include实现静态HTML头文件和尾文件导入
- 【angularjs学习笔记】利用angularjs和requirejs构建模块化单页面应用
- AngularJS利用Controller完成URL跳转
- AngularJs 利用百度地图API 定位当前位置 获取地址信息
- angularjs分离controller的一些逻辑到factory,利用angularjs陈列数据以及增加数据为例。springMVC处理请求
- Angularjs 利用 $modal 实现 confirm 弹窗
- 利用angularjs1.4制作的简易滑动门效果
- 利用JavaScript的AngularJS库制作电子名片的方法
- 利用Angularjs实现幻灯片效果