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.安装

1 bower install angular-smart-table

2.加入module

1 angular.module(‘myApp‘,[‘smart-table‘]

3.HTML

 1 <table st-table="rowCollection" class="table table-striped">
 2         <thead>
 3         <tr>
 4             <th st-sort="firstName">first name</th>
 5             <th st-sort="lastName">last name</th>
 6             <th st-sort="birthDate">birth date</th>
 7             <th st-sort="balance">balance</th>
 8             <th>email</th>
 9         </tr>
10         <tr>
11             <th>
12                 <input st-search="‘firstName‘" placeholder="search for firstname" class="input-sm form-control" type="search"/>
13             </th>
14             <th colspan="4">
15                 <input st-search placeholder="global search" class="input-sm form-control" type="search"/>
16             </th>
17         </tr>
18         </thead>
19         <tbody>
20         <tr ng-repeat="row in rowCollection">
21             <td>{{row.firstName | uppercase}}</td>
22             <td>{{row.lastName}}</td>
23             <td>{{row.birthDate | date}}</td>
24             <td>{{row.balance | currency}}</td>
25             <td><a ng-href="mailto:{{row.email}}">email</a></td>
26         </tr>
27         </tbody>
28         <tfoot>
29             <tr>
30                 <td colspan="5" class="text-center">
31                     <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
32                 </td>
33             </tr>
34         </tfoot>
35     </table>

4.JavaScript

 1 app.controller(‘paginationCtrl‘, [‘$scope‘, function (scope) {
 2     var
 3         nameList = [‘Pierre‘, ‘Pol‘, ‘Jacques‘, ‘Robert‘, ‘Elisa‘],
 4         familyName = [‘Dupont‘, ‘Germain‘, ‘Delcourt‘, ‘bjip‘, ‘Menez‘];
 5
 6     function createRandomItem() {
 7         var
 8             firstName = nameList[Math.floor(Math.random() * 4)],
 9             lastName = familyName[Math.floor(Math.random() * 4)],
10             age = Math.floor(Math.random() * 100),
11             email = firstName + lastName + ‘@whatever.com‘,
12             balance = Math.random() * 3000;
13
14         return{
15             firstName: firstName,
16             lastName: lastName,
17             age: age,
18             email: email,
19             balance: balance
20         };
21     }
22
23         scope.itemsByPage=15;
24
25     scope.rowCollection = [];
26     for (var j = 0; j < 200; j++) {
27         scope.rowCollection.push(createRandomItem());
28     }
29 }]);

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