javascript - 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 推断出这么多的，而不是 列。

关于如何实现我想要的目标有什么建议吗？

如果需要，我愿意更改 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 而不是函数调用。

幸运的是，我们似乎可以使用以下行来教 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 
        });
  });

希望这对将来的人有帮助

干杯