easyui datagrid 点击列表头排序出现错乱的原因

有些列对应的row的属性没有，显示是通过formatter经过一些其它有的列计算之后返回的

比如 返回的数据格式是

{

...

rows:[

{ a: 'a1', b : 'b1'}

...

]

}

即表数据的每行中有两中列， a 和 b

我们添加显示第三个列 ， 显示a、b之和

于是我们这么做

$("#vi-datagrid").datagrid({

showFooter : true,

pagination: true,

singleSelect: true,

remoteSort : false,

height : 330,

columns : [ [ {

field : "a",

title : "a列",

halign: "center" ,

sortable : true,

align: "center",

width : 80

}, {

field : "b",

title : "b列",

sortable : true,

halign: "center" ,

align: "center",

width : 50

}, {

field : "ab",

title : "c列",

halign: "center" ,

sortable : true,

align: "center",

width : 80,

formatter : function(value, row, index) {

return row.a + row.b;

}

...

这时a、b列排序都没有问题, 但是c列有问题

原因在于 easyui排序时通过 field 名称到row数据中去通过 row[ field] 找不到相应的数据(文末附相应的eausyui源码)

解决办法 , formatter方法上添加row相应的属性和值, 如 c 列的formatter

formatter : function(value, row, index) {

row['ab'] = row.a + row.b;

return row.a + row.b;

}

另外看到网上有 多级属性 问题 ， 其实也可以通过这个办法解决

https://www.bbsmax.com/A/lk5aBp30d1/ ， 如：

数据格式是

{

......

rows:[

{ a: 'a1', b : 'b1', c : { c1 : 'c1'} }

............

]

}

列定义

{

field : "c.c1",

title : "c列",

halign: "center" ,

sortable : true,

align: "center",

width : 80,

formatter : function(value, row, index) {

row['c.c1'] = row.c.c1 / row.a;

return row['c.c1'];

}

------------------------------------------------------------

easyui相关源码:

data.rows.sort(function (r1, r2) {
var r = 0;
for (var i = 0; i < _728.length; i++) {
var sn = _728[i];
var so = _729[i];
var col = _6a3(_726, sn);
var _72a = col.sorter || function (a, b) {
return a == b ? 0 : (a > b ? 1 : -1);
};
r = _72a(r1[sn], r2[sn]) * (so == "asc" ? 1 : -1);
if (r != 0) {
return r;
}
}
return r;
});
return r;
});