更改handsontable中单元格的类名

Question

我想更改 Handsontable 中“td”的类名。所以我使用 jquery 来通过“addClass”来做到这一点。在我的 css 文件中，我有一个带有此类名称的指定颜色。

我的CSS：

 .error
 {
     background-color : red;
     color : blue;
 } 

我的 jquery 代码是：

  <script type="text/javascript">
      $(document).ready(function(){
        $('#submit_button_essai').click(function(){
            var td;


            td=(hot.getCell(1,1));

            $(td).addClass("error");


            $.post("ajax_insert_essai.php",{arr:data_essai}, insert_essai_callback);



        });

    });

我不知道如何才能将类名仅分配给一个单元格！有人可以帮助我吗？

Answer 1

有一种非常简单的方法可以做到这一点，因为 Handsontable 是在考虑到这个用例的情况下构建的！

您想使用customRenderer您的属性的选项cells。它将把渲染器应用到所有匹配的单元格，并在渲染器内做一些有趣的事情。具体方法如下：

首先定义渲染器：

function customRender(instance, td, row, col, prop, value, cellProperties) {
    // change to the type of renderer you need; eg. if this is supposed
    // to be a checkbox, use CheckboxRenderer instead of TextRenderer
    Handsontable.renderers.TextRenderer.apply(this, arguments);

    // get the jquery selector for the td or add the class name using native JS
    $(td).addClass("error");

    return td;
}

如您所见，这会将类应用于td您提供此渲染器的每个类。现在只需将其提供给正确的细胞即可。您可以通过添加cells属性来做到这一点：

var hot = new Handsontable(container, {
    data: data,
    cells: function(row, col, prop) {
        var cellProperties = {};

        if (row === 0, col === 0) {
            cellProperties.renderer = customRender; // uses function directly
        }
    }
});

您最终要做的就是在您想要的任何单元格上定义渲染器。当然，现在这只会在渲染时添加它，而不是动态添加。为此，您可以使用与此类似的第二种方法。

您的click活动可以做两件事：

1）重新计算cells选项并更新它们

这个很简单，遵循上面的示例。您需要修改cells以将渲染器应用到要添加类名称的任何单元格。之后，您只需执行以下操作：

hot.updateSettings({cells: newCellObject});

就是这样。

第二个更有趣的选项是在每个单元格上定义自定义渲染器。如果您这样做，那么您需要添加将类名称添加到此渲染器函数内部的单元格的逻辑；这是可能的，因为渲染器将行和列位置作为输入，因此您可以执行以下操作：

// to do a fast search, use this hack to turn the array into strings
var globalErrorCells = [[1,2]+'', [0,0]+'']; 

function customRender(instance, td, row, col, prop, value, cellProperties) {
    // change to the type of renderer you need; eg. if this is supposed
    // to be a checkbox, use CheckboxRenderer instead of TextRenderer
    Handsontable.renderers.TextRenderer.apply(this, arguments);

    // we check if this cell is in our global array of cells to include
    if (globalErrorCells.indexOf([row, col] + '')) {
        // get the jquery selector for the td or add the class name using native JS
        $(td).addClass("error");
    }

    return td;
}

就是这样！每次您想要添加一个单元格以添加类名时，请将单元格坐标推送到该全局数组，handsontable 将在下次渲染时自动正确渲染它。像这样的东西：

// assume we're inside the click
var cell = [1,2]+''
globalErrorCells.push(cell);
hot.render();

删除类名也是如此，只需搜索要删除的单元格并将其从数组中删除即可globalErrorCells。

我希望这是有道理的！最后一条评论。如果您尝试进行验证，我建议您阅读 Handsontable 页面上有关验证器的部分。您可以使用cells传递验证器函数的选项来执行类似的操作。这会应用于所有单元格的渲染，如果验证失败，它会自动向该单元格添加一个类，然后您可以使用 CSS 来更改它：D