Trong slickgrid tôi có thể thiết lập cột sắp xếp và hướng sắp xếp của nó bằng cách sử dụng grid.SetSortColumn(colName,true/false). Điều này chỉ đặt glyph sắp xếp nhưng không phân loại. Có cách nào để gọi trình xử lý sự kiện sắp xếp không. Tôi đã xác định trình xử lý sắp xếp như grid.onSort.subscribe(function(){});Sắp xếp gọi trên slickgrid
Có thể it sẽ giúp bạn. Có vẻ như SlickGrid đang kích hoạt kiểu tự - vì vậy bạn có thể kích hoạt nó theo cách thủ công nếu bạn muốn.
Hành vi bạn đang quan sát là chính xác.
grid.setSortColumn(columnId, isAsc);
chỉ cập nhật hình tượng trên cột sắp xếp. Trong trường hợp của bạn, ban đầu bạn sẽ cần phải sắp xếp dữ liệu, và sau đó sử dụng setSortColumn để cập nhật glyph trên sortColumn. Bạn có thể sử dụng lại trình sắp xếp được sử dụng trong sự kiện onSort như sau:
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);
});
Làm thế nào tôi đến giải pháp này?
Đọc nhận xét tại đây. https://github.com/mleibman/SlickGrid/issues/325
dataView.fastSort thực hiện công việc. Sau đó, bạn có thể sử dụng setSortColumn để đặt glyph sắp xếp.
Tôi đã bật nhiều cột, tôi phải thay đổi hàm để chuyển cột sắp xếp chính xác.
grid.onSort.subscribe(function(e, args) {
gridSorter(**args.sortCols[0].sortCol.field**, **args.sortCols[0].sortAsc**, grid, gridData);
});
Tôi đã lấy cảm hứng từ Mr.Hunts trả lời nhưng tôi mất một cách tiếp cận hơi khác nhau để mở rộng hiện tại grid.setSortColumn(columnId, isAsc)-grid.setInitialSortColumn(columnId, isAsc). Điều này sẽ áp dụng sắp xếp và làm mọi thứ 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);
Bạn có thể kích hoạt sự kiện nhấp chuột vào tiêu đề cột ... mà sắp xếp
tôi khắc phục sự cố như thế này ...
$('.slick-header-columns').children().eq(0).trigger('click'); // for first column
Tôi đang sử dụng phân loại multicolumn, và tải dữ liệu sắp xếp đã lưu khi khởi tạo lưới. Như mong đợi, setSortColumns thiết lập phân loại, nhưng didnt thực sự áp dụng nó, và dataView.reSort() hoặc .fastSort() didnt dường như giúp đỡ, bất kể những gì điểm trong tải tôi gọi chúng là (Tôi phải có một cái gì đó bị mất , nhưng không thể làm cho nó hoạt động được).
Cuối cùng, điều này làm việc cho tôi. Tôi gọi nó ngay lập tức sau khi populating dataView của tôi từ một cuộc gọi ajax. Nó có lẽ không phải là slickest, rất vui khi nhận phản hồi trên tàu!
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();
}
tôi không thể để lại ý kiến do uy tín, đó là nơi này sẽ là thích hợp nhất, tuy nhiên, câu trả lời của tôi là liên quan đến @Premshankar Tiwari và câu trả lời @Siddharth.
Tôi thích tùy chọn dataView.fastSort trong câu trả lời của Siddharth, hoạt động cho tôi ở tất cả các trình duyệt ngoại trừ IE7 và 8. Tôi không thử nghiệm trong IE9 trở lên. Thật không may, hầu hết trên mạng của tôi chạy IE7 hoặc 8 do vấn đề tương thích cho các ứng dụng cũ. NHƯNG, câu trả lời của Premshankar hoạt động trong IE7 và 8.
Vì vậy, tôi đã kết thúc làm một cái gì đó như thế này:
if (msie > 0) {
$(".slick-header-columns").children().eq(5).trigger("click");
$(".slick-header-columns").children().eq(4).trigger("click");
} else {
dataView.fastSort('process','unit');
}
nơi chỉ số cột (5) = 'đơn vị' và chỉ số cột (4) = 'quá trình'. Lưu ý rằng thứ tự ngược lại trong phương thức dataView.fastSort. Tôi cũng đang sử dụng một chức năng phát hiện phiên bản trình duyệt IE và gán nó cho msie.
Chỉ đơn khiếu nại về việc sử dụng phương thức .trigger là nếu bạn thiết lập lưới để ẩn/hiển thị cột, tính năng được lập chỉ mục có thể sắp xếp trên các cột ngoài ý muốn trừ khi bạn chỉ gọi nó khi khởi tạo khi khả năng ẩn/hiển thị hiện tại.
Một giải pháp sạch hơn không phải là dựa vào những lập luận để onSort nhưng gọi getSortColumns thay vì:
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();
}
Sau đó làm:
grid.onSort.subscribe(gridSorter);
này sẽ cho phép thiết lập lại sắp xếp bất cứ lúc nào bạn muốn (từ Ví dụ sau khi tải lại dữ liệu bằng ajax) chỉ đơn giản bằng cách gọi gridSorter()
Thật là một mớ hỗn độn kinh khủng ... Tuy nhiên đây là cách đáng tin cậy nhất để phân loại có lập trình hoạt động. –