有没有一种方法可以使用renderers方法添加多个类? [英] Is there a way to add multiple classes using the renderers method?

问题描述

我正在尝试构建一个相当复杂的外观表，并且我一直在尝试使用handontable中的各种功能.

I'm trying to build a rather complex looking table, and i've been playing with various functionalities from handsontable.

我希望实现的一件事是为样式分配一个单元格diff类.因此，我在各种情况下使用渲染器.问题是，当我将新类分配给单元格时，就像第一次渲染它一样.

One thing i was hoping to achieve is to have a cell be assigned diff classes for styling purposes. So im using the renderers for various scenarios. Thing is, when i assign the new class to the cell, is like is rendering it for the first time.

示例:

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';
}

请不要过多注意逻辑.在这一点上，我担心的是，如果一个单元碰巧同时满足这两个条件，则它将一个单元添加到另一个单元中.

Please dont pay much attention to the logic. My concern at this point is that if a cell happen to meet both conditions, that it gets one class added to the other.

一种骇人听闻的方式将是我结合两种逻辑来制作更大的IF，但是随着我的网格变得越来越复杂，将很难维护它.

A hacky way would be for me to make an even bigger IF with a combination of both logics, but as my grid grows more complex, it will be much harder to maintain.

所以，我的问题是，有没有一种简单的方法可以将多个类分配给单元格，而不是同时进行.

So, my question is, is there an easy way to assign multiple classes to cells, an not at the same time.

推荐答案

简短的是，不，您不能按照描述的方式分配类，因为Handsontable会在每次迭代时故意重新渲染整个单元格.有充分的理由这样做，主要是为了减少状态错误.

The short is that no, you can't assign classes the way you're describing because Handsontable purposely re-renders the entire cell on each iteration. There is good reason to do this, mainly to reduce state bugs.

拥有更具体的逻辑来确定您的列所需的所有渲染器并不是一个坏主意，因此我想提出一种逻辑性(而不是hacky！)来声明性地定义您的列是合理的.您可能需要考虑使用col索引以外的其他方法来使代码更具可伸缩性.在我们的表中，我们倾向于将列定义存储在配置文件中或从我们的后端服务创建.希望有帮助！

It's not a bad idea to have more specific logic to determine all renderers needed for your columns so I would say it's reasonable (and not hacky!) to come up with logic to declaratively define your columns. You may want to think about using something other than col indexes to make the code more scalable. In our tables we tend to have column definitions stored in config files or created from our backend services. Hope that helps!

这篇关于有没有一种方法可以使用renderers方法添加多个类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！