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

Posted 2023-03-22

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

【英文标题】：Retrieving a hidden header inside a sorted handsontable instance

【发布时间】：2015-10-15 06:38:10

【问题描述】：

使用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 显示问题所在。

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

我错过了什么吗？

【参考方案1】：

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

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

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

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

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

希望有帮助！

【讨论】：

完全是我需要的，谢谢。这是一个updated jsFiddle with the solution，供对解决方案工作感兴趣的人使用。

【参考方案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/

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

【讨论】：

感谢您的帮助。如果标题没有问题，这将起到作用。在我的“现实生活”项目中，每一列的宽度都不一样（我使用自定义标题）。我很确定这会弄乱整张纸！

是的，它会，你必须使用逻辑索引