javascript 简单的 Slickgrid 排序不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5789820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple Slickgrid sorting doesn't work
提问by XoR
Is there obvious reason why this Slickgrid example shouldn't work. Basically it doesn't sort on clicking columns.
这个 Slickgrid 示例不应该工作是否有明显的原因。基本上它不会对点击列进行排序。
var grid;
var columns = [
{id:"title", name:"Title", field:"title", sortable: true},
{id:"duration", name:"Duration", field:"duration", sortable: true},
{id:"%", name:"% Complete", field:"percentComplete", sortable: true},
{id:"start", name:"Start", field:"start", sortable: true},
{id:"finish", name:"Finish", field:"finish", sortable: true},
{id:"effort-driven", name:"Effort Driven", field:"effortDriven", sortable: true}
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function() {
var data = [];
for (var i = 0; i < 500; i++) {
data[i] = {
id: i,
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
var dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid", dataView, columns, options);
function comparer(a,b) {
var x = a[sortcol], y = b[sortcol];
return (x == y ? 0 : (x > y ? 1 : -1));
}
var sortcol = "json_number";
var sortdir = 1;
grid.onSort.subscribe(function(e, args) {
sortdir = args.sortAsc ? 1 : -1;
sortcol = args.sortCol.field;
// using native sort with comparer
// preferred method but can be very slow in IE with huge datasets
dataView.sort(comparer, args.sortAsc);
});
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
grid.invalidate();
grid.render();
$("#myGrid").show();
})
回答by oscilloscope
Try adding this listener, which re-renders the grid when rows get shuffled around:
尝试添加这个监听器，当行被打乱时它会重新渲染网格：
dataView.onRowsChanged.subscribe(function(e,args) {
grid.invalidateRows(args.rows);
grid.render();
});
Original example here: http://mleibman.github.com/SlickGrid/examples/example4-model.html
这里的原始示例：http: //mleibman.github.com/SlickGrid/examples/example4-model.html
回答by Lain
Even though there already is an accepted answer which surely solved the initial question, I wanted to point out a common mistake on stackoverflow while handling Slickgrid's subscribe method.
尽管已经有一个公认的答案可以肯定地解决了最初的问题，但我想指出在处理 Slickgrid 的 subscribe 方法时关于 stackoverflow 的一个常见错误。
Let us imagine our grid is in the variable called 'grid', like in most other examples. This occurs in most of the accepted and/or upvoted answers:
让我们想象一下我们的网格位于名为“grid”的变量中，就像在大多数其他示例中一样。这发生在大多数接受和/或赞成的答案中：
dataView.onRowsChanged.subscribe(function(e,args) {
grid.invalidateRows(args.rows);
grid.render();
});
or
或者
grid.onSort.subscribe(function(e, args){
var cols = args.sortCols;
data.sort(function(dataRow1, dataRow2){
for (var i = 0, l = cols.length; i < l; i++){
var field = cols[i].sortCol.field;
var sign = cols[i].sortAsc ? 1 : -1;
var value1 = dataRow1[field], value2 = dataRow2[field];
var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
if (result != 0) return result
}
return 0;
})
grid.invalidate()
grid.render()
})
Do this examples work as intended? Yes, they do.. under certain circumstances.
此示例是否按预期工作？是的，他们确实......在某些情况下。
Let us imagine a function which adds a Slickgrid to a list of Slickgrids:
让我们想象一个将 Slickgrid 添加到 Slickgrid 列表的函数：
var m_grids = []
function anyName(){
var grid;
//..run code
//..run subscribe
m_grids.push(grid)
}
So what happends now when we are trying to call any subscribe function, while the subscribe function contains the variable grid? It merely affects the last assigned grid, no matter on which one the subscribe got executed on. The correct way to subscribe those functions is by the args parameter:
那么现在当我们尝试调用任何订阅函数而订阅函数包含变量 grid 时会发生什么？它只影响最后分配的网格，无论订阅是在哪个网格上执行的。订阅这些函数的正确方法是通过 args 参数：
dataView.onRowsChanged.subscribe(function(e,args) {
args.grid.invalidateRows(args.rows);
args.grid.render();
});
or
或者
grid.onSort.subscribe(function(e, args){
var cols = args.sortCols;
args.grid.getData().sort(function(dataRow1, dataRow2){
for (var i = 0, l = cols.length; i < l; i++){
var field = cols[i].sortCol.field;
var sign = cols[i].sortAsc ? 1 : -1;
var value1 = dataRow1[field], value2 = dataRow2[field];
var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
if (result != 0) return result
}
return 0;
})
args.grid.invalidate()
args.grid.render()
})
This might be a minor case since it requires usually more than one Slickgrid on the same page, yet why make it wrong when we could do it correct very easily :)
这可能是一个小例子，因为它通常需要在同一页面上有多个 Slickgrid，但是当我们可以很容易地纠正它时，为什么要出错:)
