찾다

집 >웹 프론트엔드 >JS 튜토리얼 >AngularJS_AngularJS에서 jQuery의 zTree 플러그인을 사용하는 방법

AngularJS_AngularJS에서 jQuery의 zTree 플러그인을 사용하는 방법

WBOY
WBOY원래의
2016-05-16 15:04:382144검색

얼마 전 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:'&#63;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}}

app.js

'use strict'; 
 
/* App Module */ 
var appModule = angular.module('app', []); 
appModule.directive('tree', function () { 
  return { 
    require: '&#63;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) { 
            $scope.$apply(function () { 
              ngModel.$setViewValue(treeNode); 
            }); 
          } 
        } 
      }; 
 
      var zNodes = [ 
        { id: 1, pId: 0, name: "普通的父节点", t: "我很普通，随便点我吧", open: true }, 
        { id: 11, pId: 1, name: "叶子节点 - 1", t: "我很普通，随便点我吧" }, 
        { id: 12, pId: 1, name: "叶子节点 - 2", t: "我很普通，随便点我吧" }, 
        { id: 13, pId: 1, name: "叶子节点 - 3", t: "我很普通，随便点我吧" }, 
        { id: 2, pId: 0, name: "NB的父节点", t: "点我可以，但是不能点我的子节点，有本事点一个你试试看？", open: true }, 
        { id: 21, pId: 2, name: "叶子节点2 - 1", t: "你哪个单位的？敢随便点我？小心点儿..", click: false }, 
        { id: 22, pId: 2, name: "叶子节点2 - 2", t: "我有老爸罩着呢，点击我的小心点儿..", click: false }, 
        { id: 23, pId: 2, name: "叶子节点2 - 3", t: "好歹我也是个领导，别普通群众就来点击我..", click: false }, 
        { id: 3, pId: 0, name: "郁闷的父节点", t: "别点我，我好害怕...我的子节点随便点吧...", open: true, click: false }, 
        { id: 31, pId: 3, name: "叶子节点3 - 1", t: "唉，随便点我吧" }, 
        { id: 32, pId: 3, name: "叶子节点3 - 2", t: "唉，随便点我吧" }, 
        { id: 33, pId: 3, name: "叶子节点3 - 3", t: "唉，随便点我吧" } 
      ]; 
      $.fn.zTree.init(element, setting, zNodes); 
    } 
  }; 
}); 
appModule.controller('MyController', function ($scope) {   
});

구현 기능: b3a8e1c30c424a7f20c9d4167b8421e4929d1f5ca49e04fdcb27f9465b944689 트리 노드를 클릭하면 자동으로 트리가 되도록 속성 트리를 정의합니다. 모델의 selectNode.

2016421180004533.png (197×236)

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：함수 호출 stack_javascript 기술을 표시하는 JavaScript 구현 방법다음 기사：함수 호출 stack_javascript 기술을 표시하는 JavaScript 구현 방법

관련 기사

더보기