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;
}
copy
<!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="https://www.itxst.com/package/ag-grid/ag-grid-community.js"></script> <link href="https://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>
copy