ng-grid中自定义排序方法sortFn

                       

参考链接:http://stackoverflow.com/questions/29740829/sorting-is-not-working-on-ip-address-column-in-ng-grid

ng-grid字符串默认牌序是字母表出现的先后顺序,如果我们想通过比较字符串的长度来自定义排序方式应该怎么做呢?
   附上示例代码:

html文件:

<!DOCTYPE html><html ng-app="gridDemo"><head>    <title>ngGrid</title>    <script type="text/javascript" src="js/angular.js"></script>    <script type="text/javascript" src="js/jquery.js"></script>    <script type="text/javascript" src="js/ng-grid.js"></script>    <script type="text/javascript" src="js/main.js"></script>    <link rel="stylesheet" href="css/ng-grid.css">    <link rel="stylesheet" href="css/style.css"></head><body><div id="container" ng-controller="gridCtrl">    <div ng-grid="gridOptions" class="gridStyle"></div></div></body></html>
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

js文件:

//要引入ngGrid依赖!var gridDemo = angular.module('gridDemo', ['ngGrid']);gridDemo    .factory('menuData', function () {        return [            {                name: "Moroni",                age: 50,                gender:'male'            },            {                name: "Tiancum",                age: 43,                gender:'231'            },            {                name: "Jacob",                age: 27,                gender:'sfda'            },            {                name: "Nephi",                age: 29,                gender:'mwerale'            },            {                name: "Naphi",                age: 19,                gender:'aaaa'            },            {                name: "Enos",                age: 34,                gender:'female'            }];    })    .controller('gridCtrl', function ($scope, menuData) {        $scope.menuData = menuData;        //自定义排序函数        var mySortFn = function(a,b){            if (a.length > b.length){                return 1;            }else if (a.length < b.length) {                return -1;            }else if(a > b){                return 1;            }else{                return -1;            }        };        $scope.gridOptions = {            data: 'menuData',            columnDefs: [                {                    field: 'age',                     displayName: '年龄'                },                {                    field:'name',                    display:'名字',                    //我们为name添加自定义排序方法                    sortFn: mySortFn                },                {                    field: 'gender',                    displayName: '性别'                }            ]        };    })
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71

数据多了点搞的第代码有点长(主要是我比较喜欢舒展的代码风格。。)

不要忘了添加ngGrid依赖!

原生js中数组里有个sort()方法,这里的使用方式跟它有相似之处,都是引入2个变量a和b(a代表前一个元素,b代表后一个元素,返回值为真的话就把a和b的位置互换,反之则不交换),这里我加了一个如果长度相同则按照字母表顺序排序的方法。

附上运行截图:
   这里写图片描述
   这里写图片描述




此文档的作者:justforuse
Github Pages:justforuse

           

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值