参考链接: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>
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: '性别'
}
]
};
})
数据多了点搞的第代码有点长(主要是我比较喜欢舒展的代码风格。。)
不要忘了添加ngGrid依赖!
原生js中数组里有个sort()方法,这里的使用方式跟它有相似之处,都是引入2个变量a和b(a代表前一个元素,b代表后一个元素,返回值为真的话就把a和b的位置互换,反之则不交换),这里我加了一个如果长度相同则按照字母表顺序排序的方法。
附上运行截图:
此文档的作者:justforuse
Github Pages:justforuse