slickgrid 的简单排序示例

Question

我想要简单的 slickgrid 列排序。但是我可能不明白基本的想法。

我做的是这样的

使列可排序

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

创建排序计算函数。

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

然后订阅 onSort。

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

然后下一个,

我想我应该把 sortfn 放在某个地方，但是怎么做呢？？

我应该把sortfn放在哪里？？

Answer 1

查看示例 here。网格中没有默认排序 - 这留给数据源来管理。

This example使用源数据数组的原生javascriptsort属性对行进行排序：

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 将排序外包给作为网格数据源的 DataView 对象。

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

Answer 2

我需要对包含数字和字母的数据进行排序，这对我来说效果很好。

function comparer(a, b) {
  var collator = new Intl.Collator(undefined, {
    numeric: true,
    sensitivity: "base",
  });
  var x = a[sortcol];
  var y = b[sortcol];

  return collator.compare(x, y);
}

// add event listener to sort the grid
grid.onSort.subscribe(function (e, args) {
  dataView.sort(comparer, args.sortAsc);
});

slickgrid 的简单排序示例

Simple Sort Sample for slickgrid

javascript

slickgrid