Handsontable 的 columnSorting 也在对固定行进行排序

Question

我正在使用 Handsontable 来填充我的数据库数据。

我已经使用了 3 个固定行，但是当我点击列 header 进行排序时，它会将完整数据与固定行一起排序。

我希望它应该通过保留固定行来排序。

这是我的代码：

hot = new Handsontable(container, {
    data: data,
    minSpareRows: 1,
    colHeaders: true,
    fixedRowsTop: 3,
    columnSorting: true,
    contextMenu: true
  });

Answer 1

不幸的是，HOT 附带的排序不允许这种行为，仅仅是因为它对数据数组进行排序，而冻结行只是为了美观。

解决方案是对您的数据实施您自己的排序。我有同样的任务并通过向列 headers 添加一个 onclick 事件并让该函数进行选择性排序来解决它。

在您的情况下，该函数可以从您的 HOT 实例中请求属性，它为您提供冻结的连续行，然后通过忽略第一个 x 冻结行手动对数据进行排序.实现这一点的一种方法是将 sub-array 与大数组中的 non-frozen 行拼接，排序，然后组合两个数组。

希望对您有所帮助！

Answer 2

我确实通过更改 handsontable.full.js "this.sort" 函数

解决了它

我有一个固定行，所以在开始排序之前，我拼接了第一行并将其保存在变量中。

我让原始排序为运行并对我的数据进行排序，然后在排序函数 return 之前，我确实将保存的第一行添加到我的数据数组中

我的解决方案：

// handsontable.full.js -- built in sort function

this.sort = function () {
var instance = this;

if (typeof instance.sortOrder == 'undefined') {
  return;
}

instance.sortingEnabled = false; //this is required by translateRow plugin hook
instance.sortIndex.length = 0;

var colOffset = this.colOffset();
for (var i = 0, ilen = this.countRows() - instance.getSettings()['minSpareRows']; i < ilen; i++) {
  this.sortIndex.push([i, instance.getDataAtCell(i, this.sortColumn + colOffset)]);
}

// Custom Sorting - Saving First Row
var firstRow = this.sortIndex[0];

// Remove first Row from data
this.sortIndex.shift();
/////// Original Sort Begin/////////
var colMeta = instance.getCellMeta(0, instance.sortColumn);
var sortFunction;
switch (colMeta.type) {
  case 'date':
    sortFunction = dateSort;
    break;
  default:
    sortFunction = defaultSort;
}

this.sortIndex.sort(sortFunction(instance.sortOrder));
////// Original Sort END /////////


// Custom Sorting - Adding the fixed row to the TOP
this.sortIndex.unshift(firstRow);


//Append spareRows
for(var i = this.sortIndex.length; i < instance.countRows(); i++){
  this.sortIndex.push([i, instance.getDataAtCell(i, this.sortColumn + colOffset)]);
}

instance.sortingEnabled = true;   };

Answer 3

如果您想在手动排序时保持列固定，请实现您自己的排序比较器，它始终保持最上面的行在前。从 0.24 版开始，您可以将属性 sortFunction 添加到每一列。在以前的版本中，您可以使用此比较器函数手动对数据数组进行排序。这是我创建的始终保持顶行固定的函数，它用在上面 link 中的 sortFunction 中。检查 link 以查看有关输入参数的信息。如果你想固定更多行，你将需要修改它

function comparatorFactory (compareFn) {
  return function (sortOrder) {
    return function (a, b) {
      var aRow = a[0]
      var bRow = b[0]
      var aValue = a[1]
      var bValue = b[1]
      var modifier = sortOrder === false ? -1 : 1
      if (aRow === 0) {
        return -1 // Make sure first row stays first
      } else if (bRow === 0) {
        return 1 // Make sure first row stays first
      } else if (aValue == null) {
        // Make sure empty rows are always last (my preference)
        return bValue == null ? 0 : 1
      } else if (bValue == null) {
        // Make sure empty rows are always last (my preference)
        return aValue == null ? 0 : -1
      } else {
        // Compare two actual values using the compare function
        return modifier * compareFn(aValue, bValue)
      }
    }
  }
}

使用比较列中值的函数调用此工厂，例如数字比较器、字符串比较器或您拥有的任何类型的数据，它将保持顶行固定。

Handsontable 的 columnSorting 也在对固定行进行排序

Handsontable's columnSorting is sorting fixed rows also

javascript

handsontable