在排序的 handsontable 实例中检索隐藏的 header

Question

使用 Handsontable 时，似乎很难从上下文菜单中检索行的 header。

考虑以下数据源：

var data = function () {
 return [["1212", "roman", "i", "ii", "iii"],
         ["3121", "numeric", 1, 2 ,3],
         ["4126", "alpha", 'a', 'b', 'c']];
};

可以创建一个 Handsontable 实例来显示除前两个 "columns" 之外的所有数据，并且具有如下上下文菜单：

// Settings to display all columns but the first two
var dataCols = []
for(var i=2; i<data()[0].length; i++) {
  dataCols.push({ data: i })
}

// Instance creation
var hot = new Handsontable(container, {
  data: data(),
  height: 396,
  colHeaders: true,
  rowHeaders: false,
  columns: dataCols,
  stretchH: 'all',
  columnSorting: true,
  contextMenu: {
    callback: function(key, options) {
      switch(key) {
      case 'header_pls':
        // TODO retrieve the "hidden header" from here    
        break;
      }
    },
    items: {
      "header_pls": {
        name: "Header please?"
      }
    }
  },
});

上下文菜单回调中的 options 参数由两个 object 组成，start 和 end，它们都有一个 row 和一个col 属性.

让我们保持简单，并假设始终选择一个单元格：start 和 end 相同 object.

然后可以使用 Handsontable 的方法 getSourceDataAtRow.[=23 从数据源（而不是绑定到实例的数据）检索 header =]

这可以解决问题，但是当通过单击列 header 对 table 进行排序时，来自数据源的行号和绑定到实例的数据不再一样。

Here is an example 显示问题所在。

一旦 table 排序后，就不可能检索一行的前两个元素之一。

我错过了什么吗？

Answer 1

我发现您可以使用自定义渲染器来隐藏单元格。

function customRenderer(instance, td, row, col) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    if([0, 1].indexOf(col) > -1) {
      td.style.display =  "none";
    }
    return td;
}

这样你就可以通过getDataAtCell获取隐藏列的数据，因为你在显示table中使用了原始数据源。这是更新后的 fiddle ：https://jsfiddle.net/xartok/upc4mcd0/5/

还有另一个问题，列 headers...

Answer 2

我认为您的问题归结为如何在排序后获得真实（物理）索引。如果我错了请纠正我，因为这个答案围绕着那个。

以下是您需要了解的内容：当您使用内置排序器时，Handson 实际上不会对您的数据数组进行排序。这是默认行为，可能对您有用，也可能没有用。无论如何，从那时起，每个内部方法都使用所谓的 "logical index" ，它只是新的排序索引。然后，内部方法在尝试访问数据点时使用从逻辑索引到物理索引的转换。

在您的情况下，您希望根据逻辑索引检索物理索引，以便您可以正确访问数据。这可以使用一个简单的函数来完成：

physicalIndex = instance.sortIndex[logicalIndex][0];

根据这些信息，您应该能够添加一些逻辑，以便无论何时您尝试访问数据，只要确保使用这个转换后的物理索引即可；在我的例子中，我只是检查 instance.sortIndex 是否未定义（我认为排序之前就是这种情况）并且每隔一次就分配这个索引，因为即使没有排序，logicalIndex == physicalIndex.

希望对您有所帮助！

在排序的 handsontable 实例中检索隐藏的 header

Retrieving a hidden header inside a sorted handsontable instance

javascript

handsontable