Maison > Article > interface Web > Comment utiliser le plug-in zTree de jQuery dans AngularJS_AngularJS
Comment utiliser le plug-in zTree de jQuery dans AngularJS_AngularJS
- WBOYoriginal
- 2016-05-16 15:04:382049parcourir
J'ai lu les informations sur AngularJS il y a quelque temps, et je pense que c'est un très bon framework. J'aimerais avoir l'opportunité d'essayer de faire quelque chose avec.
jQuery ZTree est un très bon plug-in JQuery en Chine. Il a des fonctions complètes, et la documentation et l'API sont également très conviviales. Ce plug-in a été couramment utilisé dans les projets précédents.
Bien qu'AngularJS soit très puissant, l'interface utilisateur ne fournit pas autant de plug-ins que JQuery, et les plug-ins d'interface utilisateur étendus ne peuvent être définis que via des directives. Bien que certaines implémentations de fonctions Tree basées sur des directives aient été fournies à l'étranger, elles ne sont pas aussi puissantes. comme ZTree après tout. And Tree est une fonction de base souvent utilisée dans les projets.
Par conséquent, j'ai passé un peu de temps à créer un exemple pour appliquer ZTree à AngularJS.
Interaction entre zTree et les données d'arrière-plan
Tout d'abord, vous devez introduire des scripts liés à Angularjs dans la page, tels que des modules (par exemple app.js), des contrôleurs (par exemple contrôleur.js), des scripts Angularjs et utiliser des balises associées, puis introduire les packages de style zTree et zTreed. script, vous pouvez vous référer au code :
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>树型菜单</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 ./../include/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> <script 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.ztree.all-3.5.js" type="text/javascript"></script> </body> </html>
L'arborescence d'instructions est ajoutée à la balise ul ci-dessus, de sorte que lors du chargement d'Angularjs, les données du menu puissent être obtenues via l'arborescence d'instructions. Pour les codes spécifiques, veuillez vous référer aux codes suivants :
var app = angular.module('app', []);
//树形结构
app.directive('tree',function(){
return{
require:'?ngModel',
restrict:'A',
link:function($scope,element,attrs,ngModel){
var setting = {
data :{
simpleData:{
enable:true
}
},
callback:{
beforeClick:function(treeId, treeNode) {//点击菜单时进行的处理
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
window.location.href=treeNode.url;
return true;
}
}
}
};
//向控制器发送消息，进行菜单数据的获取
$scope.$emit("menu",attrs["value"]);//此处attrs["value"]为ul中的value值，此处作为标记使用
//接受控制器返回的菜单的消息
$scope.$on("menuData",function(event,data){
$.fn.zTree.init(element, setting, data);//进行初始化树形菜单
var zTree = $.fn.zTree.getZTreeObj("tree");
var selectName = $("#selectName").val();
if(typeof selectName == "undefined" || selectName == ""){
zTree.selectNode(zTree.getNodeByParam("id","1"));//默认第一个选中
$("#selectName").val(zTree.getSelectedNodes()[0].code);//赋值
}else{
for(var i =0; i<data.length;i++){
if(data[i]["code"] == selectName ){
zTree.selectNode(zTree.getNodeByParam("code", data[i]["code"]));
}
}
}
});
}
}
});
Dans le code ci-dessus, utilisez $scope.$emit("menu",attrs["value"]); pour envoyer les données de requête au contrôleur parent. Vous pouvez accepter ce message dans le code du contrôleur et utiliser $http pour. L'arrière-plan effectue des demandes de données et envoie les données demandées de la base de données au sous-contrôleur. Le code du contrôleur peut être référencé comme suit :
function wtConfigInfo($scope,$http){
//接受子控制器发送的消息
$scope.$on("menu",function(event,params){
$http.get("/commonfuncode").success(function(data){
//发送消息给子控制器
$scope.$broadcast("menuData",dealMenuData(data,params));
});
});
}
De cette façon, l'interaction entre zTree et les données d'arrière-plan est terminée.
Utiliser les instructions pour intégrer des exemples ZTree
<!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 class="brush:php;toolbar:false">
{{selectNode | json}}