编辑可动手操作的网格的单元格属性答案

【问题标题】：Edit cell properties of a handsontable grid编辑可动手操作的网格的单元格属性
【发布时间】：2015-10-17 18:02:39
【问题描述】：

我有一个 Handsontable 网格，用户将在其中输入一些值以将它们插入数据库。当他提交网格时，我希望特定单元格为“只读”。在这种情况下，我希望第一列是“只读”。

我使用 Ajax 将我的数据发送到我的数据库中。在我的回调函数中，我想将单元格属性编辑为“只读”。

所以我现在拥有的是：

var cellProperties={};
    var i;
    for (var i = 0; i < data_traitement.length; i++) {

        cellProperties.readOnly = true;
        return cellProperties;
    }

但“cellProperties”选项只能在 Handsontable 定义中使用。所以我不知道用什么来做到这一点。

有人可以帮帮我吗？

编辑：

在 ZekeDroid 的建议下，我尝试修改我的单元格定义：所以我有这个：

cells:function(row,col,prop){
    var cellProperties = {};

    if ([0].indexOf(row) !== -1 && col >= 0) 
    {
        cellProperties.readOnly = true;
    }

    if (readOnlyCells[[row,col]]) {
        cellProperties.readOnly = true;
    }

    return cellProperties;
    }

在我的回调函数中，如果我理解的很好，我要把这个readOnlyCells改成true。

所以我做了这个：

for (var i = 0; i < data_traitement.length; i++) {
        readOnlyCells[[i,0]] = true; //I'm not sure of this line

    }
    hot.render();

【问题讨论】：

标签： javascript handsontable

【解决方案1】：

如果您设置了 columns 选项（您应该这样做），您可以使用 HOT 实例和函数 updateSettings() 简单地更新选项。它会像这样工作：

hot.updateSettings({
    columns: newColumns
});

在您的情况下，newColumns 应该是您的列的新定义。我建议创建一个返回这个新对象的函数。该对象将在文档页面中定义。在你的 ajax 回调中，你要确保这个新定义的第一列是 readOnly:true，你就完成了！

如果您只想制作单元格，则可能比这更容易。您可以像这样保留单元格坐标图：

var readOnlyCells = {};

然后在您的回调中，添加键值对单元格坐标：readOnlyCells[[row,col]] = true。在此之后，您应该确保您最初的 cells 定义如下：

cells: function(row, col, prop) {
    var cellProperties = {};

    if (readOnlyCells[[row,col]]) {
        cellProperties.readOnly = true;
    }

    return cellProperties;
}

就是这样。您可能希望像列一样更新设置，但无需更改代码。

【讨论】：

谢谢，但我不希望整个列都是“只读”，我只想要一些单元格：/ 事实上，用户将插入 3 行（例如），我想要第一个这 3 行的列是只读的。之后，用户可以添加一些行并一次又一次地保存。我只是不希望用户可以更新他已经输入的行。这就是为什么我想使用单元格属性来更改特定行的属性。
好的，那就用cells代替columns
你能帮帮我吗？我试过你的代码，我认为这是一个好主意，但它不起作用，所以也许我做错了。所以我编辑我的帖子给你看

【解决方案2】：

您可以尝试为此列实现自定义渲染器吗？然后您可以控制该列中每个单元格的只读。

例子：

function customReadOnlyRenderer(instance, td, row, col, prop, value, cellProperties) {

    // your business logic to determine read only property of the cell
    cellProperties.readOnly = true or false;
    Handsontable.TextCell.renderer.apply(this, arguments);
}

在调用 ajax 之后，更新数据源并调用渲染。将为该列上的每个单元格调用渲染器，并使用来自源的最新数据。

【讨论】：