Heim > Artikel > Web-Frontend > So verwenden Sie das zTree-Plug-in von jQuery in AngularJS_AngularJS
So verwenden Sie das zTree-Plug-in von jQuery in AngularJS_AngularJS
- WBOYOriginal
- 2016-05-16 15:04:382098Durchsuche
Ich habe die Informationen über AngularJS vor einiger Zeit gelesen und denke, dass es ein sehr gutes Framework ist, mit dem ich gerne etwas ausprobieren würde.
jQuery ZTree ist ein sehr gutes JQuery-Plugin in China. Es verfügt über umfassende Funktionen und die Dokumentation und API ist auch in früheren Projekten sehr benutzerfreundlich.
Obwohl AngularJS sehr leistungsfähig ist, bietet die Benutzeroberfläche nicht so viele Plug-Ins wie JQuery, und erweiterte UI-Plug-Ins können nur über Anweisungen definiert werden. Obwohl im Ausland einige direktivenbasierte Implementierungen von Baumfunktionen bereitgestellt wurden, sind sie nicht so leistungsstark Schließlich handelt es sich bei ZTree um eine Grundfunktion, die häufig in Projekten verwendet wird.
Deshalb habe ich ein wenig Zeit damit verbracht, ein Beispiel für die Anwendung von ZTree auf AngularJS zu erstellen.
Interaktion zwischen zTree und Hintergrunddaten
Zunächst müssen Sie Angularjs-bezogene Skripte in die Seite einführen, z. B. Module (z. B. app.js), Controller (z. B. controller.js), Angularjs-Skripte und verwandte Tags verwenden, und dann zTree-Stilpakete und zTreed einführen Skript können Sie auf den Code verweisen:
<!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>
Im Obigen wird der Anweisungsbaum zum ul-Tag hinzugefügt, sodass beim Laden von AngularJS die Menüdaten über den Anweisungsbaum abgerufen werden können. Spezifische Codes finden Sie in den folgenden Codes:
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"]));
}
}
}
});
}
}
});
Verwenden Sie im obigen Code $scope.$emit("menu",attrs["value"]); um Anforderungsdaten an den übergeordneten Controller zu senden. Sie können diese Nachricht im Controller-Code akzeptieren und $http verwenden Der Hintergrund führt Datenanfragen durch und sendet die angeforderten Daten von der Datenbank an den Untercontroller. Der Code des Controllers kann wie folgt referenziert werden:
function wtConfigInfo($scope,$http){
//接受子控制器发送的消息
$scope.$on("menu",function(event,params){
$http.get("/commonfuncode").success(function(data){
//发送消息给子控制器
$scope.$broadcast("menuData",dealMenuData(data,params));
});
});
}
Auf diese Weise wird die Interaktion zwischen zTree und Hintergrunddaten abgeschlossen.
Verwenden Sie Anweisungen, um ZTree-Beispiele zu integrieren
<!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}}