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

最新推荐文章于 2022-01-14 16:30:58 发布

原创最新推荐文章于 2022-01-14 16:30:58 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

html/js/ajax 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何在EasyUI的Datagrid组件中添加自定义列，并实现该列的正确排序功能。通过示例代码展示了如何使用formatter函数来计算并显示自定义列的值，同时确保该列可以被正常排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 有些列对应的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;
});