在AngularJS中使用jQuery的zTree插件的方法

首頁

web前端

js教程

在AngularJS中使用jQuery的zTree插件的方法_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:04 PM

angularjavascriptjqueryjs

前段時間一直在看AngularJS的資料，感覺是個很好的框架，很想有機會嘗試用它做點什麼。
jQuery ZTree是國內非常不錯的JQuery插件，功能齊全，文件和API也非常的友好，之前專案上常用此插件。
AngularJS 功能雖然非常強大，但UI上提供的插件不像JQuery那麼多，而且只能透過directive定義擴充的UI插件，雖然國外已經提供了一些基於directive的Tree功能實現，但畢竟不像ZTree那樣強大，而且Tree是做專案中很長用的一個基本功能。
因此，花了一點時間做了一個例子將ZTree應用到AngularJS中。

zTree和後台資料的交互作用
首先，肯定是在頁面中引入Angularjs的相關腳本，例如模組(e.g. app.js)、控制器(e.g. controller.js)、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標籤中加入了指令tree,這樣在載入angularjs中，就可透過指令 tree來進行選單資料的取得。具體的程式碼可參考以下程式碼：

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}}

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。