参考链接: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