欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2016年04月21日 18:03:19   作者：喬磊_1990  
這篇文章主要介紹了在AngularJS中使用jQuery的zTree插件的方法,Angular中集成了jqLite,但還不是完全版的jQuery,需要的朋友可以參考下

前段時(shí)間一直在看AngularJS的資料，感覺是個(gè)很好的框架，很想有機(jī)會(huì)嘗試用它做點(diǎn)什么。
jQuery ZTree是國內(nèi)非常不錯(cuò)的JQuery插件，功能齊全，文檔和API也非常的友好，之前項(xiàng)目上常用此插件。
AngularJS 功能雖然非常強(qiáng)大，但UI上提供的插件不像JQuery那么多，而且只能通過directive定義擴(kuò)展的UI插件，雖然國外已經(jīng)提供了一些基于 directive的Tree功能實(shí)現(xiàn)，但畢竟不像ZTree那樣強(qiáng)大，而且Tree是做項(xiàng)目中很長用的一個(gè)基本功能。
因此，花了一點(diǎn)時(shí)間做了一個(gè)例子將ZTree應(yīng)用到AngularJS中。

zTree和后臺(tái)數(shù)據(jù)的交互
首先，肯定是在頁面中引入Angularjs的相關(guān)腳本，例如模塊(e.g. app.js)、控制器(e.g. controller.js)、Angularjs的腳本并進(jìn)行相關(guān)標(biāo)記的使用，然后引入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標(biāo)簽中添加了指令tree,這樣在加載angularjs中，就可通過指令 tree來進(jìn)行菜單數(shù)據(jù)的獲取。具體的代碼可參考以下代碼：

var app = angular.module('app', []); 
//樹形結(jié)構(gòu) 
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) {//點(diǎn)擊菜單時(shí)進(jìn)行的處理 
            var zTree = $.fn.zTree.getZTreeObj("tree"); 
            if (treeNode.isParent) { 
              zTree.expandNode(treeNode); 
              return false; 
            } else { 
              window.location.href=treeNode.url; 
              return true; 
            } 
          } 
        } 
      }; 
      //向控制器發(fā)送消息，進(jìn)行菜單數(shù)據(jù)的獲取 
      $scope.$emit("menu",attrs["value"]);//此處attrs["value"]為ul中的value值，此處作為標(biāo)記使用 
      //接受控制器返回的菜單的消息 
      $scope.$on("menuData",function(event,data){ 
        $.fn.zTree.init(element, setting, data);//進(jìn)行初始化樹形菜單 
        var zTree = $.fn.zTree.getZTreeObj("tree"); 
        var selectName = $("#selectName").val(); 
        if(typeof selectName == "undefined" || selectName == ""){ 
          zTree.selectNode(zTree.getNodeByParam("id","1"));//默認(rèn)第一個(gè)選中 
          $("#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"]);向父控制器發(fā)送請求數(shù)據(jù)，在控制器代碼中可以接受此消息，并使用$http向后臺(tái)進(jìn)行數(shù)據(jù)的請求，并將從數(shù)據(jù)庫中請求來的數(shù)據(jù)發(fā)送個(gè)子控制器?？刂破鞯拇a可參考如下：

function wtConfigInfo($scope,$http){ 
   
  //接受子控制器發(fā)送的消息 
  $scope.$on("menu",function(event,params){ 
    $http.get("/commonfuncode").success(function(data){ 
      //發(fā)送消息給子控制器 
      $scope.$broadcast("menuData",dealMenuData(data,params)); 
    }); 
  }); 
}

這樣，就完成了zTree和后臺(tái)數(shù)據(jù)的交互。


利用指令集成ZTree的實(shí)例

<!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> 
    {{selectNode | json}} 
  </pre> 
 
</body> 
</html>

 app.js

'use strict'; 
 
/* App Module */ 
var appModule = angular.module('app', []); 
appModule.directive('tree', function () { 
  return { 
    require: '?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: "普通的父節(jié)點(diǎn)", t: "我很普通，隨便點(diǎn)我吧", open: true }, 
        { id: 11, pId: 1, name: "葉子節(jié)點(diǎn) - 1", t: "我很普通，隨便點(diǎn)我吧" }, 
        { id: 12, pId: 1, name: "葉子節(jié)點(diǎn) - 2", t: "我很普通，隨便點(diǎn)我吧" }, 
        { id: 13, pId: 1, name: "葉子節(jié)點(diǎn) - 3", t: "我很普通，隨便點(diǎn)我吧" }, 
        { id: 2, pId: 0, name: "NB的父節(jié)點(diǎn)", t: "點(diǎn)我可以，但是不能點(diǎn)我的子節(jié)點(diǎn)，有本事點(diǎn)一個(gè)你試試看？", open: true }, 
        { id: 21, pId: 2, name: "葉子節(jié)點(diǎn)2 - 1", t: "你哪個(gè)單位的？敢隨便點(diǎn)我？小心點(diǎn)兒..", click: false }, 
        { id: 22, pId: 2, name: "葉子節(jié)點(diǎn)2 - 2", t: "我有老爸罩著呢，點(diǎn)擊我的小心點(diǎn)兒..", click: false }, 
        { id: 23, pId: 2, name: "葉子節(jié)點(diǎn)2 - 3", t: "好歹我也是個(gè)領(lǐng)導(dǎo)，別普通群眾就來點(diǎn)擊我..", click: false }, 
        { id: 3, pId: 0, name: "郁悶的父節(jié)點(diǎn)", t: "別點(diǎn)我，我好害怕...我的子節(jié)點(diǎn)隨便點(diǎn)吧...", open: true, click: false }, 
        { id: 31, pId: 3, name: "葉子節(jié)點(diǎn)3 - 1", t: "唉，隨便點(diǎn)我吧" }, 
        { id: 32, pId: 3, name: "葉子節(jié)點(diǎn)3 - 2", t: "唉，隨便點(diǎn)我吧" }, 
        { id: 33, pId: 3, name: "葉子節(jié)點(diǎn)3 - 3", t: "唉，隨便點(diǎn)我吧" } 
      ]; 
      $.fn.zTree.init(element, setting, zNodes); 
    } 
  }; 
}); 
appModule.controller('MyController', function ($scope) {   
});

實(shí)現(xiàn)功能：定義tree這個(gè)屬性，使<ul tree class="ztree" ng-model="selectNode"></ul>自動(dòng)變成一個(gè)有數(shù)據(jù)的tree，點(diǎn)擊樹節(jié)點(diǎn)，自動(dòng)變更model 的selectNode。

2016421180004533.png (197×236)

相關(guān)文章

最新評(píng)論