2012-04-27 36 views
1

Jqgridを使用してデータを表示していますが、DataTypeをローカルとして使用しているため、サーバーにポストバックしてjsonStringをバインドするデータで戻したくありません。私はJson Stringをクライアントに渡し、addRowDataを使用してデータを1つずつ追加しています。私が各セルに持っている情報のためにデータの数が多い場合は、ユーザーに目立つ時間がかかっているようです。クライアント側のデータをJqgridに追加する

for (var i = 0; i < gridData.length; i++) 
     jQuery("#jqgInventory").jqGrid('addRowData', i + 1, JSON.parse(gridData[i])); 

だけで、データソースとしてそれをJsonStringを与え、それが速いか、他の提案にそれを結合する例えば、jqgridするためにデータをバインドする任意の代替方法はあります。

注:DataTypeをJsonとして使用し、postUrlを設定すると、上記の方法よりも速く動作します。

助けてください!事前に おかげで、 アラー

答えて

3

この文はjqGridのドキュメントから直接来る:「グリッドに渡されたローカルデータを保存する配列をあなたが直接あなたが配列データをロードしたい場合には、この変数を指すことができます。それは相対的な大きなデータでは遅いaddRowDataメソッドに取って代わることができます "。それはまさにあなたが話していることです。

ここでそれを参照してください:ここでhttp://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

は、あなたの作業例です:http://jsfiddle.net/yNw3C/649/

あなたは単にオプションで配置する必要があります:my_dataは、情報の配列である

data: my_data 

+0

+1私から。あなたの答えは正しいです。 1)グリッドオプションのリストに 'gridview:true'を追加してパフォーマンスを向上させ、2)視認性を改善するためにheight: 'auto'を追加し、3)rowNumオプションを'10000'か、ページャーをグリッドに追加します。たとえば、 'toppager:true'を追加します。ページャなしのコードは、最初の20行( 'rowNum'のdafault値)をデフォルトで表示し、残りをカットします。 – Oleg

+0

ヒントをいただきありがとうございます、はい、私はちょうど質問で育った問題に取り組んだ。また、ページャを使用するか、表示される最大行数を増やすことをお勧めします。私はちょうどjqgridの例からその例を取っ​​た:http://www.trirand.com/blog/jqgrid/jqgrid.html。データ - >配列データを読み込み、 'data'パラメータを使用するように変換します。何らかの理由で、彼らは例の中で 'addRowData'の規約を使用しています...おそらくしばらく更新されていません。 –

+0

私は適切な例を見つけました。「バージョン3.7の新機能」にもページャーがあり、私はフィドルを更新します。 –

0

私はJeffery_The_Windから別の答えに同意します。彼は推奨するオプションの名前だけを書きません:dataパラメータ。これには、gridview: trueオプションを使用し、afterInsertRowコールバックを使用しないことを追加することが重要です。理解のために

addRowDataの使用は、グリッドを埋めるために、最もゆっくりと非効率的な方法です。ほとんどの問題は、ページ上の要素を挿入したり、Webブラウザで再計算する必要がすべての既存の要素の少なくとも位置要素を変更した場合ということです。ページに配置する要素が増えるほど、次の要素に挿入するのが遅くなります。

一つは主に二つの方法のいずれかで問題を解決する:

  • 一つはDOM要素の独立した階層構造を作成し、ページ上の一回の操作で断片を配置するDocumentFragmentを使用します。
  • HTMLフラグメントを表す文字列として変更のすべてまたはほとんどのコンテンツを作成し、innerHTMLプロパティを使用して、1つの操作で多くの要素をページに配置します。

jqGridは2番目の方法を使用します。この動作を行うには、gridview: trueを使用することが重要です。だから、地元のグリッドを埋めるために推奨される方法があります。データとdatatype: 'local'dataパラメータの

  • 用法。入力dataパラメータの値の標準形式は、行項目を含む配列です。すべてのアイテムは、nameプロパティの値がcolModelのような同じプロパティを持ちます。さらに、すべての項目には、グリッドの<tr>要素(行)のIDである "rowid"を定義するプロパティーがidである必要があります。別の形式の入力データがある場合は、データ形式を記述するlocalReaderパラメータを使用する必要があります。
  • 入力データを指定するパラメータdatatype: 'jsonstring'およびdatastrの使用。 datastrの値は、JSON文字列または同じ内容のJavaScriptオブジェクトのいずれかになります。したがって、データをオブジェクトとして持つ場合は、JSON.stringifyを使用してJSON文字列に変換する必要はありません。あなたはおそらくdatatype: 'json'について知っているのと同じフォーマットでjsonReaderを追加で使うことができます。

datatype: 'jsonstring'の場合)、メイン差分(datatype: 'local'の場合)dataパラメータからのデータの挿入とdatastrパラメータは、入力データがdataパラメータとの意志の使用の場合にjqGridでソートされることですdatastrパラメータの場合はソートされません。

関連する問題