Rumah > Artikel > hujung hadapan web > Cara menggunakan pemalam zTree jQuery dalam AngularJS_AngularJS

Cara menggunakan pemalam zTree jQuery dalam AngularJS_AngularJS

WBOYasal: 2016-05-16 15:04:382052semak 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:'&#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"])); 
            } 
          } 
        } 
      }); 
 
    } 
  } 
});

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

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) {   
});

Fungsi pelaksanaan: Tentukan pepohon atribut supaya b3a8e1c30c424a7f20c9d4167b8421e4929d1f5ca49e04fdcb27f9465b944689 secara automatik menjadi pepohon dengan data Klik pada nod pepohon untuk menukar secara automatik pilihNode model.

2016421180004533.png (197×236)

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript melaksanakan kaedah untuk memaparkan kemahiran stack_javascript panggilan fungsiArtikel seterusnya：JavaScript melaksanakan kaedah untuk memaparkan kemahiran stack_javascript panggilan fungsi

Artikel berkaitan

Lihat lagi