在已排序的可操作实例中检索隐藏的标题

Question

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

考虑以下数据源：

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

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

// 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 参数由start 和end 这两个对象组成，它们都具有row 和col 属性。

让我们保持简单，假设总会选择一个单元格：start 和 end 是同一个对象。

然后可以使用 Handsontable 的方法 getSourceDataAtRow 从数据源（而不是绑定到实例的数据）中检索标头。

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

Here is an example 显示问题所在。

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

我错过了什么吗？

Answer 1

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

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

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

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

鉴于此信息，您应该能够添加一些逻辑，以便每当您尝试访问数据时，只需确保使用此转换后的物理索引即可；就我而言，我只是检查instance.sortIndex 是否未定义（我认为是在排序之前的情况），并且每隔一段时间就分配这个索引，因为即使没有排序，logicalIndex == physicalIndex。

希望有帮助！

Answer 2

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

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 获取隐藏列的数据，因为您使用的是显示表中的原始数据源。 这是更新的小提琴：https://jsfiddle.net/xartok/upc4mcd0/5/

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