Handsontable：将列作为参数数组从服务器传递

Question

Handsontable 使得从服务器向数组发送表值变得非常容易：

$('#dataTable').handsontable( data: serverdataarray )

到目前为止，一切都很好。但是，我想格式化数组中的一些列。

如果我有固定数量的列，我可以轻松做到这一点：

$('#dataTable').handsontable({
    data: serverdataarray ,
    columns: [
        { data: "Entity", type: 'text', renderer: orangeFF9900 },
        { data: "Geography", type: 'text', renderer: orangeFF9900 },
        { data: "Description", type: 'text', renderer: orangeFF9900 },
        { data: "cost_month1", type: 'numeric' },
        { data: "cost_month1", type: 'numeric' }
    ]
});

我的问题是，从服务器发送的数据将具有不同数量的列，具体取决于多种因素。因此，我希望能够在服务器上动态生成格式化数组的列，并将其作为数组发送。即：

var cols = [
        { data: "Entity", type: 'text', renderer: orangeFF9900 },
        { data: "Geography", type: 'text', renderer: orangeFF9900 },
        { data: "Description", type: 'text', renderer: orangeFF9900 },
        { data: "cost_month1", type: 'numeric' },
        { data: "cost_month1", type: 'numeric' }
    ]; // Strictly speaking this would be a string sent form the server, but you catch my drift

 $('#dataTable').handsontable({
    data: serverdataarray ,
    columns: cols
 });

但是，这样做时，我最终会出现以下错误TypeError: method is not a function jquery.handsontable-0.9.9-full.js Line: 3028

有问题的行 (3028) 是以下函数的返回行：

Handsontable.TableView.prototype.applyCellTypeMethod = function (methodName, td, row, col) {
    var prop = this.instance.colToProp(col)
    , cellProperties = this.instance.getCellMeta(row, col)
    , method = Handsontable.helper.getCellMethod(methodName, cellProperties[methodName]); //methodName is 'renderer' or 'editor'

    return method(this.instance, td, row, col, prop, this.instance.getDataAtRowProp(row, prop), cellProperties);
};

Handsontable 实际上设法在屏幕上呈现正确数量的列，尽管它们是空白的、未格式化的并且只有一行，所以我猜它是从 serverdataarray 而不是 cols 推断出这么多。

关于如何实现我正在寻找的任何建议？

如果需要，我愿意更改 Handsontable 源代码。

谢谢

Answer 1

此答案仅作为@PostureOfLearning 正确响应的扩展：

事实证明问题是由以下错误引起的，并且我简化了代码以希望使帖子更具可读性：

  var orangeFF9900= function (instance, td, row, col, prop, value, cellProperties) {
    Handsontable.TextCell.renderer.apply(this, arguments);
    $(td).css({
        background: '#ff9900'
    });
  };

  $.post('/AJAX/columns', function (data) {
        var cellData = JSON.parse(data.Cells);
        var colsData = JSON.parse(data.Cols);
        $('#dataTable').handsontable({
            data: cellData ,
            columns: colsData 
        });
  });

现在 colsData 数组看起来像上面描述的（或者更准确地说）：

[
    { "data": "Entity", "type": "text", "renderer": "orangeFF9900" },
    { "data": "Geography", "type": "text", "renderer": "orangeFF9900" },
    { "data": "Description", "type": "text", "renderer": "orangeFF9900" },
    { "data": "cost_month1", "type": "numeric" },
    { "data": "cost_month1", "type": "numeric" }
]

现在，由于文本在 JSON 中通过引号 " " 传输的方式，orangeFF9900 被解析为 string 而不是 function 调用。

不过，幸运的是，我们似乎可以教 HandOnTable 识别作为字符串传递的渲染器函数名称，方法是使用以下行：

Handsontable.cellLookup.renderer.orangeFF9900 = finction(…) {…};

因此我们的最终代码如下所示：

Handsontable.cellLookup.renderer.orangeFF9900 = function (instance, td, row, col, prop, value, cellProperties) {
    Handsontable.TextCell.renderer.apply(this, arguments);
    $(td).css({
        background: '#ff9900'
    });
  };

  $.post('/AJAX/columns', function (data) {
        var cellData = JSON.parse(data.Cells);
        var colsData = JSON.parse(data.Cols);
        $('#dataTable').handsontable({
            data: cellData ,
            columns: colsData 
        });
  });

希望这对未来的人有所帮助

干杯

Answer 2

我认为您的方法没有任何问题。 在我的一个项目中，我成功地使用了：

var myCols = [...];

$('#dataTable').handsontable({
    data: serverdataarray,
    columns: myCols
});

在您的示例代码中，注释行“// 严格来说...”：在该行的开头，您似乎有太多右括号。 var cols = [...]}); 应该只是 var cols = [...]; 我假设它是一个错字。

除此之外，我建议检查列数据是否设置为与来自服务器的列完全相同的 ID/名称，而不是您想要的标题。示例：

var cols = [{ data: "RefNum" }, { data: "Qty"}];

使用以下方法添加标题：

 colHeaders: ["Reference", "Quantity"]

我能想到的最后一件事是渲染器有问题。尝试删除每一列的渲染器，看看它是否首先工作。如果没有更多的代码，这很难提供帮助。