Блог

Есть ли очевидная причина, по которой этот пример Slickgrid не должен работать. В принципе, он не сортирует по щелчкам по столбцам.

         var grid;

        var columns = [
        {id:"title", name:"Title", field:"title", sortable: true},
        {id:"duration", name:"Duration", field:"duration", sortable: true},
        {id:"%", name:"% Complete", field:"percentComplete", sortable: true},
        {id:"start", name:"Start", field:"start", sortable: true},
        {id:"finish", name:"Finish", field:"finish", sortable: true},
        {id:"effort-driven", name:"Effort Driven", field:"effortDriven", sortable: true}
        ];

        var options = {
            enableCellNavigation: true,
            enableColumnReorder: false
        };

        $(function() {
            var data = [];
            for (var i = 0; i < 500; i  ) {
                data[i] = {
                    id: i,
                    title: "Task "   i,
                    duration: "5 days",
                    percentComplete: Math.round(Math.random() * 100),
                    start: "01/01/2009",
                    finish: "01/05/2009",
                    effortDriven: (i % 5 == 0)
                };
            }

            var dataView = new Slick.Data.DataView();

            grid = new Slick.Grid("#myGrid", dataView, columns, options);
            function comparer(a,b) {
                var x = a[sortcol], y = b[sortcol];
                return (x == y ? 0 : (x > y ? 1 : -1));
            }

            var sortcol = "json_number";
            var sortdir = 1;
            grid.onSort.subscribe(function(e, args) {
                sortdir = args.sortAsc ? 1 : -1;
                sortcol = args.sortCol.field;

                // using native sort with comparer
                // preferred method but can be very slow in IE with huge datasets
                dataView.sort(comparer, args.sortAsc);
            });
            dataView.beginUpdate();
            dataView.setItems(data);
            dataView.endUpdate();
            grid.invalidate();
            grid.render();

            $("#myGrid").show();
        })
  

Попробуйте добавить этот прослушиватель, который повторно отображает сетку при перетасовке строк:

 dataView.onRowsChanged.subscribe(function(e,args) {
    grid.invalidateRows(args.rows);
    grid.render();
});
  

Оригинальный пример здесь: http://mleibman.github.com/SlickGrid/examples/example4-model.html

Несмотря на то, что уже есть принятый ответ, который, безусловно, решил первоначальный вопрос, я хотел указать на распространенную ошибку в stackoverflow при обработке метода subscribe в Slickgrid.

Давайте представим, что наша сетка находится в переменной с именем ‘grid’, как и в большинстве других примеров. Это происходит в большинстве принятых и / или одобренных ответов:

 dataView.onRowsChanged.subscribe(function(e,args) {
    grid.invalidateRows(args.rows);
    grid.render();
});
  

или

  grid.onSort.subscribe(function(e, args){
      var cols = args.sortCols;

      data.sort(function(dataRow1, dataRow2){
           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;
      })

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

Работают ли эти примеры так, как задумано? Да, они работают .. при определенных обстоятельствах.

Давайте представим функцию, которая добавляет Сликгрид в список сликгридов:

 var m_grids = []
function anyName(){
    var grid;
    //..run code
    //..run subscribe
    m_grids.push(grid)
}
  

Итак, что происходит сейчас, когда мы пытаемся вызвать любую функцию subscribe, в то время как функция subscribe содержит переменную grid? Это просто влияет на последнюю назначенную сетку, независимо от того, на какой из них была выполнена подписка.
Правильный способ подписаться на эти функции — с помощью параметра args:

 dataView.onRowsChanged.subscribe(function(e,args) {
    args.grid.invalidateRows(args.rows);
    args.grid.render();
});
  

или

  grid.onSort.subscribe(function(e, args){
      var cols = args.sortCols;

      args.grid.getData().sort(function(dataRow1, dataRow2){
           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;
      })

      args.grid.invalidate()
      args.grid.render()
 })
  

Это может быть незначительным случаем, поскольку обычно требуется более одной сликгриды на одной странице, но зачем делать это неправильно, когда мы могли бы очень легко исправить это 🙂