能在多種前端框架下使用的表格控件

近幾年Web前端框架特別流行，比如AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS等。表格控件是我們?cè)陂_發(fā)中常常要用到的控件。有無(wú)能夠在多種前端控件下都能使用的表格控件？最近研究發(fā)現(xiàn)Wijmo中的FlexGrid是1款不錯(cuò)的表格控件，它能支持很多主流的框架。這里主要介紹在純JavaScript和AngularJS下FlexGrid的使用。

1、在純JavaScript下使用FlexGrid

HTML文件：

1、  引入Wijmo的JS文件和樣式：wijmo.min.css 、wijmo.min.js、wijmo.grid.min.js

2、  引入app.js和FlexGrid.js文件。

3、  定義1個(gè)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個(gè)數(shù)據(jù)。取得FlexGrid控件，并進(jìn)行數(shù)據(jù)綁定。

下面就是運(yùn)行結(jié)果：

2、在AngularJS下使用FlexGrid

HTML文件：

1、  引入angular.min.js

2、  引入Wijmo相干的文件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、  通過(guò)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); });

其運(yùn)行結(jié)果和純JS的結(jié)果完全1樣。

通過(guò)上面的兩個(gè)示例可以看到不管是在純JS中還是在AngularJS中使用FlexGrid都非常簡(jiǎn)單。特別是在AngularJS框架中通過(guò)Wijmo自定義的Angular指令wj-flex-grid使用表格控件很容易。Wijmo支持AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS、Ionic等前端框架，就不在逐一示例。FlexGrid的功能包括排序、過(guò)濾、分組、分頁(yè)、單元格合并、凍結(jié)、格式化、條件樣式、單元格模板、主題、樹形結(jié)構(gòu)等。

源代碼下載

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)