標籤：ztree angularjs
前段時間一直在看AngularJS的資料，感覺是個很好的架構，很想有機會嘗試用它做點什麼。
JQuery ZTree是國內非常不錯的JQuery外掛程式，功能齊全，文檔和API也非常的友好，之前項目上常用此外掛程式。
AngularJS功能雖然非常強大，但UI上提供的外掛程式不像JQuery那麼多，而且只能通過directive定義擴充的UI外掛程式，雖然國外已經提供了一些基於directive的Tree功能實現，但畢竟不像ZTree那樣強大，而且Tree是做項目中很長用的一個準系統。
因此，花了一點時間做了一個例子將ZTree應用到AngularJS中。
頁面代碼
<!doctype html><html lang="en" ng-app="app"><head><meta charset="utf-8"><title>ZTree</title><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: "普通的父節點", 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) {});
頁面效果地址：http://twobugerphp.jd-app.com/ztree.html
實現功能：定義tree這個屬性，使<ultree class="ztree"ng-model="selectNode"></ul>自動變成一個有資料的tree，點擊樹節點，自動變更model 的selectNode。
本文出自 “twobuger” 部落格，請務必保留此出處http://twobuger.blog.51cto.com/8898161/1409004
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
