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

How to set properties for specific cells with handsontable in jQuery?

本文关键字：单元格 属性 设置 handontable jQuery      更新时间：2023-09-26

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

我已经能够进入上下文菜单添加一个按钮，并获得所选单元格的坐标，但我找不到设置格式选项的方法，除了对handontable的init调用。

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

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

这需要对文档进行一些挖掘，但我确实找到了…

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

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

定义渲染器函数

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

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

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

我有一个页面全局Handontable实例，我称之为"热"。给定rowNum和colNum:

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

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

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

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

相关文章：