jEasyUI 自定义排序学习笔记
什么是 jEasyUI?
jEasyUI 是一个基于 jQuery 的 UI 组件库,提供了对话框、提示框、表格等常用 UI 组件的封装,使用简单方便。
为什么需要自定义排序?
在实际项目中,有时数据的排序规则并不是按照数据库中默认的升序或降序排列的。这时我们就需要进行自定义排序。
如何进行自定义排序?
jEasyUI 提供了 sorter
属性,可以用来指定自定义的排序方法。
例如,我们有一个包含多个对象的数组:
javascriptCopy Codevar data = [
{ id: 1, name: 'Tom', age: 20 },
{ id: 2, name: 'Jerry', age: 18 },
{ id: 3, name: 'Mike', age: 22 }
];
我们想要按照年龄从大到小排序,代码如下:
javascriptCopy Code$('#datagrid').datagrid({
data: data,
columns:[[
{ field: 'id', title: 'ID', width: 50 },
{ field: 'name', title: 'Name', width: 100 },
{
field: 'age',
title: 'Age',
width: 100,
sorter: function(a, b) {
return b.age - a.age;
}
}
]]
});
上面的代码中,我们在 age
列中添加了 sorter
属性,并指定了一个自定义的排序方法。该方法返回值大于 0,表示 a 在 b 之后;小于 0,表示 a 在 b 之前;等于 0,表示 a 和 b 相同。
这样我们就可以根据自定义的规则对数据进行排序了。
示例代码
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jEasyUI 自定义排序</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/easyui/1.6.10/themes/default/easyui.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/easyui/1.6.10/themes/icon.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcss.com/easyui/1.6.10/jquery.easyui.min.js"></script>
<script>
$(function() {
var data = [
{ id: 1, name: 'Tom', age: 20 },
{ id: 2, name: 'Jerry', age: 18 },
{ id: 3, name: 'Mike', age: 22 }
];
$('#datagrid').datagrid({
data: data,
columns:[[
{ field: 'id', title: 'ID', width: 50 },
{ field: 'name', title: 'Name', width: 100 },
{
field: 'age',
title: 'Age',
width: 100,
sorter: function(a, b) {
return b.age - a.age;
}
}
]]
});
});
</script>
</head>
<body>
<table id="datagrid"></table>
</body>
</html>
运行该示例代码,可以看到按照年龄从大到小排序的表格。
总结
通过 jEasyUI 提供的 sorter
属性,我们可以方便地进行自定义排序。