0

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' }
    ]
});

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

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 源代码。

谢谢

4

2 回答 2

4

这个答案只是作为@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被解析为 astring而不是functioncall。

然而幸运的是，我们似乎可以教 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 
        });
  });

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

干杯

于 2013-07-15T10:25:09.427 回答
2

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

var myCols = [...];

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

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

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

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

添加标题使用：

 colHeaders: ["Reference", "Quantity"]

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

于 2013-07-14T22:57:55.807 回答