Angularjs 表格插件的使用

對於相關的table組件可以使用：UI Grid (ng-grid)，ng-table，smart table，Angular-Datatables，tablelite，kendo-ui中的grid。相關的介紹可以參考http://zhenghaoju700.blog.163.com/blog/static/135859518201521343938228/

對於一般的項目來說 簡單的顯示表格用bootstrap的相關插件或者自己寫也行，對於分頁，我嘗試了用smart-tablel這個組件來寫的，效果感覺還是不錯的。其他的組件本人還沒有親自試驗過。嘿嘿...

效果截圖：

下面是實現的主要方式：

1.安裝

bower install angular-smart-table

2.加入module

angular.module('myApp',['smart-table']

3.HTML

<table st-table="rowCollection" class="table table-striped">
        <thead>
        <tr>
            <th st-sort="firstName">first name</th>
            <th st-sort="lastName">last name</th>
            <th st-sort="birthDate">birth date</th>
            <th st-sort="balance">balance</th>
            <th>email</th>
        </tr>
        <tr>
            <th>
                <input st-search="'firstName'" placeholder="search for firstname" class="input-sm form-control" type="search"/>
            </th>
            <th colspan="4">
                <input st-search placeholder="global search" class="input-sm form-control" type="search"/>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in rowCollection">
            <td>{{row.firstName | uppercase}}</td>
            <td>{{row.lastName}}</td>
            <td>{{row.birthDate | date}}</td>
            <td>{{row.balance | currency}}</td>
            <td><a ng-href="mailto:{{row.email}}">email</a></td>
        </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" class="text-center">
                    <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
                </td>
            </tr>
        </tfoot>
    </table>

4.JavaScript

app.controller('paginationCtrl', ['$scope', function (scope) {
    var
        nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'],
        familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];

    function createRandomItem() {
        var
            firstName = nameList[Math.floor(Math.random() * 4)],
            lastName = familyName[Math.floor(Math.random() * 4)],
            age = Math.floor(Math.random() * 100),
            email = firstName + lastName + '@whatever.com',
            balance = Math.random() * 3000;

        return{
            firstName: firstName,
            lastName: lastName,
            age: age,
            email: email,
            balance: balance
        };
    }

        scope.itemsByPage=15;

    scope.rowCollection = [];
    for (var j = 0; j < 200; j++) {
        scope.rowCollection.push(createRandomItem());
    }
}]);

感覺其實也很簡單，我也只是初學，給自己留個備忘吧，還有其他的組件，慢慢學着使用。