码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS 利用directive集成JQuery ZTree

时间:2014-05-10 04:13:50      阅读:372      评论:0      收藏:0      [点我收藏+]

标签:ztree angularjs

前段时间一直在看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/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) {
});

页面效果地址:http://twobugerphp.jd-app.com/ztree.html

 

实现功能:定义tree这个属性,使<ultree class="ztree"ng-model="selectNode"></ul>自动变成一个有数据的tree,点击树节点,自动变更model 的selectNode。

 

 

 

 

本文出自 “twobuger” 博客,请务必保留此出处http://twobuger.blog.51cto.com/8898161/1409004

AngularJS 利用directive集成JQuery ZTree,布布扣,bubuko.com

AngularJS 利用directive集成JQuery ZTree

标签:ztree angularjs

原文地址:http://twobuger.blog.51cto.com/8898161/1409004

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!