Вызов сортировки на Slickgrid

Question

В slickgrid я могу установить столбец сортировки и направление сортировки, используя grid.SetSortColumn(colName,true/false).Это только устанавливает глиф сортировки, но не сортирует.Есть ли способ вызвать обработчик события сортировки.Я определил обработчик сортировки как grid.onSort.subscribe(function(){});

Answer 1

Вы наблюдаете правильное поведение.

    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);
   });

Как я пришел к этому решению?

Читайте комментарии здесь.https://github.com/mleibman/SlickGrid/issues/325

Answer 2

У меня включена сортировка по нескольким столбцам, мне пришлось изменить функцию, чтобы передать правильный столбец сортировки.

grid.onSort.subscribe(function(e, args) {
    gridSorter(**args.sortCols[0].sortCol.field**, **args.sortCols[0].sortAsc**, grid, gridData);
});

Answer 3

dataView.fastSort делает работу.Затем вы можете использовать setSortColumn для установки глифа сортировки.

Answer 4

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

Я исправил проблему следующим образом ...

$('.slick-header-columns').children().eq(0).trigger('click'); // for first column

Answer 5

Я не могу оставлять комментарии из-за репутации, и именно здесь это будет наиболее уместно, однако мой ответ касается ответов @Premshankar Tiwari и @Siddharth.

Я предпочел вариант dataView.fastSort в ответе Сиддхарта, который работает для меня во всех браузерах, кроме IE7 и 8. Я не тестировал его в IE9 или выше.К сожалению, большинство в моей сети используют IE7 или 8 из-за проблем совместимости с устаревшими приложениями.НО, ответ Премшанкара работает в 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');
}

где столбец index (5) = 'unit' и index (4)) = «процесс».Обратите внимание, что это обратный порядок в методе dataView.fastSort.Я также использую функцию, которая определяет версию браузера IE и присваивает ей msie.

Моя единственная жалоба на использование метода .trigger заключается в том, что если вы настроите свою сетку для динамического скрытия / отображения столбцов,Индексированная функция потенциально может сортировать по непреднамеренным столбцам, если только вы не вызываете ее при инициализации, когда имеются возможности скрытия / отображения.

Answer 6

Меня вдохновил ответ 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);

Answer 7

Если вы хотите сортировку по нескольким столбцам:

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: {..}
}

Answer 8

Более чистое решение - не полагаться на аргументы 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 ()

Answer 9

Я использую многоколоночную сортировку и загружаю сохраненные данные сортировки при инициализации сетки.

Как и ожидалось, setSortColumns установила сортировку, но фактически не применила ее, а dataView.reSort () или .fastSort (), похоже, не помогло, независимо от того, в какой момент загрузки я им звонил (должно быть, я что-то пропустил, но просто не мог заставить его работать).

В конце концов, это сработало для меня.Я вызываю его сразу после заполнения моего dataView от вызова ajax.Это, вероятно, не самое приятное, поэтому с удовольствием принимаю отзывы на борту!

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();
}

Answer 10

Может быть это поможет вам.Похоже, SlickGrid запускает сортировку на себя, поэтому вы можете запустить ее вручную, если хотите.