使用AngularJS的过滤器,实现在表格中,点击某一列标题进行排序
<table>
<thead>
<th ng-click="col='cpu';desc=!desc">ip</th>
<th ng-click="col='virtualIp';desc=!desc">服务ip</th>
<th ng-click="col='systemType';desc=!desc">操作系统</th>
<th ng-click="col='cpu';desc=!desc">cpu</th>
<th ng-click="col='memory';desc=!desc">内存</th>
<th ng-click="col='swap';desc=!desc">swap</th>
<th ng-click="col='severity';desc=!desc">告警</th>
</thead>
<tbody>
<tr ng-repeat="x in hostdata|orderBy:col:desc track by x.ip" >
<td>{{x.ip}}</td>
<td>{{x.virtualIp}}</td>
<td>{{x.systemType}}</td>
<td>{{x.cpu}}</td>
<td>{{x.memory}}</td>
<td>{{x.swap}}</td>
<td>{{x.severity}}</td>
</tr>
</tbody>
</table>
js:
$scope.hostdata=res.data.hosts; // 后台拿到的数据
$scope.col = 'severity' //初始以告警排序
$scope.desc = 1 //1为降序,0为升序;
- 1、首先我们需要向控制器中添加”col”和”desc”两个属性,分别用于绑定排序时的属性名称和排序方向,并赋予初始值“severity”和1,表示数据初始化时按“告警”属性的降序排列
- 2、页面的视图模板中,当通过ng-repeat指令复制并显示数据时,调用了”orderBy”过滤器,并带有两个参数;
- 3、第一个冒号后的参数指定排序的属性名,第二个冒号后的参数指定了排序是的方向;该参数默认或缺省时为升序,1为降序,0为升序;
- 4、最后,在各个表头元素的点击(ng-click)事件中,分别对”title”和“desc”属性值进行重置,由于这两个值已与“orderBy”的过滤器的两个参数绑定,所以当这两个值发生变化时,自动改变数据显示时的排序属性名称和方向,最终实现按单击表头属性排序的功能;
- 5、当数据发生变化时(没有track by的情况下),ng-repeat会重新的刷新我们的Dom树,这里的刷新是指的删除掉所有已有的元素,然后重新生成Dom节点,并编号。这会导致卡顿或者性能降低。加入track by这个属性的时候,ng-repeat会按照我们指定的编码去标示一个对象,并在数据发生变化时,去更新这个Dom,而不是重新生成,这里也要求我们指定的对象是唯一的。track by要放在orderBy 之后