ag-grid设置客户端排序sort

ag-grid客户端排序,点击列头进行升序降序或者按自己的要求进行自定义排序。

效果图

ag-grid客户端排序

//定义表格列
var columnDefs = [
    { headerName: '姓名', field: 'name',  },
    { headerName: '生日', field: 'date',  comparator: dateComparator },//自定义排序
    { headerName: '性别', field: 'sex', sortable: false },//sortable为false时禁止排序
    { headerName: '年龄', field: 'age', sort: 'desc' } //年龄按大到小排序
];

//行数据
var rowData = [
    { name: 'itxst.com', sex: '男', age: 100, 'date': '29/08/2005' },
    { name: '李四', sex: '女', age: 5, 'date': '29/08/2005' },
    { name: '王五', sex: '女', age: 6,  'date': '29/08/2001' }
];

//自定义排序
function dateComparator(date1, date2) {
    var date1Number = monthToComparableNumber(date1);
    var date2Number = monthToComparableNumber(date2);
    if (date1Number === null && date2Number === null) {
        return 0;
    }
    if (date1Number === null) {
        return -1;
    }
    if (date2Number === null) {
        return 1;
    }
    return date1Number - date2Number;
}

// eg 29/08/2004 gets converted to 20040829
function monthToComparableNumber(date) {
    if (date === undefined || date === null || date.length !== 10) {
        return null;
    }
    var yearNumber = date.substring(6, 10);
    var monthNumber = date.substring(3, 5);
    var dayNumber = date.substring(0, 2);
    
    var result = (yearNumber * 10000) + (monthNumber * 100) + dayNumber;
    return result;
}

在线试一试

完整代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ag-grid 排序例子</title>
    <script src="http://www.itxst.com/package/ag-grid/ag-grid-community.js"></script>
    <link href="http://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet" />
</head>
<body>
    <div id="myGrid" style="width: 100%;height: 300px;" class="ag-theme-balham"></div>
    <script>
        //定义表格列
        var columnDefs = [
            { headerName: '姓名', field: 'name', },
            { headerName: '生日', field: 'date', comparator: dateComparator },//自定义排序
            { headerName: '性别', field: 'sex', sortable: false },//sortable为false时禁止排序
            { headerName: '年龄', field: 'age', sort: 'desc' } //年龄按大到小排序
        ];

        //行数据
        var rowData = [
            { name: 'itxst.com', sex: '男', age: 100, 'date': '29/08/2005' },
            { name: '李四', sex: '女', age: 5, 'date': '29/08/2005' },
            { name: '王五', sex: '女', age: 6, 'date': '29/08/2001' }
        ];


        //模拟几行数据出来
        for (var i = 1; i < 20; i++) {
            rowData.push({ name: '王五', sex: '女', age: 10 + i, 'date': '29/08/200' + (i % 10) });
        }

        var pinnedBottomRowData = [
            { name: '置顶行2', sex: 'X', age: 111, 'date': '29/08/2011' }
        ];
        //将列和数据赋给gridOptions
        var gridOptions = {
            columnDefs: columnDefs,
            rowData: rowData,
            pinnedBottomRowData: pinnedBottomRowData,
            getRowStyle: function (params) {
                if (params.node.rowPinned) {
                    return { 'font-weight': 'bold', 'color': 'red' };
                }
            },
            onGridReady: function () {
                //表格创建完成后执行的事件
                gridOptions.api.sizeColumnsToFit();//调整表格大小自适应
            },
            defaultColDef: {
                enableRowGroup: true,
                enablePivot: true,
                enableValue: true,
                sortable: true, //开启排序
            },
        };
        //在dom加载完成后 初始化agGrid完成
        document.addEventListener("DOMContentLoaded", function () {
            var eGridDiv = document.querySelector('#myGrid');
            new agGrid.Grid(eGridDiv, gridOptions);
        });

        function dateComparator(date1, date2) {
            var date1Number = monthToComparableNumber(date1);
            var date2Number = monthToComparableNumber(date2);

            if (date1Number === null && date2Number === null) {
                return 0;
            }
            if (date1Number === null) {
                return -1;
            }
            if (date2Number === null) {
                return 1;
            }
            return date1Number - date2Number;
        }

        // eg 29/08/2004 gets converted to 20040829
        function monthToComparableNumber(date) {
            if (date === undefined || date === null || date.length !== 10) {
                return null;
            }

            var yearNumber = date.substring(6, 10);
            var monthNumber = date.substring(3, 5);
            var dayNumber = date.substring(0, 2);

            var result = (yearNumber * 10000) + (monthNumber * 100) + dayNumber;
            return result;
        }
    </script>
</body>
</html>