easyui datagrid本地排序后，添加，更新的数据行如何显示在正确位置
easyui的插件datagrid配置某些列的允许排序，并且关闭了远程排序（remoteSort:false），当点击排序列排序后，如果插入的数据行，或者修改某数据行对应排序的列值时，如何使添加或者修改后的数据行按照当前的排序方法进行排序后显示在对应的位置，而不是插入到最后或者显示在原来的位置。
easyui的datagrid没有提供相关的方法，需要自己写代码来实现，思路如下
配置onSortColumn事件记录当前排序的列名称和排序方向，然后获取datagrid当前加载的数据行，依据记录的排序列名称和排序方向对数据行重新排序，调用loadData方法重新加载排序过的数据，就会对datagrid进行重绘，顺序就为排序好。
测试demo，先对price列升序排列，点击"修改第二条记录price为300"这个按钮，第二行数据依据price排序被添加到了最后，添加新数据行也一样。
按price升序排序
修改后的第二行数据
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>easyui datagrid本地排序后，添加，更新的数据行如何显示在正确位置</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
var col, order;
$(function () {
var data = [
{ code: 'code1', name: 'name1', price: 100 },
{ code: 'code2', name: 'name2', price: 50 },
{ code: 'code3', name: 'name3', price: 150 },
{ code: 'code4', name: 'name4', price: 200 }
];
$('#dg').datagrid({
width: 400,
onSortColumn: function (pcol, porder) { col = pcol; order = porder; },//记录排序方法
remoteSort: false,//本地排序
columns: [[
{ field: 'code', title: 'Code', width: 100 },
{ field: 'name', title: 'Name', width: 100 },
{ field: 'price', title: 'Price', width: 100, align: 'right', sortable: true}]]
}).datagrid('loadData', data);
});
//排序处理函数
function sortFunction(a, b) { return a[col] > b[col] ? (order == 'desc' ? -1 : 1) : (order == 'asc' ? 1 : -1); }
function updateRow(index,price) {
if (!col) { alert('请先点击price列头进行排序！'); return false; }
//更新行并且获取数据行集合，注意getData返回的是{ total=4, rows:[{}....]}类似的数据
var rows = $('#dg').datagrid('updateRow', { index: index, row: { price: price} }).datagrid('getData').rows;
rows.sort(sortFunction); //对数据行集合进行排序
$('#dg').datagrid('loadData', rows);//加载数据，删除原来dataGrid绘制的数据用排序好的更新datagrid UI
}
function appendRow(price) {
if (!col) { alert('请先点击price列头进行排序！'); return false; }
var rows = $('#dg').datagrid('appendRow', { price: price, code: 'codeInsert', name: 'nameInsert' }).datagrid('getData').rows;
rows.sort(sortFunction);
$('#dg').datagrid('loadData', rows);
}
</script>
</head>
<body>
<h1>点击下面的按钮前请先对price进行排序，否则不执行操作</h1>
<div><input type="button" value="修改第二条记录price为300" onclick="updateRow(1,300)" /> <input type="button" value="新添加price为300的行" onclick="appendRow(300)" /></div>
<table id="dg"></table>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：easyui datagrid本地排序后，添加，更新的数据行如何显示在正确位置