首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Handsontable的columnSorting也对固定行进行排序

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

Stack Overflow用户
提问于 2015-02-25 11:46:07
回答 3查看 3.7K关注 0票数 2

我使用Handsontable来填充我的DB数据。

我使用了3行固定的数据,但是当我单击列标题进行排序时,它会将完整的数据与固定的行一起排序。

我想要它通过保留固定行进行排序。

这是jsFiddle

这是我的代码:

代码语言:javascript
复制
hot = new Handsontable(container, {
    data: data,
    minSpareRows: 1,
    colHeaders: true,
    fixedRowsTop: 3,
    columnSorting: true,
    contextMenu: true
  });
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-03-05 12:30:58

我通过更改handsontable.full.js "this.sort“函数来解决这个问题。

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

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

我的解决方案:

代码语言:javascript
复制
// 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;   };
票数 2
EN

Stack Overflow用户

发布于 2015-02-25 18:15:47

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

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

在您的示例中,该函数可以从热实例中请求属性,该属性为您提供被冻结的连续行,然后通过忽略第一个x冻结行手动对数据进行排序。实现这一点的一种方法是将子数组与大数组中的非冻结行连接起来,排序,然后组合这两个数组。

希望这能有所帮助!

票数 0
EN

Stack Overflow用户

发布于 2016-05-06 06:32:24

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

代码语言:javascript
复制
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)
      }
    }
  }
}

使用比较列中值的函数调用这个工厂,如数字比较器、字符串比较器或任何类型的数据,它将保持顶部行的固定。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28718223

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档