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>

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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页