在slickgrid中,我可以使用grid.SetSortColumn(colName,true/false)
设置排序列及其排序方向。这仅设置排序标志符号,但不进行排序。有没有办法调用sort事件处理程序。我已经将排序处理程序定义为grid.onSort.subscribe(function(){});
答案 0 :(得分:11)
您正在观察的行为是正确的。
grid.setSortColumn(columnId, isAsc);
仅更新排序列上的字形。 在您的情况下,您最初需要对数据进行排序,然后使用setSortColumn更新sortColumn上的字形。您可以重复使用onSort事件中使用的排序器,如下所示:
var gridSorter = function(columnField, isAsc, grid, gridData) {
var sign = isAsc ? 1 : -1;
var field = columnField
gridData.sort(function (dataRow1, dataRow2) {
var value1 = dataRow1[field], value2 = dataRow2[field];
var result = (value1 == value2) ? 0 :
((value1 > value2 ? 1 : -1)) * sign;
return result;
});
grid.invalidate();
grid.render();
}
var grid = new Slick.Grid($gridContainer, gridData, gridColumns, gridOptions);
//These 2 lines will sort you data & update glyph while loading grid
//columnField is field of column you want to sort initially, isAsc - true/false
gridSorter(columnField, isAsc, grid, gridData);
//I had the columnField, columnId same else used columnId below
grid.setSortColumn(columnField, isAsc);
grid.onSort.subscribe(function(e, args) {
gridSorter(args.sortCol.field, args.sortAsc, grid, gridData);
});
我是如何达成此解决方案的?
答案 1 :(得分:3)
dataView.fastSort
完成这项工作。然后,您可以使用setSortColumn
设置排序字形。
答案 2 :(得分:3)
我启用了多列排序,我不得不更改函数以传递正确的排序列。
grid.onSort.subscribe(function(e, args) {
gridSorter(**args.sortCols[0].sortCol.field**, **args.sortCols[0].sortAsc**, grid, gridData);
});
答案 3 :(得分:2)
您可以在列标题上触发点击事件...进行排序
我解决了这个问题......
$('.slick-header-columns').children().eq(0).trigger('click'); // for first column
答案 4 :(得分:1)
我受到了Mr.Hunts回答的启发,但我采用了稍微不同的方法将当前grid.setSortColumn(columnId, isAsc)
扩展为grid.setInitialSortColumn(columnId, isAsc)
。这将应用排序并完成grid.setSortColumn
所做的一切。
var thisGrid = { //Your grid obj
columns: , // Your columns object
grid: , // new Slick.Grid....
}
thisGrid.grid.onSort.subscribe(function (e, args) { // ar var cols = args.sortCols;]
thisGrid.grid.customSort(args);
});
thisGrid.grid.customSort = function (args) {
var cols = args.sortCols;
thisGrid.dataView.sort(function (dataRow1, dataRow2) {
if (cols) {
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;
});
}
thisGrid.grid.setInitialSortColumn = function (columnId, ascending) {
thisGrid.grid.setInitialSortColumns([{
columnId: columnId,
sortAsc: ascending
}
]);
};
thisGrid.grid.setInitialSortColumns = function (cols) {
sortColumns = cols;
$.each(sortColumns, function (i, col) {
var columnIndex = thisGrid.grid.getColumnIndex(col.columnId);
var column = thisGrid.columns[columnIndex];
if (col.sortAsc == null) {
col.sortAsc = true;
}
var args = {
grid: thisGrid.grid,
multiColumnSort: true,
sortCols: [{
sortCol: column,
sortAsc: col.sortAsc
}
]
}
thisGrid.grid.setSortColumn(col.columnId, col.sortAsc);
thisGrid.grid.customSort(args);
});
};
// Trigger
thisGrid.grid.setInitialSortColumn("dateDue", true);
答案 5 :(得分:1)
由于声誉,我无法发表评论,这是最合适的地方,但是,我的答案是关于@Premshankar Tiwari和@Siddharth的答案。
我更喜欢Siddharth的答案中的dataView.fastSort
选项,除了IE7和8之外,它适用于所有浏览器。我没有在IE9或更高版本中测试它。不幸的是,由于遗留应用程序的兼容性问题,我网络上的大多数都运行IE7或8。但是,Premshankar的答案适用于IE7和8。
所以,我最终做了这样的事情:
if (msie > 0) {
$(".slick-header-columns").children().eq(5).trigger("click");
$(".slick-header-columns").children().eq(4).trigger("click");
} else {
dataView.fastSort('process','unit');
}
其中列索引(5)=&#39; unit&#39;和列索引(4)=&#39;进程&#39;。请注意,这是dataView.fastSort
方法中的相反顺序。我还使用了一个检测IE浏览器版本的功能,并将其分配给msie
。
我唯一关于使用.trigger
方法的抱怨是,如果您将网格设置为动态隐藏/显示列,则索引功能可能会对非预期列进行排序,除非您在隐藏时仅在初始化时调用它显示能力存在。
答案 6 :(得分:0)
也许it会帮助你。看起来SlickGrid会触发自我排序 - 所以你可以手动触发它。如果你想要的话。
答案 7 :(得分:0)
我正在使用多列排序,并在初始化网格时加载已保存的排序数据。
正如预期的那样,setSortColumns设置了排序,但实际上没有应用它,而dataView.reSort()或.fastSort()似乎没有帮助,无论加载到什么点我称它们 (我一定错过了什么,但是无法让它发挥作用)。
最后,这对我有用。我从ajax调用中填充dataView后立即调用它。 它可能不是最简单的,很高兴在船上收集反馈!
function forceResort() {
var sortColumns = grid.getSortColumns();
var cols = [];
$.each(sortColumns, function(index, value) {
var columnId = value.columnId;
var sortAsc = value.sortAsc;
var sortCol = { field: columnId };
var col = { sortCol: sortCol, sortAsc : sortAsc};
cols.push(col);
});
dataView.sort(function (dataRow1, dataRow2) {
var sortResult = 0;
for (var i = 0, l = cols.length; i < l; i++) {
if (sortResult !== 0) {
break;
}
var field = cols[i].sortCol.field;
var sign = cols[i].sortAsc ? 1 : -1;
var value1 = dataRow1[field] || ''; //handle nulls - otherwise erratic sorting
var value2 = dataRow2[field] || ''; //handle nulls - otherwise erratic sorting
if ($.inArray(field, dateTypeColumns) > -1) {
sortResult = compareDates(value1, value2) * sign;
} else {
if ($.inArray(field, numericColumns) > -1) {
sortResult = compareSimple(value1, value2) * sign;
} else {
sortResult = compareAlphaNumeric(value1, value2) * sign;
}
}
}
return sortResult;
});
grid.invalidate();
grid.render();
}
答案 8 :(得分:0)
更干净的解决方案不是依赖于onSort的参数,而是调用getSortColumns:
function gridSorter() {
var scol=grid.getSortColumns();
if (scol.length===0) return;
var scolId=scol[0].columnId, asc=scol[0].sortAsc;
data.sort(function(a, b) {
var result = a[scolId] > b[scolId] ? 1 : a[scolId] < b[scolId] ? -1 : 0;
return asc ? result : -result;
});
grid.invalidate();
}
然后做:
grid.onSort.subscribe(gridSorter);
这将允许随时重新建立排序(例如在使用ajax重新加载数据后的示例),只需调用gridSorter()
答案 9 :(得分:-1)
如果您想要多列排序:
function grid_sorter(args, grid, dataView) {
let cols = args.sortCols;
console.log(cols)
dataView.sort(function (dataRow1, dataRow2) {
for (let i = 0, l = cols.length; i < l; i++) {
let field = cols[i].sortCol.field;
let sign = cols[i].sortAsc ? 1 : -1;
let value1 = dataRow1[field], value2 = dataRow2[field];
let result = (value1 === value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
if (result !== 0) {
return result;
}
}
return 0;
});
grid.invalidate();
grid.render();
}
grid_sorter(default_sorting, grid_2, dataView_2);
cols是这样的对象:
- sortCols {
- length: 2
- 0 : {
"sortAsc: true,
"sortCol": {
"field: column_id
}
}
- 1: {..}
}