JqGrid自定义本地排序(不依赖sorttype)实现方案咨询
当然可以!JqGrid完全支持自定义排序逻辑,刚好能解决你说的「空行始终置顶,其余行按升降序排列」的需求——比单纯用sorttype灵活多了,咱们直接上解决方案:
方法1:针对单个列自定义排序(用sortfunc)
如果只有某一列需要这种特殊排序规则,你可以在colModel里给该列配置sortfunc属性,它的工作方式和原生JS的Array.sort()函数几乎一样,接受两个要比较的单元格值,返回-1、0或1来决定顺序。
关键是先处理空值的情况,确保不管升序还是降序,空值行都排在最前面,再对非空值按当前排序方向处理:
colModel: [ { name: 'targetColumn', // 你要排序的列名 label: '列标题', sortfunc: function(a, b) { // 定义空值判断逻辑(根据你的实际数据调整,比如null/undefined/空字符串) const isEmptyA = a === '' || a == null; const isEmptyB = b === '' || b == null; // 空值优先排前面 if (isEmptyA && !isEmptyB) return -1; if (!isEmptyA && isEmptyB) return 1; if (isEmptyA && isEmptyB) return 0; // 非空值根据当前排序方向处理 const sortOrder = $(this).jqGrid('getGridParam', 'sortorder'); if (sortOrder === 'asc') { // 这里根据数据类型调整:数字用减法,字符串用localeCompare return typeof a === 'number' ? a - b : String(a).localeCompare(String(b)); } else { return typeof a === 'number' ? b - a : String(b).localeCompare(String(a)); } } }, // 其他列配置... ]
方法2:全局自定义排序(用beforeSort事件)
如果你的整个表格都需要统一的「空行置顶」规则,或者需要更复杂的跨列排序逻辑,推荐用beforeSort事件。这个事件会在JqGrid默认排序前触发,你可以在这里完全接管排序逻辑,直接用原生JS的方式给表格数据排序:
$("#yourGridId").jqGrid({ // 其他基础配置... beforeSort: function(postData, colModel) { // 获取当前排序的字段和方向 const sortField = postData.sidx; const sortDirection = postData.sord; // 获取表格的所有数据 const gridData = $(this).jqGrid('getGridParam', 'data'); // 自定义排序逻辑 gridData.sort(function(rowA, rowB) { const valA = rowA[sortField]; const valB = rowB[sortField]; // 空值判断 const isEmptyA = valA === '' || valA == null; const isEmptyB = valB === '' || valB == null; // 空行始终置顶 if (isEmptyA && !isEmptyB) return -1; if (!isEmptyA && isEmptyB) return 1; if (isEmptyA && isEmptyB) return 0; // 非空值按方向排序 if (sortDirection === 'asc') { if (typeof valA === 'number') { return valA - valB; } else { return String(valA).localeCompare(String(valB)); } } else { if (typeof valA === 'number') { return valB - valA; } else { return String(valB).localeCompare(String(valA)); } } }); // 返回false,阻止JqGrid执行默认排序逻辑(我们已经自己排好序了) return false; } });
注意事项
- 空值判断逻辑要根据你的实际数据调整:比如如果你的空值是
0或者'N/A',记得修改isEmptyA和isEmptyB的判断条件。 - 数据类型要匹配:数字类型别用字符串比较,否则会出现
10 < 2的错误结果;日期类型建议先转成Date对象再比较。 - 测试时要覆盖所有场景:比如全是空行、部分空行、升序/降序切换的情况,确保逻辑符合预期。
内容的提问来源于stack exchange,提问作者Skimae
相关产品推荐
相关产品推荐

