0

序文: jqGrid 4.1.2 (現在は 4.5.2) を使用しているため、言及したパフォーマンスの問題の一部は修正されている可能性があります。

私は自分の JS コードをプロファイリングしていて、最初のグリッド バインド中に jqgrid がすべての行に対して afterInsertRow を起動していることに気付きました。$('#grid').jqGrid('addRowData', 'ID', data)これにより、グリッドのコンテナー DIV のサイズを変更する関数が呼び出されました。ブラウザーの再描画イベントはコストのかかるプロセスであるため、afterInsertRow への数百回の呼び出しにより、UI で少し遅延が発生しました。

私の質問は、jqGrid イベントのバインドを解除するための構文は何ですか?

4

2 に答える 2

1

あなたが説明するパフォーマンスの問題の原因は次のとおりだと思います。

  • gridview: trueオプションを使用しない
  • 代わりに、使用法のafterInsertRow代わりにコールバックを使用します。cellattrrowattr

グリッドの塗りつぶし中に使用されるソース コードの行を調べると、addJSONData次のことがわかります。

if(ts.p.gridview === false ) {
    $("#"+$.jgrid.jqID(ts.p.id)+" tbody:first").append(rowData.join(''));
    self.triggerHandler("jqGridAfterInsertRow", [idr, rd, cur]);
    if(afterInsRow) {ts.p.afterInsertRow.call(ts,idr,rd,cur);}
    rowData=[];
}

whileグリッドのすべての行に対するループの内側。ツール jqGrid では、グリッドの本体のデータを array 内に保存しますrowData。配列内の項目は、rowDataHTML フラグメントである文字列です。

使用するgridview: trueと、すべての jqGrid 本体が最初に配列内の文字列の配列として保存され、配列rowDataから 1 つの文字列が作成され、ループの後rowData.join('')に一度に本体に frin が配置されます (行を参照)。

gridview: false(デフォルト値 !!!???)を使用すると、配列rowDataは文字列に変換され、行のみがすべての行のループ内のページに配置されます。answerに詳述されているアプローチのパフォーマンス上の欠点について説明しました。

afterInsertRow一部の列のスタイルをカスタマイズするために使用する代わりに、代わりに使用する必要がありますcellattr(コード例については、回答またはthis oneを参照してください)。afterInsertRow行のスタイルをカスタマイズするために使用する場合は、rowattr代わりに使用する必要があります (回答を参照してください)。スタイルだけでなく、一部の列の内容をカスタマイズする必要がある場合は、カスタム formatterを使用する必要があります。上記のルールに従えば、afterInsertRowコールバックを使用する必要がなくなり、大きなグリッドの塗りつぶしが非常に速くなります。

于 2013-06-29T11:38:24.687 に答える
0

jqgrid イベントはグリッド プロパティとして定義されているため、setGridParamメソッドを使用してイベント パラメータを再割り当てできます。イベント プロパティを設定してイベントをnull無効にしました。

grid_afterInsertRow名前で簡単に参照できるように、匿名ではありません。setGridParamへの呼び出しが、以前に作成された匿名関数参照を解放するかどうかわからないため、非匿名関数も使用しています。

function grid_afterInsertRow(rowID, rowData, rowElem) {
    // do stuff
}

function toggle_afterInsertRow(isEnabled) {

    if(isEnabled) {
        $('#grid').jqGrid('setGridParam', {afterInsertRow: grid_afterInsertRow});
    } else {
        $('#grid').jqGrid('setGridParam', {afterInsertRow: null});
    }

}

一部のリファクタリングにより、上記のコードの汎用バージョンが提供されます

// usage: toggleGridEvent($('#grid'), true, afterInsertRow, grid_afterInsertRow);
function toggleGridEvent($grid, isEnabled, eventName, callback) {

    var params = {};    

    if(isEnabled) {
        params[eventName] = callback;
    } else {
        params[eventName] = null;
    }


    $grid.jqGrid('setGridParam', {afterInsertRow: grid_afterInsertRow});

}
于 2013-06-28T21:23:19.330 に答える