Я использую SlickGrid с группировками, и мне нужно отсортировать данные в каждой группе, но оставить группировку (строку заголовка группы) в порядке по умолчанию.
Сортировка, похоже, сортирует данные столбца, а затем меняет порядок заголовков группировки в соответствии с данными.
Кто-нибудь делал это или у меня неправильно установлен параметр / параметр?
Спасибо
Вот мой пример группировки + сортировки. Обратите внимание, что, когда я хочу отсортировать, он выполняет сортировку по столбцу, по которому вы группируете, я не могу сортировать с любыми другими столбцами, если это не группировка по столбцу (ну, в любом случае, не так, как я закодировал свою функцию, хотя вы могли бы играть с этим)
<select id="slc_groupby" name="slc_groupby" onchange="groupByColumn(this.value)">
<option value="">...</option>
<option value="assy_number">Assy Number</option>
</select>
<span id="span_group_btn" style="position:absolute; display:none; margin-left:5px; margin-top:20px;">
<!-- Group sorting, I show this button only after a grouping column is chosen -->
<img src="/images/b_updownarrow2.gif" id="img_sorting" border="0" onclick="groupByColumn( $('#slc_groupby').val() )" />
</span>
и здесь идет функция javascript для группировки + сортировки, обратите внимание, что всякий раз, когда вы нажимаете кнопку сортировки (верхняя с html ID = img_sorting), она имеет эффект перегруппировки и использования функции groupByColumn () (поскольку я ' m, используя событие onclick), хотя это происходит так быстро, что вы действительно не видите, что он снова группирует ... но так я получил его, работающий во всех браузерах (включая Chrome)
function groupByColumn(column) {
// sorting direction, if undefined just inverse the current direction of the global sortdir var (sortdir is defined as global variable in slickgrid)
sortdir = ((sortdir == 1) ? -1 : 1);
dataView1.groupBy(
column,
function (g) {
return g.value + " <span style='color:green'>(" + g.count + " items)</span>";
},
function (a, b) {
var a1 = a.value;
var b1 = b.value;
// string sorting
return sortdir * (a1 == b1 ? 0 : (a1 > b1 ? 1 : -1));
}
);
// display the button for group sorting
$('#span_group_btn').css("display", "inline");
}
Поскольку U не предоставил источник, я могу предположить, что ваша проблема связана с методом сортировки, который сортирует только по выбранному столбцу, поэтому вы должны сначала отсортировать по столбцу группировки.
Допустим, вы группируете по UserName и у вас есть сортируемый столбец Title, ваш метод onSort должен выглядеть примерно так:
grid.onSort.subscribe(function (e, args) {
sortdir = args.sortAsc ? 1 : -1;
sortcol = args.sortCol.field; // Title column
var comparer = function (a, b) {
var x = a['UserName'], y = b['UserName'];
if (x != y)
{
return (x < y ? 1 : -1) * sortdir;
}
else
{
x = a[sortcol];
y = b[sortcol];
return (x == y ? 0 : (x > y ? 1 : -1));
}
};
dataView.sort(comparer, args.sortAsc);
});
Допустим, вы группируете по 4 различным столбцам - кафедра, факультет, курс, семестр. Во время сортировки вы вручную сравниваете эти столбцы и всегда сортируете их по возрастанию или по убыванию (в зависимости от того, какой является ваш порядок по умолчанию в начале), для остальных других столбцов вы используете направление сортировки, переворачивая результат функции сравнения.
function comparer(a, b) {
return (x == y ? 0 : (x > y ? 1 : -1));
}
grid.onSort.subscribe(function(e, args) {
$(e.target).parents(".slick-header-columns").find(
".slick-header-column").removeClass(
"slick-header-column-sorted");
var currentCol = $(e.target).hasClass("slick-header-column") ? $(e.target): $(e.target).parents(".slick-header-column");
currentCol.addClass("slick-header-column-sorted");
currentCol.find(".slick-sort-indicator").removeClass(args.sortAsc ? "desc" : "asc").addClass(args.sortAsc ? "asc" : "desc");
var sortdir = args.sortAsc ? 1 : -1;
var sortcol = args.sortCol.field;
var items = dataView.getItems();
items.sort(function(a, b) {
var deptCompare = a.department == b.department ? 0 : (a.department < b.department ? -1 : 1);
if (deptCompare === 0) {
var facultyCompare = a.faculty == b.faculty ? 0 : (a.faculty < b.faculty ? -1 : 1);
if (facultyCompare === 0) {
var courseCompare = a.course == b.course ? 0 : (a.course < b.course ? -1 : 1);
if (courseCompare === 0) {
var semesterCompare = a.semester == b.semester ? 0 : (a.semester < b.semester ? -1 : 1);
if (semesterCompare === 0) {
var fieldCompare = comparer(a[sortcol], b[sortcol]);
return fieldCompare * sortdir;
} else {
return semesterCompare;
}
} else {
return courseCompare;
}
} else {
return facultyCompare;
}
} else {
return deptCompare;
}
});
dataView.refresh();
});
Второй способ добиться того же - использовать средство сравнения пользователей на уровне группировки. Вы определяете компаратор для группы,
function groupComparer(a, b) {
var x = a.groupingKey
var y = b.groupingKey;
return (x == y ? 0 : (x > y ? 1 : -1));
}
dataView.setGrouping([
{
getter : "department",
collapsed : false,
formatter : function(g){
return g.value;
},
comparer : groupComparer
},{
getter : "faculty",
collapsed : false,
formatter : function(g){
return g.value;
},
comparer : groupComparer
},{
getter : "course",
collapsed : false,
formatter : function(g){
return g.value;
},
comparer : groupComparer
},{
getter : "semester",
collapsed : false,
formatter : function(g){
return g.value;
},
comparer : groupComparer
}
]);
И пользовательская регулярная сортировка
grid.onSort.subscribe(function (e, args) {
dataView.sort(function(a,b){
var x = a[args.sortCol.field];
var y = b[args.sortCol.field];
return (x == y ? 0 : (x > y ? 1 : -1));
}, args.sortAsc);
});
