Question

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

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

我希望它可以通过留下固定行进行排序。

这是我的代码：

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

Answer 1

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

来解决它

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

我让原始排序运行并对数据进行排序，然后在从sort函数返回之前，我将保存的第一行添加到我的数据数组

我的解决方案：

// 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 2

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

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

在您的情况下，该函数可以从您的HOT实例请求属性，该属性为您提供已冻结的连续行，然后通过忽略第一个x冻结行来手动对数据进行排序。实现此目的的一种方法是使用大数组中的非冻结行拼接子数组，排序，然后组合两个数组。

希望这有帮助！

Answer 3

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

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也是对固定行进行排序

3 个答案: