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

時間 2019-11-06

標籤多種前端框架使用表格控件简体版

原文原文鏈接

近幾年Web前端框架特別流行，好比AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS等。表格控件是咱們在開發中常常要用到的控件。有沒有可以在多種前端控件下都能使用的表格控件？最近研究發現FlexGrid是一款不錯的表格控件，它能支持不少主流的框架。這裏主要介紹在純JavaScript和AngularJS下FlexGrid的使用。javascript

1、在純JavaScript下使用FlexGridcss

HTML文件：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>

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

二、引入app.js和FlexGrid.js文件。java

三、定義一個div元素用於顯示Gridangularjs

App.js文件：ajax

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方法根據傳入的Count產生數據。bootstrap

FlexGrid.js：api

(function (wijmo, data) {
    var cv = data.getData(30);
    var grid = new wijmo.grid.FlexGrid('#grid');
    grid.itemsSource = cv;
 })(wijmo, appData);

在FlexGrid.js中調用data.getData(30)獲取數據30個數據。得到FlexGrid控件，並進行數據綁定。前端框架

下面就是運行結果：

2、在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>

一、引入angular.min.js

二、引入Wijmo相關的文件wijmo.min.js、wijmo.grid.min.js、wijmo.angular.min.js、wijmo.min.css

三、引入app.js和control.js

四、添加NG指令ng-app、ng-controller

五、經過wj-flex-grid指令定義表格，並設置數據源

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);
});

其運行結果和純JS的結果徹底同樣。

經過上面的兩個示例能夠看到不管是在純JS中仍是在AngularJS中使用FlexGrid都很是簡單。尤爲是在AngularJS框架中經過Wijmo自定義的Angular指令wj-flex-grid使用表格控件很容易。Wijmo支持AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS、Ionic等前端框架，就不在一一示例。FlexGrid的功能包括排序、過濾、分組、分頁、單元格合併、凍結、格式化、條件樣式、單元格模板、主題、樹形結構等。