您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)web開發(fā)中如何在多種前端框架下使用的表格控件的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
一、在純JavaScript下使用FlexGrid
HTML文件:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> <!-- Wijmo --> <link href="styles/vendor/wijmo.min.css" rel="stylesheet" /> <script src="scripts/vendor/wijmo.min.js" type="text/javascript"></script> <script src="scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script> <script src="scripts/app.js" type="text/javascript"></script> <script src="scripts/FlexGrid.js" type="text/javascript"></script> </head> <body> <div id="grid"> </div> </body> </html>
1、 引入Wijmo的JS文件和樣式:wijmo.min.css 、wijmo.min.js、wijmo.grid.min.js
2、 引入app.js和FlexGrid.js文件。
3、 定義一個div元素用于顯示Grid
App.js文件:
var appData = { getData: function (count) { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = new wijmo.collections.ObservableArray(); for (var i = 0; i < count; i++) { data.push({ id: i, country: countries[i % countries.length], date: new Date(2014, i % 12, i % 28), amount: Math.random() * 10000, active: i % 4 === 0 }); } return data; } }
在app.js中定義appData,其中的getData方法根據(jù)傳入的Count產(chǎn)生數(shù)據(jù)。
FlexGrid.js:
(function (wijmo, data) { var cv = data.getData(30); var grid = new wijmo.grid.FlexGrid('#grid'); grid.itemsSource = cv; })(wijmo, appData);
在FlexGrid.js中調(diào)用data.getData(30)獲取數(shù)據(jù)30個數(shù)據(jù)。獲得FlexGrid控件,并進行數(shù)據(jù)綁定。
下面就是運行結(jié)果:
二、在AngularJS下使用FlexGrid
HTML文件:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="scripts/vendor/wijmo.min.js"></script> <script src="scripts/vendor/wijmo.grid.min.js"></script> <script src="scripts/vendor/wijmo.angular.min.js"></script> <link rel="stylesheet" href="styles/vendor/wijmo.min.css" /> <script src="scripts/app.js"></script> <script src="scripts/control.js"></script> </head> <body ng-app="app" ng-controller="appCtrl"> <wj-flex-grid items-source="data" > </wj-flex-grid> </body> </html>
1、 引入angular.min.js
2、 引入Wijmo相關(guān)的文件wijmo.min.js、wijmo.grid.min.js、wijmo.angular.min.js、wijmo.min.css
3、 引入app.js和control.js
4、 添加NG指令ng-app、ng-controller
5、 通過wj-flex-grid指令定義表格,并設(shè)置數(shù)據(jù)源
app.js文件:
var app = angular.module('app', ['wj']);
control.js文件:
app.controller('appCtrl', function ($scope) { // generate some random data function getData(count) { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = new wijmo.collections.ObservableArray(); for (var i = 0; i < count; i++) { data.push({ id: i, country: countries[i % countries.length], date: new Date(2014, i % 12, i % 28), amount: Math.random() * 10000, active: i % 4 == 0 }); } return data; } $scope.data = getData(30); });
其運行結(jié)果和純JS的結(jié)果完全一樣。
通過上面的兩個示例可以看到無論是在純JS中還是在AngularJS中使用FlexGrid都非常簡單。尤其是在AngularJS框架中通過Wijmo自定義的Angular指令wj-flex-grid使用表格控件很容易。Wijmo支持AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS、Ionic等前端框架,就不在一一示例。FlexGrid的功能包括排序、過濾、分組、分頁、單元格合并、凍結(jié)、格式化、條件樣式、單元格模板、主題、樹形結(jié)構(gòu)等。
感謝各位的閱讀!關(guān)于“web開發(fā)中如何在多種前端框架下使用的表格控件”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。