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

  angular表格点击序号进行升序,再次点击进行降序排序,在输入框输入信息,出现相对应数据的那一行。

 html:

<input type="text" ng-model="search"/>
<table border="1" cellpadding="0" cellspacing="1" width="400px">
    <tr>
        <th ng-click="click()">编号</th>
        <th ng-click="click1()">姓名</th>
        <th ng-click="click2()">年龄</th>
    </tr>
    <tr ng-repeat="item in data|orderBy:a+b+c|filter:search">
        <td>{{item.number}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
    </tr>
</table>

js:

var app=angular.module(‘mk‘,[]);
        app.controller(‘test‘,function($scope,$http){
                $http.get(‘json.json‘).success(function(data){
                    $scope.data=data.nr
                });
            $scope.a=‘number‘;
            $scope.b=‘name‘;
            $scope.c=‘age‘;
            $scope.click=function(){
                if($scope.a==‘number‘){
                    $scope.a=‘-number‘;
                    $scope.b=‘‘;
                    $scope.c=‘‘;
                }else{
                    $scope.a=‘number‘;
                    $scope.b=‘‘;
                    $scope.c=‘‘;
                }
            };
            $scope.click1=function(){
                if($scope.b==‘name‘){
                    $scope.a=‘‘;
                    $scope.b=‘-name‘;
                    $scope.c=‘‘;
                }else{
                    $scope.a=‘‘;
                    $scope.b=‘name‘;
                    $scope.c=‘‘;
                }
            };
            $scope.click2=function(){
                if($scope.c==‘age‘){
                    $scope.a=‘‘;
                    $scope.b=‘‘;
                    $scope.c=‘-age‘;
                }else{
                    $scope.a=‘‘;
                    $scope.b=‘‘;
                    $scope.c=‘age‘;
                }
            }
        })

此方法还需引用json文件:

{
  "nr":[
    {"number":34,"name":"Angular","age":24},
    {"number":24,"name":"Blue","age":25},
    {"number":14,"name":"Fertn","age":23},
    {"number":43,"name":"Onfer","age":26},
    {"number":36,"name":"Wang","age":21},
    {"number":31,"name":"Linla","age":30},
    {"number":4,"name":"San","age":28},
    {"number":6,"name":"Ring","age":22},
    {"number":76,"name":"Cone","age":31},
    {"number":32,"name":"Perter","age":32},
    {"number":32,"name":"Nert","age":27},
    {"number":15,"name":"Ding","age":29}
  ]
}

我是用过滤器 orderBy:‘id‘:a+b+c来控制排序是升序还是降序,在点击时通过判断他们的来实现我们想要的效果。

你们还有什么简单方法么,拿出来分享一下吧! 

时间: 2024-11-05 15:54:33

轻松Angularjs实现表格按指定列排序的相关文章

shell——按指定列排序

转自http://roclinux.cn/?p=1350 1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. [[email protected] programming]$ cat seq.txtbananaapplepearorange[[email protected] programming]$ sort seq.txtapplebananaorangepear 2 sort的-u选项 它的作

oracle按照指定列排序操作

按照...分组排序后,得到行编号: row_number() over(partition by ... order by ...) 按照...分组排序后,得到相应的列的第一个数据: first_value(列名或列位置) over(partition by ... order by ...) 原文地址:https://www.cnblogs.com/qinjf/p/8410956.html

示例-创建表格-指定行列&amp;删除表格的行和列

<body> <script type="text/javascript"> /* *上面的方法和你麻烦.*既然操作的是表格,*那么最方便的方式就是使用表格节点对象的方法.* *表格是由行组成.表格节点对象中insertRow方法就完成了创建行并添加的动作.* *行是有单元格组成.通过tr节点对象的insertCell来完成.*/function crtTable(){ var oTabNode = document.createElement("ta

jquery实现的统计table表格指定列的单元格值的和

jquery实现的统计t]able表格指定列的单元格值的和:在一些应用中,表格单元格中存放的都是数字,比如学生的分数,那么就有可能将这些分数做加法运算来统计出总分数,下面就通过代码实例介绍一下如何统计某一列单元格中值的和.代码实例: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http

jQuery如何获取表格的指定行和列

jQuery如何获取表格的指定行和列:在堆表格进行操作的时候往往要获取指定的行和咧,也就是需要进行精确的定位,本章节就简单的介绍一下如何实现此功能.一.获取指定的行:由于代码比较简单,这里就不给出完整的代码了,只给出代码片段:1.为表格最后一行单元格添加一个class类. $("#mytable tr:last").find("td").addClass("setcolor") 2. 为表格第一个行单元格添加一个class类. $($("

datatable 给指定的列排序或指定的列不排序

table = $('#dtProcess').autoOptionTable({ "ordering": true,//feu所有的列排序 "columnDefs": [ { "bSortable": false, "aTargets": [ 1,2 ]//指定2,3列不排序 } ] });

获取table表格指定列的所有单元格的内容

获取table表格指定列的所有单元格的内容:本章节介绍一下如何获取表格指定列的所有单元格的内容,这可能在一些应用或者说扩展应用中会需要.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <titl

合并指定表格指定列的相同文本的相邻单元格

//函数说明:合并指定表格(表格id为table_id)指定列(列数为table_colnum)的相同文本的相邻单元格 //参数说明:table_id 为需要进行合并单元格的表格的id.如在HTMl中指定表格 id="table1" ,此参数应为 #table1 //参数说明:table_colnum 为需要合并单元格的所在列.为数字,从最左边第一列为1开始算起. function table_rowspan(table_id, table_colnum) { table_firstt

Excel小技巧-你是否只知道表格按列排序?其实也可以按行排序!excel数据按行排序

Excel小技巧-你是否只知道表格按列排序?其实也可以按行排序!excel数据按行排序.系统默认情况下,数据都是按列进行排序的,可以通过简单的操作,让其进行按行进行排序. [解决方法,教程视频资料如下] 本教程视频资料来源:http://edu.51cto.com/course/15404.html 完整博客资料:http://blog.51cto.com/13172026/2292179 完整视频资料:http://edu.51cto.com/lecturer/13162026.html 原文