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

感觉其实也很简单，我也只是初学，给自己留个备忘吧，还有其他的组件，慢慢学着使用。