In slickgrid, sono in grado di impostare la colonna di ordinamento e la sua direzione di ordinamento utilizzando lo grid.SetSortColumn(colName,true/false). Questo imposta solo il glifo di ordinamento ma non esegue alcun ordinamento. C'è un modo per chiamare il gestore di eventi sort. Ho definito il gestore di ordinamento come grid.onSort.subscribe(function(){});Chiamare l'ordinamento su slickgrid
Forse it ti aiuterà. Sembra che SlickGrid stia eseguendo l'ordinamento su se stesso, quindi puoi attivarlo manualmente se lo desideri.
Il comportamento che si sta osservando è corretto.
grid.setSortColumn(columnId, isAsc);
aggiorna solo il glifo nella colonna di ordinamento. Nel tuo caso, dovrai inizialmente ordinare i dati, quindi utilizzare setSortColumn per aggiornare il glifo su sortColumn. È possibile riutilizzare sorter utilizzato nell'evento onSort come questo:
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);
});
Come sono arrivato a questa soluzione?
Leggi i commenti qui. https://github.com/mleibman/SlickGrid/issues/325
dataView.fastSort fa il lavoro. È quindi possibile utilizzare setSortColumn per impostare il glifo di ordinamento.
Ho ordinato più colonne, ho dovuto modificare la funzione per passare la colonna di ordinamento corretta.
grid.onSort.subscribe(function(e, args) {
gridSorter(**args.sortCols[0].sortCol.field**, **args.sortCols[0].sortAsc**, grid, gridData);
});
ho preso spunto da Mr.Hunts risposta, ma ho preso un approccio leggermente diverso per estendere l'attuale grid.setSortColumn(columnId, isAsc)-grid.setInitialSortColumn(columnId, isAsc). Questo applicherà l'ordinamento e farà tutto ciò che fa 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);
È possibile attivare evento click sul titolo della colonna ... che non l'ordinamento
ho risolto il problema come questo ...
$('.slick-header-columns').children().eq(0).trigger('click'); // for first column
sto usando ordinamento multicolonna, e caricamento dei dati di ordinamento salvati durante l'inizializzazione della griglia.
Come previsto, setSortColumns imposta l'ordinamento, ma in realtà non l'ha applicato e dataView.reSort() o .fastSort() non sembravano essere d'aiuto, indipendentemente da quale punto di caricamento li ho chiamati (devo aver perso qualcosa , ma non riuscivo a farlo funzionare).
Alla fine, questo ha funzionato per me. Lo chiamo subito dopo aver popolato il mio dataView da una chiamata ajax. Probabilmente non è il più intelligente, così felice di ricevere un feedback a bordo!
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();
}
Non posso lasciare commenti a causa della reputazione, che è dove questo sarebbe più opportuno, tuttavia, la mia risposta è nei confronti di @Premshankar Tiwari e risposte @Siddharth.
Ho preferito l'opzione dataView.fastSort nella risposta di Siddharth, che funziona per me in tutti i browser tranne IE7 e 8. Non l'ho provato in IE9 o versioni successive. Sfortunatamente, la maggior parte della mia rete esegue IE7 o 8 a causa di problemi di compatibilità per le applicazioni legacy. MA, la risposta di Premshankar funziona in IE7 e 8.
Così, ho finito per fare qualcosa di simile:
if (msie > 0) {
$(".slick-header-columns").children().eq(5).trigger("click");
$(".slick-header-columns").children().eq(4).trigger("click");
} else {
dataView.fastSort('process','unit');
}
cui indice di colonna (5) = 'unità' e l'indice di colonna (4) = 'processo'. Si noti che è l'ordine inverso nel metodo dataView.fastSort. Sto anche utilizzando una funzione che rileva la versione del browser IE e la assegna a msie.
La mia unica lamentela sull'utilizzo del metodo .trigger è che se si imposta la griglia per nascondere/mostrare dinamicamente le colonne, la funzione indicizzata potrebbe essere ordinata su colonne non intenzionali a meno che non si stia chiamando solo all'inizializzazione quando le funzionalità hide/show sono presente.
Una soluzione più pulita non è fare affidamento sugli argomenti onSort ma chiamare getSortColumns invece:
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();
}
Poi fare:
grid.onSort.subscribe(gridSorter);
Questo permetterà di ristabilire l'ordinamento ogni volta che vuoi (da esempio dopo aver ricaricato i dati con ajax) semplicemente chiamando gridSorter()
Che pasticcio orribile ... Tuttavia questo è il modo più affidabile per far funzionare l'ordinamento programmatico. –