在AngularJS中用法jQuery的zTree插件的方法_

1、在AngularJS中用法jQuery的zTree插件的方法_ 這篇文章主要介紹了在AngularJS中用法jQuery的zTree插件的方法,Angular中集成了jqLite,但還不是完全版的jQuery,需要的伴侶可以參考下 前段時(shí)間始終在看AngularJS的資料，感覺(jué)是個(gè)很好的框架，很想有機(jī)會(huì)嘗試用它做點(diǎn)什么。 jQuery ZTree是國(guó)內(nèi)特別不錯(cuò)的JQuery插件，功能齊全，文檔和API也特別的友好，之前項(xiàng)目上常用此插件。 AngularJS 功能雖然特別強(qiáng)大，但UI上供應(yīng)的插件不像JQuery那么多，而且只能通過(guò)directive定義擴(kuò)展的UI插件，雖然國(guó)外已經(jīng)供應(yīng)了一些基于

2、directive的Tree功能實(shí)現(xiàn)，但到底不像ZTree那樣強(qiáng)大，而且Tree是做項(xiàng)目中很長(zhǎng)用的一個(gè)基本功能。 因此，花了一點(diǎn)時(shí)間做了一個(gè)例子將ZTree應(yīng)用到AngularJS中。 zTree和后臺(tái)數(shù)據(jù)的交互 首先，確定是在頁(yè)面中引入Angularjs的相關(guān)腳本，例如模塊(e.g. app.js)、掌握器(e.g. controller.js)、Angularjs的腳本并進(jìn)行相關(guān)標(biāo)記的用法，然后引入zTree的樣式包和zTreed 腳本，可以參看一下代碼： !DOCTYPE html html lang=zh-CN ng-app=app head meta charset=utf-8 me

3、ta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width, initial-scale=1 title樹(shù)型菜單/title link href=plugins/bootstrap-3.3.5/css/bootstrap.min.css rel=stylesheet link href=css/zTreeStyle.css rel=stylesheet /head % include ././include/header.html % % include ././incl

4、ude/top-menu.html % div id=content class=content clearfix ng-controller=wtConfigInfo ul tree id=tree style=font:normal 12px/35px Arial;color:#dcdcdc; class=ztree ng-model=selectNode value=1 /div % include ././include/footer.html % script src=plugins/jquery-1.11.3.min.js type=text/javascript/script s

5、cript src=plugins/bootstrap-3.3.5/js/bootstrap.min.js type=text/javascript/script script src=./js/angular.min.js type=text/javascript/script script src=./js/angular/app.js type=text/javascript/script script src=./js/angular/controllers.js type=text/javascript/script script src=./plugins/zTree/jquery

6、.ztree.all-3.5.js type=text/javascript/script /body /html 在上面的在ul標(biāo)簽中添加了指令tree,這樣在加載angularjs中，就可通過(guò)指令 tree來(lái)進(jìn)行菜單數(shù)據(jù)的獵取。具體的代碼可參考以下代碼： var app = angular.module(app, ); /樹(shù)形結(jié)構(gòu) app.directive(tree,function() return require:?ngModel, restrict:A, link:function($scope,element,attrs,ngModel) var setting = data :

7、 simpleData: enable:true , callback: beforeClick:function(treeId, treeNode) /點(diǎn)擊菜單時(shí)進(jìn)行的處理 var zTree = $.fn.zTree.getZTreeObj(tree); if (treeNode.isParent) zTree.expandNode(treeNode); return false; else window.location.href=treeNode.url; return true; ; /向掌握器發(fā)送消息，進(jìn)行菜單數(shù)據(jù)的獵取 $scope.$emit(menu,attrsvalue);

8、/此處attrsvalue為ul中的value值，此處作為標(biāo)記用法 /接受掌握器返回的菜單的消息 $scope.$on(menuData,function(event,data) $.fn.zTree.init(element, setting, data);/進(jìn)行初始化樹(shù)形菜單 var zTree = $.fn.zTree.getZTreeObj(tree); var selectName = $(#selectName).val(); if(typeof selectName = undefined | selectName = ) zTree.selectNode(zTree.getNo

9、deByParam(id,1);/默認(rèn)第一個(gè)選中 $(#selectName).val(zTree.getSelectedNodes()0.code);/賦值 else for(var i =0; idata.length;i+) if(dataicode = selectName ) zTree.selectNode(zTree.getNodeByParam(code, dataicode); ); ); 在上述代碼中，用法$scope.$emit(menu,attrsvalue);向父掌握器發(fā)送懇求數(shù)據(jù)，在掌握器代碼中可以接受此消息，并用法$http向后臺(tái)進(jìn)行數(shù)據(jù)的懇求，并將從數(shù)據(jù)庫(kù)中懇求

10、來(lái)的數(shù)據(jù)發(fā)送個(gè)子掌握器。掌握器的代碼可參考如下： function wtConfigInfo($scope,$http) /接受子掌握器發(fā)送的消息 $scope.$on(menu,function(event,params) $http.get(/commonfuncode).success(function(data) /發(fā)送消息給子掌握器 $scope.$broadcast(menuData,dealMenuData(data,params); ); ); 這樣，就完成了zTree和后臺(tái)數(shù)據(jù)的交互。 利用指令集成ZTree的實(shí)例 !doctype html html lang=en ng-

11、app=app head meta charset=utf-8 titleZTree/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.a

12、ll-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.direc

13、tive(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)

14、 $scope.$apply(function () ngModel.$setViewValue(treeNode); ); ; var zNodes = id: 1, pId: 0, name: 一般的父節(jié)點(diǎn), t: 我很一般，任憑點(diǎn)我吧, open: true , id: 11, pId: 1, name: 葉子節(jié)點(diǎn) - 1, t: 我很一般，任憑點(diǎn)我吧 , id: 12, pId: 1, name: 葉子節(jié)點(diǎn) - 2, t: 我很一般，任憑點(diǎn)我吧 , id: 13, pId: 1, name: 葉子節(jié)點(diǎn) - 3, t: 我很一般，任憑點(diǎn)我吧 , id: 2, pId: 0, name:

15、NB的父節(jié)點(diǎn), t: 點(diǎn)我可以，但是不能點(diǎn)我的子節(jié)點(diǎn)，有本領(lǐng)點(diǎn)一個(gè)你試試看？, open: true , id: 21, pId: 2, name: 葉子節(jié)點(diǎn)2 - 1, t: 你哪個(gè)單位的？敢任憑點(diǎn)我？當(dāng)心點(diǎn)兒., click: false , id: 22, pId: 2, name: 葉子節(jié)點(diǎn)2 - 2, t: 我有老爸罩著呢，點(diǎn)擊我的當(dāng)心點(diǎn)兒., click: false , id: 23, pId: 2, name: 葉子節(jié)點(diǎn)2 - 3, t: 好歹我也是個(gè)領(lǐng)導(dǎo)，別一般群眾就來(lái)點(diǎn)擊我., click: false , id: 3, pId: 0, name: 郁悶的父節(jié)點(diǎn), t: 別點(diǎn)我，我好可怕.我的子節(jié)點(diǎn)任憑點(diǎn)吧., open: true, click: false , id: 31, pId: 3, name: 葉子節(jié)點(diǎn)3 - 1, t: 唉，任憑點(diǎn)我吧 , id: 32, pId: 3, name: 葉子節(jié)點(diǎn)3 - 2, t: 唉，任憑點(diǎn)我吧 , id: 33, pId