javascript handsontable：隐藏一些列而不更改数据数组/对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28793529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
handsontable: hide some columns without changing data array/object
提问by renathy
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-1and i-2columns).
我有一个数据要在网格中显示。我正在使用 handsontable 来显示数据。每个第 3 列计算为前两列的差值（例如，第 3 列呈现为第 1 列和第 2 列的总和；这是由自定义呈现器对i-1和i-2列求和完成的）。
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);
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?
我需要一个“开关”。此开关将显示/隐藏列。如果开关打开，那么我需要显示所有列。如果开关关闭，我只需要显示包含差异的列。那么，您能否建议 - 如何在 hansontable 中隐藏列？
EDIT:I have updated my code as suggested by @ZekeDroid.
编辑：我已经按照@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.
此代码确实隐藏/显示列，但它不适用于标题列。
采纳答案by ZekeDroid
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 colis a column you want hidden.
是的，如果您已经在使用自定义渲染器，则有一个简单的解决方案。我在这里发布了这个问题的解决方案。本质上，您可以拥有一个包含要隐藏的列 indeces 的数组，并在自定义渲染器中（因为它会为表格中的每个单元格调用）td.hide()如果col是您想要隐藏的列。
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 onkeydownevent 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.
在 IE 中签入后，发现此解决方案仍然有效。如果您可以使用td.style.display = 'none'并'auto'隐藏/显示div。但问题不在于隐藏，而onkeydown在于我为了教学目的而快速编写的事件。我相信你可以自己弄清楚那部分，因为它超出了这个问题的范围。
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.
要隐藏列标题，请使用 jQuery 查找要隐藏的列<th>。一种方法是要求所有这些，然后对文本使用过滤器功能，直到它与您想要的标题匹配。这是一个昂贵的O(n)解决方案，所以如果我是你，我会在脚本的开头执行一次，将列索引中的映射保存到<th>，然后解决这个问题。
New Technique:
新技术：
Look to this jsFiddlefor 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 columnsoption. 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 :)
查看此 jsFiddle以获取更多信息。您是对的，因为这种方法很杂乱而且效率不高，所以我编写了一些不那么杂乱的东西，但仍然很笨拙。我们可以通过更新columns选项来隐藏列，而不是更改渲染。如果您查看新代码，它现在所做的是更新列数组和列标题。这更接近于真正的列隐藏功能，唯一的缺点是它不会对行/列进行排序或重新排列。如果这也是您的应用程序的要求，那么我会密切关注您在 git 项目中提出的问题，并希望一切顺利:)
Let me know if this new method works for you.
让我知道这种新方法是否适合您。
回答by Sst
You can use colWidths to reduce the width of a specific column to 0.1 pixels. Technically it's still part of the table and .getData() returnes the data of the colum, but to the human eye it's invisible. If you get so many columns, that the 0.1 pixel columns stack up to be visible, you can still add more zeros behind the comma to reduce the columns with again :)
您可以使用 colWidths 将特定列的宽度减小到 0.1 像素。从技术上讲，它仍然是表的一部分，并且 .getData() 返回列的数据，但对人眼来说它是不可见的。如果你有太多的列，0.1 像素的列堆叠起来可见，你仍然可以在逗号后面添加更多的零以再次减少列:)
handsontable.updateSettings({
colWidths: [0.1,0.1,50],
});
This example would "hide" the first two colums and show the third colum with 50 px.
此示例将“隐藏”前两个列并以 50 像素显示第三列。
PS. To hide the first column I recommend a width of 1px, so that the column borders of the second column doesn't look incomplete
附注。要隐藏第一列，我建议宽度为 1px，以便第二列的列边框看起来不完整
回答by Infant Rosario
For hiding header columns you can use afterGetColHeader callback function and hide it. In my case i have stored the column names to be hidden seperate array and checking it using indexOf function
对于隐藏标题列，您可以使用 afterGetColHeader 回调函数并将其隐藏。在我的情况下，我已将列名存储为隐藏的单独数组并使用 indexOf 函数检查它
afterGetColHeader:function(col,th){
currentCoulmn = data.headers[col];
if(hiddenColumns.indexOf(currentCoulmn.fieldName) > -1 ){
th.style.display='none';
}
},
回答by Eliotjse
hot.addHook('afterGetColHeader', RemoveUnWantedHeader);
function RemoveUnWantedHeader(col, th) {
if (th.textContent == "A" || th.textContent == "B" || th.textContent == "C"
|| th.textContent == "D" || th.textContent == "E"
|| th.textContent == "F" || th.textContent == "G" || th.textContent ==
"H"
|| th.textContent == "I" || th.textContent == "J"
|| th.textContent == "K" || th.textContent == "L" || th.textContent ==
"M"
|| th.textContent == "N" || th.textContent == "O"
|| th.textContent == "P" || th.textContent == "Q" || th.textContent ==
"R"
|| th.textContent == "S" || th.textContent == "T"
|| th.textContent == "U" || th.textContent == "V" || th.textContent ==
"W"
|| th.textContent == "X" || th.textContent == "Y" || th.textContent ==
"Z"
|| th.textContent == "AQ" || th.textContent == "AR" || th.textContent ==
"AS"
|| th.textContent == "AT" || th.textContent == "AU" || th.textContent ==
"AV" || th.textContent == "AW") {
th.style.display = 'none';
}
}
I have used hook to remove the headers I need to. I tried the same inside my HandsonTable it doesn't work so I tried the same using addHook and worked like charm.
我使用钩子删除了我需要的标题。我在我的 HandsonTable 中尝试了同样的方法，但它不起作用，所以我使用 addHook 尝试了同样的方法，并且效果很好。
afterGetColHeader: It is a function which will be rendered when header is called.
afterGetColHeader：这是一个在调用 header 时将呈现的函数。
RemoveUnWantedHeader: It is my own callback. You can have your own conditions and can remove.
RemoveUnWantedHeader：这是我自己的回调。你可以有自己的条件，可以删除。
