handsontable:隐藏一些列而不更改数据数组/对象 [英] handsontable: hide some columns without changing data array/object

问题描述

我有一个要显示在网格中的数据.我正在使用handontable来显示数据.每个第三列都作为前两个列的差进行计算(例如，将第三列呈现为第一列和第二列的总和；这是通过自定义渲染器将i-1和i-2列的总和完成的).

I have a data to show in grid. I am using handsontable to show data. Each 3rd column is computed as difference of previous two (for example, 3rd column is rendered as the sum of 1st and 2nd column; this is done by custom renderer taking sum of i-1 and i-2 columns).

这是我为差异"列定制的渲染器:

This is my custom renderer for "difference" columns:

var val1 = instance.getDataAtCell(row, col - 1),
    val2 = instance.getDataAtCell(row, col - 2),
    args = arguments;
        args[5] = val2 - val1;
        if (args[5] !== 0) {
            $(td).addClass('grid-column-class-nonzero');
        }
        Handsontable.renderers.NumericRenderer.apply(this, args);

我需要一个开关".此开关将显示/隐藏列.如果开关打开，那么我需要显示所有列.如果开关为OFF，则只需要显示包含差异的列即可. 那么，您能建议-如何在hansontable中隐藏列吗?

I need to have a "switch". This switch would show/hide columns. If switch is ON then I need to show all columns. If switch is OFF, I need to show only columns that contains differences. So, can you suggest - how to hide columns in hansontable?

编辑:我已经按照@ZekeDroid的建议更新了代码.

I have updated my code as suggested by @ZekeDroid.

 // on 'switch click' I modify colsToHide global array and do table re-render
 $('#my-id').handsontable('render');

这是我的自定义渲染器，用于根据开关隐藏/显示的列:

And this is my custom renderer for columns that should be hidden/shown based on switch:

var colsToHide = [];
var classModel1Renderer = function (instance, td, row, col, prop, value, cellProperties) {
    "use strict";
    if (colsToHide.indexOf(col) > -1) {
        td.hidden = true;
    } else {
        td.hidden = false;
    }

    Handsontable.renderers.TextRenderer.apply(this, arguments);
    $(td).addClass('grid-column-class-model1');
};

此代码确实隐藏/显示了列，但不适用于标题列.

This code indeed hides/shows columns, but it doesn't work for header column.

推荐答案

是的，如果您已经在使用自定义渲染器，则有一个简单的解决方案.我在此问题此处中发布了解决方案.本质上，如果col是您要隐藏的列，则可以具有一个数组，其中包含要隐藏的列索引，并且在自定义渲染器中(因为它会为表中的每个单元格调用)，请执行td.hide().

Yup there is a simple solution if you're using a custom renderer already. I posted the solution in this question here. Essentially, you can have an array with the column indeces you want to hide and in the custom renderer (since it gets called for every cell in your table) do td.hide() if col is a column you want hidden.

签入IE后，事实证明此解决方案仍然有效.如果可以的话，可以使用td.style.display = 'none'和'auto'隐藏/显示div.但是问题不在于隐藏，而在于我为教学目的快速编写的onkeydown事件.我敢肯定，您可以自行解决该问题，因为这超出了此问题的范围.

After checking in IE, it turns out this solution still works. If anything you can use td.style.display = 'none' and 'auto' to hide/display the div. But the problem is not with the hiding, it's with the onkeydown event that I quickly wrote for teaching purposes. I'm sure you can figure out that part on your own as it is out of the scope of this question.

要隐藏列标题，请使用jQuery查找要隐藏的<th>.一种方法是要求所有这些，然后在文本上使用过滤器功能，直到它与所需的标题匹配为止.这是一个昂贵的O(n)解决方案，所以如果您是我，那么我将在脚本开始时执行一次，将映射从列索引保存到<th>，然后加以解决.

To hide the column header, use jQuery to find the <th> that you want to hide. One way is to ask for all of them, then use a filter function on the text until it matches the header you want. It's an expensive, O(n) solution so if I were you I'd do this once at the beginning of the script, save a map from column index to <th>, and then work off of that.

新技术:

请参见此jsFiddle ，以获取更多信息.您是对的，因为这种方法很杂乱，效率也不高，所以我编写的代码虽然杂乱无章，但杂乱无章.除了更改渲染，我们还可以通过更新columns选项来隐藏列.如果您查看新代码，那么现在要做的就是更新column数组和column标头.这更接近于真正的列隐藏功能，唯一的缺点是它不会继续排序或重新排列行/列.如果这也是您的应用程序所必需的，那么我将密切关注您在git项目上提出的问题，并希望做到最好:)

Look to this jsFiddle for more info. You were right in that this method is messy and not too efficient so I coded something less messy though still hacky. Instead of changing the rendering, we can hide columns by updating the columns option. If you look the the new code, what it now does is update the columns array, and column headers. This gets closer to a real column hiding feature with the only setback that it doesn't keep sorting or rearranged rows/columns. If this was also a requirement for your application then I'll keep an eye with you on the issue you raised on the git project and hope for the best :)

让我知道这种新方法是否对您有用.

Let me know if this new method works for you.

这篇关于handsontable:隐藏一些列而不更改数据数组/对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！