jQuery EasyUI 数据网格 - 设置排序
jQuery EasyUI 数据网格 - 设置排序
jQuery EasyUI 是一个强大的Web UI库，它具有丰富的UI组件，其中最常用的是数据网格(DataGrid)。数据网格是一种大规模数据集的UI元素，它使用户可以以各种方式浏览、排序和过滤数据。
数据网格默认情况下可以通过标题行单击来进行排序，但是也可以通过设置参数来更改默认的排序设置。
设置排序
数据网格排序可以通过设置 sortName 和 sortOrder 属性来实现。
sortName
sortName 属性是一个字符串，它代表要排序列的名称，该属性可以在网格的初始化配置中设置。
以下是示例代码：
$('#datagrid').datagrid({
url: 'data.json',
columns: [[
{field:'id',title:'ID',width:100,sortable:true},
{field:'name',title:'Name',width:100,sortable:true},
{field:'price',title:'Price',width:100,align:'right',sortable:true},
{field:'quantity',title:'Quantity',width:100,align:'right',sortable:true}
]],
sortName: 'id' // 通过id列排序
});
sortOrder
sortOrder 属性可用于设置排序顺序。
以下是示例代码：
$('#datagrid').datagrid({
url: 'data.json',
columns: [[
{field:'id',title:'ID',width:100,sortable:true},
{field:'name',title:'Name',width:100,sortable:true},
{field:'price',title:'Price',width:100,align:'right',sortable:true},
{field:'quantity',title:'Quantity',width:100,align:'right',sortable:true}
]],
sortName: 'id',
sortOrder: 'desc' // 以降序排序
});
处理排序事件
为了在数据网格中处理排序事件，可以使用 onSortColumn 事件，该事件将在网格列被排序时触发。
以下是示例代码：
$('#datagrid').datagrid({
url: 'data.json',
columns: [[
{field:'id',title:'ID',width:100,sortable:true},
{field:'name',title:'Name',width:100,sortable:true},
{field:'price',title:'Price',width:100,align:'right',sortable:true},
{field:'quantity',title:'Quantity',width:100,align:'right',sortable:true}
]],
sortName: 'id',
sortOrder: 'desc',
onSortColumn: function(sort, order){
alert('sort: ' + sort + ', order: ' + order);
}
});
onSortColumn 事件包含两个参数：
sort：排序的字段名称。order：排序的顺序，可以是 ‘asc’(升序) 或 ‘desc’(降序)。
结论
通过设置数据网格的 sortName 和 sortOrder 属性，可以实现网格数据的排序。还可以使用 onSortColumn 事件来处理排序事件。掌握这些属性和事件，可以使数据网格能够更好地满足用户需求。