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 actualy设法在屏幕上呈现正确数量的列，虽然它们是空白的，未格式化且只有一行，所以我认为它正在推断serverdataarray而不是{{1} }。

关于如何实现我想要的任何建议？

如果需要，我愿意更改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"]

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

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

2 个答案: