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

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