如何在jQuery中使用handsontable为特定单元格设置属性？

Posted 2023-03-22

【中文标题】如何在jQuery中使用handsontable为特定单元格设置属性？

【英文标题】：How to set properties for specific cells with handsontable in jQuery?

【发布时间】：2013-08-19 03:35:15

【问题描述】：

我正在使用handsontable 处理一些东西，我想创建一个函数来真正添加soem 格式。具体来说，我希望有更改背景颜色和字体属性的选项。

我已经能够进入上下文菜单来添加一个按钮，以及获取所选单元格的坐标，但是我找不到在初始化调用 handsontable 之外设置格式选项的方法.

这是我一直在查看的文档，https://github.com/warpech/jquery-handsontable/wiki/Options#cell-options，我希望其他地方还有更多。

我没有要提供的代码，因为这是一个被锁定的项目，但我真的在研究如何为不在 init 上的单个单元格设置格式选项。

【参考方案1】：

这需要稍微挖掘一下文档，但我确实找到了...

此示例将为所有选定的单元格赋予红色字体。

callback: function (key, options) 
    var cell = $("#dataBlock'. $val['id'] .'").handsontable(\'getSelected\');
    var startRow = cell[0];
    var startCol = cell[1];
    var endRow = cell[2];
    var endCol = cell[3];

    if (key === "redFont") 
        setTimeout(function () 
            curRow = startRow;
            curCol = startCol;
            while(curRow <= endRow)
                curCol = startCol;
                while(curCol <= endCol)
                    check = $("#dataBlock'. $val['id'] .'").handsontable("getCell", curRow, curCol);
                    check.style.color = "red";
                    curCol += 1;
                
                curRow += 1;
            
        , 100);
    

【讨论】：

谢谢，我正在寻找类似的功能。

【参考方案2】：

定义渲染函数

function valueRenderer(instance, td, row, col, prop, value, cell) 
    if (row === 0 && col === 1) 
        $(td).css('color', 'green');
    

    if (col > 3) 
        $(td).addClass('custom');
    

    if (col === 5) 
        cellProperties.readOnly = true;
    

    if (col > 3 && col < 10) 
        cellProperties.type = 'numeric';
    
    ....
    ....
    so on...

然后在可操作的单元格选项中

 cells: function (row, col, prop) 
                var cellProperties = ;
                cellProperties.renderer = valueRenderer;
                return cellProperties;
        

通过这种方式，您可以更改属性、应用类、动态更改颜色等。

【讨论】：

我无法使用cellProperties.type = 'numeric'; 将类型和来源应用于handontable 我做错了什么？我跟着你的技术。为渲染器。如果可以的话，我可以给我一个工作代码吗？

【参考方案3】：

如果你使用 jQuery，你可以使用标准的 addClass/removeClass 函数。

我有一个页面全局 Handsontable 实例，我称之为“热”。 给定 rowNum 和 colNum：

        var cell = hot.getCell(rowNum,colNum);
        $(cell).addClass('yellow');

【参考方案4】：

我尝试了 jomofrodo 的解决方案，但它对我尝试使用类更改背景颜色不起作用 - 但它确实激发了一些确实有效的东西：

var cell = handsOnTable_Conditions.getCell(x_coord,y_coord);
$(cell).css('background-color','red');

但是，与直接更改样式的解决方案相比，直接更改类可能具有灵活性优势。