关闭

angularjs表头排序

标签: angularjs
128人阅读 评论(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
查看评论

AngularJS过滤器应用之表头排序

需求解释:表头排序指的是使用列表方式显示数据时,如果用户单击列表中某列头部元素,那么列表中的全部数据将会自动按该列表的属性值自动排序,默认为升序,再次单击为降序;案例如下: 先贴代码:<!doctype html> <html ng-app="a3_4">...
  • xyphf
  • xyphf
  • 2016-11-14 17:23
  • 1733

AngularJS 的小demo——表头排序+表格搜索(过滤器)

使用AngularJS简单实现表头排序和表格搜索的功能,效果如下: 点击表头中的一项,可以根据该列属性对数据进行排序:        程序如下: AngularJS 过滤器-表头排序+表格搜索 body {font-size: 20...
  • qq_15096707
  • qq_15096707
  • 2016-08-21 22:12
  • 3829

Angularjs 前端数据用orderBy排序,单表头和多表头处理,单表头不默认排序

之所以要在单表头的时候,自己写一个过滤器,是因为angularjs内置的orderBy在单表头的时候默认给我升序排序了,而他的排序又只是在视图层面更新,不会更新我的scope域中的数据,可是我需要获取第一行的值,使那一行高亮,并传给另一个服务,获取相关联的其他数据。尝试了半天,把排序字段初始值设置为...
  • qianqianstd
  • qianqianstd
  • 2017-06-06 22:23
  • 1368

Angularjs轻松实现表格按指定列排序

http://www.tuicool.com/articles/q6JJNzy 使用Angularjs的过滤器,可以很容易的实现在表格中,点击某一列标题进行排序,实现过程如下: html代码: table class="table table-border" n...
  • tiramisu_ljh
  • tiramisu_ljh
  • 2017-06-23 11:49
  • 356

AngularJs实现表格点击不同字段排序的功能

主布局里面的代码 h2>我是购物车h2> div class="search"> input type="text" placeholder="输入关键字…" ng-model="serch"...
  • inter_native
  • inter_native
  • 2017-10-16 13:18
  • 261

【AngularJS】表头排序

表头排序是指在使用列表方式显示数据时,用户如果单击列表中某列的表头元素,那么,列表中的全部数据将会自动按该列的属性值自动排序,默认为升序排列,再次单击该列表头元素时,则又变为降序,通过这种方式显示数据,可以快速定位所关注的某项数据,给用户实现这个表头排序的功能。
  • u013451157
  • u013451157
  • 2017-03-04 11:15
  • 196

Angular.js+Bootstrap实现固定表头案例

一、为何要写这篇文章 所在项目使用到bootstrap来作为前端开发组件, 并结合angularJs来与后台通讯。在开发过程要实现每次渲染完表格后要将表头固定,为了实现这个功能小弟也是折腾了一番,网上也找了很多案例,但都不能直接拿来套用。于是决定先下载一款支持固定表头的表格插件(Fixed...
  • huangdi1309
  • huangdi1309
  • 2016-09-11 19:51
  • 3273

Jquery 表头 排序

Jquery 表头 排序 源代码下载地址:http://www.zuidaima.com/share/1550463782128640.htm
  • springmvc_springdata
  • springmvc_springdata
  • 2015-06-07 10:45
  • 959

jquery easyUI 的datagrid 表头排序

datagrid的点击列表头刷新,分为两种,一种是页面刷新,不涉及后台服务器数据,不会从新查询数据库,只会刷新当前页数据; 一种是服务器级刷新,会重新加载全部数据 第一种,页面刷新 1、将服务器对数据项排序设置为false 2、设置field的排序属性为true,sorter的function内容...
  • changjiadashaoye
  • changjiadashaoye
  • 2014-12-10 18:12
  • 4977

angularjs 排序

@{ Layout = null; } Index var app = angular.module("my_app", []); app.controller('my_cont...
  • czh4869623
  • czh4869623
  • 2016-01-24 15:14
  • 1168
    个人资料
    • 访问:22092次
    • 积分:380
    • 等级:
    • 排名:千里之外
    • 原创:16篇
    • 转载:9篇
    • 译文:0篇
    • 评论:1条
    最新评论