0

私は、5秒ごとに更新されるdojoを使用してデータグリッドを実装しました。次のコードを使用してデータグリッドを更新します。

jsonStore.fetch({
         query: {id:'*'},
         onComplete: function(items, result){
         dojo.forEach(items, function(item){
             jsonStore.setValue(item, "time" , data.update[0].netchange);
.....

'data'は、次のようにjsonオブジェクトであるグリッドに設定する必要がある新しいデータです。

var data = {"update":[{...}]}

ネットワークが負の場合に何をする必要があるかセルの色を赤に設定する必要があります。netchangeが正の場合、緑色になっているはずです。したがって、セルの書式を動的に変更する方法が必要です。誰かがこれを行う方法を教えてもらえますか？前もって感謝します

grid4 = new dojox.grid.DataGrid({
            query : {
                Title : '*'
            },
            id : "grid",
            jsId : "grid",
            clientSort : true,
            rowSelector : '0px',
            structure : layout4
        }, document.createElement('div'));
        grid4.setStore(jsonStore);
        dojo.byId("gridContainer4").appendChild(grid4.domNode);

var layout4 = [ {
            field : 'time',
            name : 'time',
            width : '40px',
            formatter: geticon()
        }, {
            field : 'netchange',
            name : 'netchange',
            width : '30px'
        } ];
4

1 に答える 1

5

質問に答える前に、「セルの書式を動的に変更する」と言うときの些細な誤称です。

セルを変更するのではなく、セルのスタイルformatterを変更します。

値がセルにロードされるたびに、フォーマッタが呼び出されます。さらに、セルが含まれる行に対してonStyleROw関数が呼び出されます。

これは、セルの色を変更するための2つのオプションがあることを意味します。セル全体で実行することも、フォーマッタ<span>に、異なるスタイルの色で値をラップするなどの単純な処理を実行させることもできます。両方お見せします。

これは、既存のグリッドコードを変更せずに、onStyleRowを使用して行全体を変更する最初のソリューションです。

onStyleRowを使用したソリューション1

手順1.（onStyleRowを接続します）

dojo.connect（grid4、 "onStyleRow"、styleRowGridPayment）;

ステップ2.（styleRowGridPaymentメソッドを作成します。）

var styleGridPayment = function(inRow) {
        if( null !== grid4.getItem( inRow.index ) ) {
            item = grid4.getItem( inRow.index );
            if( item.netchange < 0 ) {
                inRow.customStyles += "color:red;";
            } else {
                inRow.customStyles += "color:green;";
            }
         }
    }

onStyleRowを使用する場合はこれで十分です。

解決策2、フォーマッターを使用

フィールド宣言では、次のようになります。

{
    field : 'netchange',
    name : 'netchange',
    width : '30px'
    formatter: formatNetchange
}

formatNetchangeをフォーマッターとして追加したことに注意してください。

次に、フォーマッタを作成します。

formatNetchange = function(value){
     if(value < 0){
        color = "red";
     } else {
        color = "green";
     }
     return "<span style='color:" + color "'>" + value "</span>";
}
于 2011-08-28T16:18:36.410 に答える