2011-02-09 3 views
8

Я только что начал тестировать Slickgrid для проекта, над которым я работаю, и я очень впечатлен его исполнением. Одно из требований, которое у меня есть, - сортировка по нескольким столбцам. Я не полностью закрыл голову вокруг Dataview в Slickgrid, так что, возможно, мне не хватает чего-то очевидного, но есть ли способ сортировать сетку на нескольких столбцах? Даже если пользовательский интерфейс не может обрабатывать сортировку более чем одним, я хотел бы иметь возможность вызывать функцию с столбцами по порядку плюс восходящий или нисходящий. Я смог сделать это с помощью Datatables, но у него нет группировки (другое требование для проекта).Сортировка Slickgrid несколькими столбцами?

В худшем случае я прибегну к выполнению сортировки на сервере и отправке содержимого обратно клиенту, статически отсортированному.

ответ

6

Вы можете связать сортировщики сортировки, чтобы выполнить сортировку нескольких столбцов. Вместо того чтобы делать

function comparerOnCol1(a, b) { 
    return a["col1"] - b["col1"]; 
} 

function comparerOnCol2(a, b) { 
    return a["col2"] - b["col2"]; 
} 

вы можете сделать

// sort by col1, then col2 
function combinedComparer(a, b) { 
    return comparerOnCol1(a, b) || comparerOnCol2(a, b); // etc. 
} 

или просто реализовать его рядный.

Что касается отображения порядка сортировки в пользовательском интерфейсе, в то время как вы не можете сделать это напрямую, вы можете применить индикаторы сортировки, установив «headerCssClass» в определениях столбцов, которые вы сортируете, и чтобы они отображали стрелки (или, тем не менее, вы указываете столбцы сортировки).

+0

Спасибо @tin. Кажется, это то, что мне нужно. Но могу ли я сортировать только с сеткой или мне нужно использовать DataView, если я хочу реализовать сортировку/фильтрацию? У меня есть отображение только с сеткой, но внедрение DataView похоже на то, что с моей стороны будет намного больше работать. – technomalogical

+2

Сетка не манипулирует вашими данными. Вы делаете. При этом вам не нужно использовать DataView для сортировки. Просто отсортируйте данные и аннулируйте сетку, чтобы отразить изменения в данных. Как в: myData.sort (объединенныйComparer) – Tin

+0

Я борюсь с тем же вопросом в данный момент. Мне нужна сортировка и фильтрация нескольких столбцов, но я не реализовал DataView. DataView, похоже, выполняет только сортировку по одному столбцу, но, вероятно, есть способ переопределить это. – Fantius

5

Здесь приведен пример использования опции «multiColumnSort».

http://mleibman.github.com/SlickGrid/examples/example-multi-column-sort.html

Я не думаю, что это работает, хотя, потому что args.sortCols всегда массив 1.

[Редактировать] Для того, чтобы это работало, я должен провести сдвиг перед нажатием кнопки на заголовке столбца (не очень интуитивный ИМХО) Смотрите также: https://github.com/mleibman/SlickGrid/pull/276

1

Я провел некоторое время, пытаясь решить эту проблему с DataView (без смены ключевых махинаций), и я думаю, что я нашел способ сделать это.

Используйте один столбец сортировки {multiColumnSort: false} и сохраните аргументы сортировки в закрытии. Отложите предыдущий сравнитель, если поля равны.

var currentSortCmp = null; 
grid.onSort.subscribe(function (e, args) { 

    // declarations for closure 
    var field = args.sortCol.field; 
    var sign = args.sortAsc ? 1 : -1; 
    var prevSortCmp = currentSortCmp; 

    // store closure in global 
    currentSortCmp = function (dataRow1, dataRow2) { 

     var value1 = dataRow1[field], value2 = dataRow2[field]; 

     //if equal then sort in previous closure (recurs) 
     if (value1 == value2 && prevSortCmp) 
      return prevSortCmp(dataRow1, dataRow2); 

     return (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign; 
    }; 
    dataView.sort(currentSortCmp); 

    grid.invalidate(); 
    grid.render();  
}); 

запомнить все предыдущие заказы. просто работает. работает, как ожидалось.

4

Я получил его работу для dataView с несколькими колонками сортировки в пути. Легко ли это понять. Это из примера в github, за исключением того, что я должен передать еще один параметр для dataView.sort(). Это всегда может быть правдой, и вы можете позаботиться о направлении сортировки в своей функции.

grid.onSort.subscribe(function (e, args) { 
    gridSorter(args.sortCols, dataView); 
}); 

function gridSorter(sortCols, dataview) { 
    dataview.sort(function (row1, row2) { 
     for (var i = 0, l = sortCols.length; i < l; i++) { 
      var field = sortCols[i].sortCol.field; 
      var sign = sortCols[i].sortAsc ? 1 : -1; 
      var x = row1[field], y = row2[field]; 
      var result = (x < y ? -1 : (x > y ? 1 : 0)) * sign; 
      if (result != 0) { 
       return result; 
      } 
     } 
     return 0; 
    }, true); 
} 

На всякий случай это помогает кому-то.

Смежные вопросы