1

私は dgrid の基礎の学習に取り組んでおり、最も興味のある機能の 1 つは、グリッドのセル内に dom 要素をレンダリングする機能です。私はストアを使用していますが、これは私が使用した例のどれも使用していないものであり、それらの例を模倣して物事を機能させることができませんでした。これが私が取り組んでいるものです：

function testRenderCell(object, value, node, options) {
    var div = document.createElement("div");
    div.className = "renderedCell";
    div.innerHTML = "test";
    return div;
};

var jsonObj= 
{
    columns : [{label: "Test", field: "test", width: "150px", renderCell: testRenderCell}],
    data : []
};

grid.set("columns", jsonObj.columns);

var dataStore = new Observable(Memory({idProperty: "id", data: jsonObj.data}));
grid.store = dataStore;

REST 呼び出しの結果で呼び出される関数では、次のようになります。

for (var i = 0; i < reply.length; i++) {
    dataStore.put({
        test: reply[i],
    },
    {id:i}
);

ただし、dgrid はコンテンツを [object Object] としてレンダリングするだけです。これは明らかに、ストア内の生データがセルでレンダリングされ、renderCell が呼び出されていないことを意味します。おそらく、renderCell 関数がいつどのように呼び出されるかを誤解しているか、愚かな間違いを犯しただけかもしれません。いずれにせよ、どんな助けでも大歓迎です！

4

2 に答える 2

3

昨日、dgridを使い始めました。dojo.store.JsonRest を使用しましたが、問題はありませんでした。しかし、私は店があなたの問題と関係があるとは思えません. 私はいくつかのことを試してみます：

  1. 新しい「div」を作成する代わりに、renderCell 関数によって提供される DOM ノードを使用します (以下の私の例を参照してください)。
  2. renderCell 関数から何も返す必要はないと思います。私はしませんでした、そしてそれは私のために働きました

あなたの問題は、提供されたものを使用せずに div を作成していることだと思います。dgrid の作成方法は次のとおりです。

grid = new Grid({
    store: Observable(JsonRest({
        target: myUrl,
        idProperty: 'id'
    })),
    columns: {
        timestamp: {
            label: 'Date',
            renderCell: function (object, value, node, options) {
                // Object is the row; i.e., object's properties are the column names
                // value is the value for this cell 
                // node is the DOM node of this cell
                // Not sure what 'options' refers to; I didn't need a fourth param
                var dtg = new Date(value);

                node.innerHTML = locale.format(dtg, {
                     datePattern: 'MM/dd/yyyy',
                     timePattern: 'HH:mm:ss'
                });

                // Notice I didn't return anything
             }
        }
}, 'my-grid');

お役に立てれば。

于 2013-06-28T02:16:37.240 に答える
2

グリッドでストアを使用する方法を説明する dgrid チュートリアルを実行したところです。すべての列を例だけに置き換えてレンダリング セル関数をテストしましたが、使用する json に含まれるフィールド名を明らかに選択しました。それは御馳走でした。私が参照した例を見てください。役立つかもしれません。renderCell は含まれていませんが、良い出発点です。

返された div のデータから値を表示するには、値の引数を選択して、返された html に表示することができます...

function testRenderCell(object, value, node, options){
    var div = document.createElement("div");
    div.className = "renderedCell";
    div.innerHTML = value;
    return div;
}

これは私自身のインデックス ファイルからのコード スニペットです。私が使用したデータは、システムにコピーした例で使用したデータのローカル バージョンにすぎません。

require([
    "dojo/request",
    "dojo/store/Memory",
    "dgrid/OnDemandGrid"
], function (request, Memory, OnDemandGrid) {

    function testRenderCell(object, value, node, options){
        var div = document.createElement("div");
        div.className = "renderedCell";
        div.innerHTML = value;
        return div;
    }

    request("/DGridTests/data.json", {
        handleAs: "json"
    }).then(function (response) {
        // Once the response is received, build an in-memory store with the data
        var store = new Memory({ data: response });

        // Create an instance of OnDemandGrid referencing the store
        var grid = new OnDemandGrid({
            store: store,
            columns: [
                { 
                    label: "Test",
                    field: "first",
                    width: "150px",
                    renderCell: testRenderCell
                }
            ]
        }, "grid");

        grid.startup();
    });
});

Grid のドキュメントと renderCell 関数の詳細については、こちらを参照してください。

[Object] レンダリングされたコンテンツにはいくつかの理由が考えられます。最初の理由は、「renderCell」をオーバーライドする「formatter」も使用しているかどうかを確認することです。

2 つ目は、renderCell 関数に入るまでに表示される値またはフィールドがオブジェクト自体ではないことを確認することです。必要な変数を取り出すだけでよい場合があります。

3 つ目は、グリッドが列に注入する方法を好まないことです。おそらく少し戻って、コードをより単純な構文にリファクタリングし、コード スニペットのようにグリッド コンストラクター引数の一部として列を追加します。複雑さは後でいつでも追加できます。

他に何か思いついたら、さらに追加します、頑張ってください。

[アップデート]

Davidの答えを読んで、何も返さず、代わりにノードを変更してみました。これは機能するようです。これを行うために変更された関数は次のとおりです。何も返さないのが好きかどうかはわかりません。関数が何をしているのかは少しわかりにくいですが、それでも機能するのでクールです...

function testRenderCell(object, value, node, options){
    node.innerHTML = value;
}
于 2013-06-27T22:59:49.607 に答える