javascriptslickgrid

Simple Sort Sample for slickgrid


I want to havesimple slickgrid column sort. however I might not understand the basic idea.

what I have done is like this.

Make column sortable

{id: "score", name: "number", field: "score",sortable: true},

Make function for sort calculation.

function sortfn(o1, o2) {
  if (o1[column.field] > o2[column.field]) {
    return 1;
  } else if (o1[column.field] < o2[column.field]) {
    return -1;
  }
  return 0;
}

then subsclibe to onSort.

grid.onSort.subscribe(function (e, args) { 
    grid.invalidateAllRows();
    grid.render();
  });

then next,,,,

I guess I should put sortfn somewhere though, but how??

where should I put sortfn??


Solution

  • Check out the examples here. There is no default sorting in the grid - this is left to the datasource to manage.

    This example uses the native javascript sort property of the source data array to sort the rows:

    grid = new Slick.Grid("#myGrid", data, columns, options);
    
    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();
    });
    

    This example outsources the sorting to the DataView object which is the grid's datasource.

    grid.onSort.subscribe(function (e, args) {
      sortdir = args.sortAsc ? 1 : -1;
      sortcol = args.sortCol.field;
    
      if (isIEPreVer9()) {
        // using temporary Object.prototype.toString override
        // more limited and does lexicographic sort only by default, but can be much faster
    
        var percentCompleteValueFn = function () {
          var val = this["percentComplete"];
          if (val < 10) {
            return "00" + val;
          } else if (val < 100) {
            return "0" + val;
          } else {
            return val;
          }
        };
    
        // use numeric sort of % and lexicographic for everything else
        dataView.fastSort((sortcol == "percentComplete") ? percentCompleteValueFn : sortcol, args.sortAsc);
      } else {
        // using native sort with comparer
        // preferred method but can be very slow in IE with huge datasets
        dataView.sort(comparer, args.sortAsc);
      }
    });