1

JQgridレンダリングでパフォーマンスの問題があります。お知らせ下さい。

JQGrid v4.3.2、jquery-1.7.2.min.js、jquery-ui-1.8.1.sortable.min.js、jquery-ui-1.8.20.custom.min.jsブラウザー：IE6,7

すべてのユーザーには、アクションとfyiの2つのグリッドでデータが表示されます。通常のデータ範囲は、各グリッドで最大300行です。列のリストはユーザーグループによって異なる可能性があるため、colModel構造は動的です。データを取得した後、各行に条件付きスタイルを適用し（太字にするかどうかなど）、数値の書式を変更します。

グリッドのコードサンプルは次のとおりです。

jQuery('#ActionItems').jqGrid({
    url: 'http://actionsurl',
    mtype: 'GET',
    datatype: 'json',
    page: 1,
    colNames: actionsColNames,
    colModel: actionsColModel,
    viewrecords: true,
    loadonce: true,
    scrollrows: false,
    prmNames: { id: "PrimaryID" },
    hoverrows: false,
    jsonReader: { id: "PrimaryID" },
    sortname: 'CreateDt',
    sortorder: 'desc',
    gridComplete: function () {
        fnActionsGridComplete();
    },
    recordtext: "Displaying {1} of {2} Records",
    emptyrecords: "No data to view",
    emptyDataText: "No data found.",
    loadtext: "Loading...",
    autoWidth: true,
    rowNum: 1000,
    grouping: true,
    groupingView: groupingViewOp
});

fnActionsGridComplete（）のコードのフォーマット：

  1. 列幅を％で設定します

  2. 行を繰り返し処理して、条件付きcssスタイルを適用します

    $("#Actions").find("tbody tr").each(function () {
    if ($(this)[0].id != '') { 
        var data = $(this).find('.IsItemNew').html();
            if(data == "Y") {            
            $(this).css("fontWeight", "bold");
            }                
    }                    
});
  3. 特定の列のフォーマット。

現在、どのグリッドでも200行を超えるデータのパフォーマンスに問題があります。分析の結果、フォーマットとレンダリングに最も時間がかかることがわかりました。

ここでパフォーマンスを改善するための最適な方法を提案できますか。（ページングは​​ノーノー）

よろしく、ラジャニ

-IE9とそのはるかに優れたテストを行いました。ただし、ユーザーはすぐにアップグレードすることはできません。

4

1 に答える 1

3

理由はコードfnActionsGridCompleteです。ページのDOM要素の変更の数を使用して減らすことが非常に重要である理由を説明する回答を読むことをお勧めします。gridview: true

あなたがやろうとしていることはcellattr、列に追加することで実装できるよう"IsItemNew"です。コードは次のようになります

cellattr: function (rowId, value) {
    // additional parameter of cellattr: rawObject, cm, rdata are optional
    if (value === "Y") {
        return ' style="font-weight:bold;"';
    }
}

classまたは、クラスの代わりに属性を追加してクラスstyleで定義することもできますfont-weight: bold。

答え、これ、これなどを読むことをお勧めします。セルだけでなく行全体にいくつかのプロパティを設定する必要がある場合は、使用できますrowattr（答えを参照）。

、またはカスタムフォーマッタを含めgridview: trueて使用すると、グリッドのパフォーマンスがまったく別のレベルになることがわかります。cellattrrowattr

于 2012-12-18T12:54:11.983 に答える