Rumah >hujung hadapan web >tutorial js >Cara menggunakan pemalam zTree jQuery dalam AngularJS_AngularJS
Cara menggunakan pemalam zTree jQuery dalam AngularJS_AngularJS
- WBOYasal
- 2016-05-16 15:04:382145semak imbas
Saya telah membaca maklumat tentang AngularJS beberapa waktu lalu, dan saya fikir ia adalah rangka kerja yang sangat baik, saya ingin berpeluang mencuba melakukan sesuatu dengannya.
jQuery ZTree ialah pemalam JQuery yang sangat baik di China Ia mempunyai fungsi yang lengkap, dan dokumentasi dan API juga sangat mesra ini telah biasa digunakan dalam projek sebelumnya.
Walaupun AngularJS sangat berkuasa, UI tidak menyediakan pemalam sebanyak JQuery, dan pemalam UI lanjutan hanya boleh ditakrifkan melalui arahan Walaupun beberapa pelaksanaan fungsi Tree berasaskan arahan telah disediakan di luar negara, ia tidak begitu berkuasa sebagai ZTree selepas semua Dan Pokok adalah fungsi asas yang sering digunakan dalam projek.
Oleh itu, saya meluangkan sedikit masa membuat contoh untuk menggunakan ZTree ke AngularJS.
Interaksi antara zTree dan data latar belakang
Pertama sekali, anda mesti memperkenalkan skrip berkaitan Angularjs ke dalam halaman, seperti modul (cth. app.js), pengawal (cth. controller.js), skrip Angularjs dan menggunakan teg yang berkaitan, kemudian memperkenalkan pakej gaya zTree dan zTreed skrip, anda boleh merujuk kepada kod:
<!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>
Pokok arahan ditambahkan pada teg ul di atas, supaya apabila memuatkan angularjs, data menu boleh diperolehi melalui pepohon arahan. Untuk kod tertentu, sila rujuk kod berikut:
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"]));
}
}
}
});
}
}
});
Dalam kod di atas, gunakan $scope.$emit("menu",attrs["value"]); untuk menghantar data permintaan kepada pengawal induk Anda boleh menerima mesej ini dalam kod pengawal dan menggunakan $http untuk Latar belakang melaksanakan permintaan data dan menghantar data yang diminta daripada pangkalan data kepada sub-pengawal. Kod pengawal boleh dirujuk seperti berikut:
function wtConfigInfo($scope,$http){
//接受子控制器发送的消息
$scope.$on("menu",function(event,params){
$http.get("/commonfuncode").success(function(data){
//发送消息给子控制器
$scope.$broadcast("menuData",dealMenuData(data,params));
});
});
}
Dengan cara ini, interaksi antara zTree dan data latar belakang selesai.
Gunakan arahan untuk menyepadukan contoh 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}}