얼마 전 AngularJS에 대한 정보를 읽었는데, 매우 좋은 프레임워크라고 생각합니다. 기회가 되어 AngularJS로 뭔가를 해보고 싶습니다.
jQuery ZTree는 중국에서 매우 뛰어난 JQuery 플러그인입니다. 완벽한 기능을 갖추고 있으며 문서와 API도 매우 친숙합니다. 이 플러그인은 이전 프로젝트에서 일반적으로 사용되었습니다.
AngularJS는 매우 강력하지만 UI는 JQuery만큼 많은 플러그인을 제공하지 않으며 확장 UI 플러그인은 지시문을 통해서만 정의할 수 있습니다. 일부 지시문 기반 Tree 함수 구현이 해외에서 제공되지만 그다지 강력하지는 않습니다. 결국 ZTree와 마찬가지로 Tree는 프로젝트에서 자주 사용되는 기본 기능입니다.
그래서 AngularJS에 ZTree를 적용하는 예제를 만드는데 시간을 조금 투자했습니다.
zTree와 배경 데이터의 상호 작용
우선 모듈(예: app.js), 컨트롤러(예: Controller.js), Angularjs 스크립트 등 Angularjs 관련 스크립트를 페이지에 도입하고 관련 태그를 사용한 다음 zTree 스타일 패키지와 zTreed를 도입해야 합니다. 스크립트, 코드를 참조할 수 있습니다:
<!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>
위의 ul 태그에 명령어 트리를 추가해 Angularjs 로딩 시 명령어 트리를 통해 메뉴 데이터를 얻을 수 있도록 했습니다. 구체적인 코드는 다음 코드를 참고하세요.
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"]));
}
}
}
});
}
}
});
위 코드에서 $scope.$emit("menu",attrs["value"]);를 사용하여 상위 컨트롤러에 요청 데이터를 보냅니다. 컨트롤러 코드에서 이 메시지를 수락하고 $http를 사용하여 백그라운드는 데이터 요청을 수행하고 데이터베이스에서 요청된 데이터를 하위 컨트롤러로 보냅니다. 컨트롤러의 코드는 다음과 같이 참조할 수 있습니다.
function wtConfigInfo($scope,$http){
//接受子控制器发送的消息
$scope.$on("menu",function(event,params){
$http.get("/commonfuncode").success(function(data){
//发送消息给子控制器
$scope.$broadcast("menuData",dealMenuData(data,params));
});
});
}
이렇게 하면 zTree와 배경 데이터 간의 상호 작용이 완료됩니다.
지침을 사용하여 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}}