检索已排序的handsontable实例中的隐藏标头 [英] Retrieving a hidden header inside a sorted handsontable instance

问题描述

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

When using Handsontable, it seems hard to retrieve the header of a row from a contextual menu.

请考虑以下数据源:

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

可以创建一个Handsontable实例，该实例显示除头两个列"之外的所有数据，并具有如下上下文菜单:

It is possible to create a Handsontable instance that displays all of the data but the first two "columns", and that has a contextual menu as following:

// 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属性.

The options parameter from the context menu callback is made of two objects, start and end, both having a row and a col property.

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

Let's keep it simple and assume there will always be a single cell selected: start and end are the same object.

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

It is then possible to retrieve the header from the data source (and not the data bound to the instance) using Handsontable's method getSourceDataAtRow.

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

This could do the trick, but when the table has been sorted by clicking on a column header, the row number from the data source and the data bound to the instance are no longer the same.

这里是一个示例，它显示了问题所在.

Here is an example that shows what the problem is.

一旦对表格进行了排序，就不可能检索到一行的前两个元素之一.

It is impossible to retrieve one of the two first elements of a row once the table has been sorted.

我想念东西吗?

推荐答案

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

I think your issue is boiled down to how to get the real (physical) index after sorting. Please correct me if I'm wrong because this answer revolves around that.

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

Here's what you need to know: when you use the built in sorter, Handson doesn't actually sort your data array. This is a default behavior which may or may not be useful to you. Regardless, from that point on every internal method uses what's called a "logical index" which is just the new sorted index. The internal methods then use a conversion from the logical to physical index when trying to access a data point.

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

In your case, you'd want to retrieve your physical index given your logical index so that you can correctly access the data. This can be done using a simple function:

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

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

Given this information you should be able to add some logic so that whenever you try to access the data, just make sure you use this transformed physical index; in my case I just check that instance.sortIndex is not undefined (which I think is the case before sorting) and every other time just assign this index since even without sorting, logicalIndex == physicalIndex.

希望有帮助！

这篇关于检索已排序的handsontable实例中的隐藏标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！