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

私の問題は、サーバーから送信されたデータには、さまざまな要因に応じてさまざまな数の列があることです。したがって、サーバー上で動的に配列をフォーマットする列を生成し、配列としても送信できるようにしたいと考えています。すなわち:

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 は実際には画面上に正しい数の列をレンダリングすることができますが、それらは空白でフォーマットされておらず、行が 1 つしかないため、この多くのフォームを推測していると推測して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として解決されます。stringfunction

幸いなことに、次の行を使用して、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 に答える