Question

我想在掌上电脑中更改“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

Answer 2

您可以尝试查看Handsontable.Dom.addClass函数。它将元素和类名作为参数。查看在很多地方使用它的动手源代码。

Answer 3

最容易做到的事情

有一种更简单的方法可以使用Javascript动态完成此操作。即使这是一个迟到的答案，其他人肯定会欣赏它。

我想通过jQuery Tooltip添加图像缩略图，所以我需要为行添加标题，但您可以按照我的相同逻辑添加任何属性。如果你只想做单元格，那么添加另一个级别并使用'td'。我也在这里为你增添了一堂课。

var count = 0;
while(arr_length > count)
{
    var tmp_count = count + 1;//did this because i have a Handsontable header defined and the first index of tr is the header, if you have one
    if(main_drawing_jpg[count] == "/FOLDER_1/image_not_available.jpg")
    {
        spreadsheet.getElementsByTagName("tr")[tmp_count].title = "<img src='/FOLDER_1/thumb_image_not_available.jpg' />";
    }else
    {
        spreadsheet.getElementsByTagName("tr")[tmp_count].title = "<img src='" + main_drawing_jpg[count] + "_thumb.jpg' />";
    }
    var tmp_class_name = "row_" + tmp_count + "_class";
    spreadsheet.getElementsByTagName("tr")[tmp_count].setAttribute(class, tmp_class_name);
    count++;
}

如果感兴趣的话，这是jQuery Tooltip的代码......

$(function()
{
    $(document).tooltip(
    {
        //track: true,
        position: { my: "left+10 center", at: "right center" },
        content: function ()
        {
            return $(this).prop('title');
        }
    });
});

在handontable中更改单元格的类名称

3 个答案:

最容易做到的事情