AngularJS利用directive集成JQueryZTree

前段時(shí)間一直在看AngularJS的資料，感覺是個(gè)很好的框架，很想有機(jī)會(huì)嘗試用它做點(diǎn)什么。

成都創(chuàng)新互聯(lián)公司主營(yíng)繁峙網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app開發(fā)定制,繁峙h5重慶小程序開發(fā)搭建,繁峙網(wǎng)站營(yíng)銷推廣歡迎繁峙等地區(qū)企業(yè)咨詢

JQuery ZTree是國(guó)內(nèi)非常不錯(cuò)的JQuery插件，功能齊全，文檔和API也非常的友好，之前項(xiàng)目上常用此插件。

AngularJS功能雖然非常強(qiáng)大，但UI上提供的插件不像JQuery那么多，而且只能通過(guò)directive定義擴(kuò)展的UI插件，雖然國(guó)外已經(jīng)提供了一些基于directive的Tree功能實(shí)現(xiàn)，但畢竟不像ZTree那樣強(qiáng)大，而且Tree是做項(xiàng)目中很長(zhǎng)用的一個(gè)基本功能。

因此，花了一點(diǎn)時(shí)間做了一個(gè)例子將ZTree應(yīng)用到AngularJS中。

頁(yè)面代碼

<!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: "普通的父節(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)，別普通群眾就來(lái)點(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) {
});

頁(yè)面效果地址：http://twobugerphp.jd-app.com/ztree.html

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

網(wǎng)站欄目：AngularJS利用directive集成JQueryZTree
文章分享：http://muchs.cn/article2/geceoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站導(dǎo)航、網(wǎng)站制作、網(wǎng)站排名、ChatGPT、關(guān)鍵詞優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容