关闭

angularjs表头排序

标签: angularjs
82人阅读 评论(0) 收藏 举报

使用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 之后
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:15858次
    • 积分:303
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:8篇
    • 译文:0篇
    • 评论:1条
    最新评论