我正在尝试构建一个看起来相当复杂的桌子,并且我一直在尝试 Handsontable 的各种功能。
我希望实现的一件事是为单元格分配不同的类以用于样式目的。所以我将渲染器用于各种场景。事情是,当我将新类分配给单元格时,就像第一次渲染它一样。
示例:
const cellClasses = (row, col, prop) => {
const cellProperties = {};
if (col === 2 || col === 8 || col === 15) {
cellProperties.renderer = borderTest; // uses function directly
}
if ((row === 6 && col > 1) || (row === 12 && col > 1) || (row === 18 && col > 1)) {
cellProperties.renderer = bgTest; // uses function directly
}
return cellProperties;
};
function bgTest(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.className = 'testbg';
}
function borderTest(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.className += 'testborder';
}
请不要太关注逻辑。我现在担心的是,如果一个单元恰好满足这两个条件,它就会将一个类添加到另一个类中。
对我来说,一种巧妙的方法是结合两种逻辑来制作一个更大的 IF,但随着我的网格变得越来越复杂,维护起来会更加困难。
所以,我的问题是,是否有一种简单的方法可以将多个类分配给单元格,而不是同时分配。
简而言之,不,您不能按照您描述的方式分配类,因为 Handsontable 会在每次迭代时故意重新渲染整个单元格。这样做有充分的理由,主要是为了减少状态错误。
使用更具体的逻辑来确定列所需的所有渲染器并不是一个坏主意,因此我认为提出逻辑来声明性地定义列是合理的(而不是黑客!)。您可能需要考虑使用 col 索引以外的其他东西来使代码更具可扩展性。在我们的表中,我们倾向于将列定义存储在配置文件中或从后端服务创建。希望有帮助!
您可以查看我的答案,将单个或多个类添加到 hansontable 单元格或行