Question

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

我已经能够进入上下文菜单添加一个按钮，以及获取所选单元格的坐标，但是我无法找到设置格式化选项的方法，然后在init调用上进行动手操作

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

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

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

Answer 2

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

我有一个页面全球Handsontable实例，我打电话给＃34; hot＆＃34;。给定rowNum和colNum：

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

Answer 3

定义渲染器功能

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

然后在handsontable cells选项中

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

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

Answer 4

我尝试了jomofrodo的解决方案，这对我来说并不适合尝试使用类改变背景颜色 - 但它确实启发了一些有效的方法：

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

然而，直接改变类可以比直接改变风格的解决方案具有灵活性。

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

4 个答案: