我有一个数据要在网格中显示。我正在使用 handsontable 来显示数据。每个第 3 列计算为前两列的差异(例如,第 3 列呈现为第 1 列和第 2 列的总和;这是由自定义渲染器完成的,采用 i-1
和 的总和i-2
列)。
这是我为“差异”列定制的渲染器:
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);
我需要一个“开关”。此开关将显示/隐藏列。如果开关打开,那么我需要显示所有列。如果开关关闭,我只需要显示包含差异的列。 那么,你能建议 - 如何隐藏 hansontable 中的列?
编辑:我已经按照@ZekeDroid 的建议更新了我的代码。
// on 'switch click' I modify colsToHide global array and do table re-render
$('#my-id').handsontable('render');
这是我的自定义列渲染器,应该根据开关隐藏/显示:
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');
};
此代码确实隐藏/显示列,但它不适用于标题列。
最佳答案
您可以使用 colWidths 将特定列的宽度减小到 0.1 像素。从技术上讲,它仍然是表格的一部分,并且 .getData() 返回列的数据,但对于人眼来说,它是不可见的。如果你得到这么多的列,0.1 像素的列堆叠起来可见,你仍然可以在逗号后面添加更多的零来再次减少列:)
handsontable.updateSettings({
colWidths: [0.1,0.1,50],
});
此示例将“隐藏”前两列并显示 50 像素的第三列。
附言。要隐藏第一列,我建议宽度为 1px,这样第二列的列边框就不会显得不完整
关于javascript - handsontable:隐藏一些列而不更改数据数组/对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28793529/