如何为 koGrid 实现自定义排序?
How to implement custom sort for koGrid?
数据:
16.00 小时
19.99 小时
210.46 小时
262.54小时
303.19 小时
55.95小时
60.07 小时
64.07小时
7.95 小时
我想要的:
我需要允许在 koGrid 中对这个数据之王进行排序(通过单击网格 header、asc 或 desc 排序的默认功能)。
问题:
数据是字符串,因此您可能会猜到它是如何排序的 - 按字符代码。
我有哪些选择?我发现一个列可以分配 sortFn,我猜是这样的?
代码:
this.gridOptions = {
canSelectRows: false,
showColumnMenu: false,
showFilter: false,
columnDefs: [
{ field: 'localizedName', displayName: 'Name' },
{
field: 'localizedDuration', displayName: 'Duration',
sortFn: function (itemA: string, itemB: string) {
var numA = parseFloat(itemA);
var numB = parseFloat(itemB);
if (!numA && !numB)
return 0;
else if (!itemA && (itemA === undefined || itemA === null))
return 1;
else if (!itemB && (itemB === undefined || itemB === null))
return -1;
if (numA > numB)
return -1;
else if (numA < numB)
return 1;
return 0;
}
},
],
data: this.dataRows
};
Fiddle:
JSFiddle
试着像这样修改你的代码
查看:
<div data-bind="koGrid: gridOptions"></div>
viewModel:
vm = function () {
var self = this;
self.myData = ko.observable([{
hours: '113.02 hours'
}, {
hours: '13.01 hours'
}, {
hours: '303.01 hours'
}, {
hours: '33.01 hours'
}]);
self.gridOptions = {
data: self.myData,
columnDefs: [{
field: 'hours',
displayName: 'hours',
sortFn(a, b) {
if (!(a && b)) {
return -1;
}
var a1 = parseFloat(a.split(' ')[0]);
var b1 = parseFloat(b.split(' ')[0]);
if (a1 > b1) return 1;
if (a1 < b1) return -1;
if (a1 = b1) return 0;
}
}]
};
};
ko.applyBindings(new vm);
工作fiddlehere
参考文档可用here
数据:
16.00 小时 19.99 小时 210.46 小时 262.54小时 303.19 小时 55.95小时 60.07 小时 64.07小时 7.95 小时
我想要的:
我需要允许在 koGrid 中对这个数据之王进行排序(通过单击网格 header、asc 或 desc 排序的默认功能)。
问题:
数据是字符串,因此您可能会猜到它是如何排序的 - 按字符代码。 我有哪些选择?我发现一个列可以分配 sortFn,我猜是这样的?
代码:
this.gridOptions = {
canSelectRows: false,
showColumnMenu: false,
showFilter: false,
columnDefs: [
{ field: 'localizedName', displayName: 'Name' },
{
field: 'localizedDuration', displayName: 'Duration',
sortFn: function (itemA: string, itemB: string) {
var numA = parseFloat(itemA);
var numB = parseFloat(itemB);
if (!numA && !numB)
return 0;
else if (!itemA && (itemA === undefined || itemA === null))
return 1;
else if (!itemB && (itemB === undefined || itemB === null))
return -1;
if (numA > numB)
return -1;
else if (numA < numB)
return 1;
return 0;
}
},
],
data: this.dataRows
};
Fiddle: JSFiddle
试着像这样修改你的代码
查看:
<div data-bind="koGrid: gridOptions"></div>
viewModel:
vm = function () {
var self = this;
self.myData = ko.observable([{
hours: '113.02 hours'
}, {
hours: '13.01 hours'
}, {
hours: '303.01 hours'
}, {
hours: '33.01 hours'
}]);
self.gridOptions = {
data: self.myData,
columnDefs: [{
field: 'hours',
displayName: 'hours',
sortFn(a, b) {
if (!(a && b)) {
return -1;
}
var a1 = parseFloat(a.split(' ')[0]);
var b1 = parseFloat(b.split(' ')[0]);
if (a1 > b1) return 1;
if (a1 < b1) return -1;
if (a1 = b1) return 0;
}
}]
};
};
ko.applyBindings(new vm);
工作fiddlehere
参考文档可用here