データソースとして協力する複数のタイプのデータセットをサポートします
JQGridは、XML、JSON、およびARRAYSの3つのタイプのデータをバインドできます。さまざまなデータ型を使用することは、主にDatAtype属性を設定するために、その値は「XML」、「JSON」、「ローカル」（配列）です。
$（ "＃grid1"）。jqgrid（........ datatype： "xml"、.......）;
以下には、さまざまなデータ型の形式を示します
XML形式：
<rows> <page> </page> <total> </total> <records> </records> <row id = "rowid"> <cell> value1 </cell> ......... <cell> valuen </cell> </row> </rows>
JSON形式
{"page"： "page number"、 "rows"：[{name1： 'value1'、name2： 'value2'、.... namen： 'valuen'}、.... {..}]、 "total"：record count、 "records"：合計レコード数}}
配列形式
var datas = [{name1： 'value1'、name2： 'value2'、...... namen： 'valuen'}、.... {....}]; //（var i = 0; i <= mydata.length; i ++）{jquery（ "＃grid1"）。jqgrid（ 'add（' add grid1 "）。または、データ属性を設定します
$（ "＃grid1"）。jqgrid（...... data：mydata、datatype： 'local'、.......）;
統計操作の機能
FooterrowをTrueに設定し、GridCompleteイベントをバインドします。
$（ "＃grid1"）。jqgrid（...... footerrow：true、gridcomplete：completemethod、........）; function completemethod（）{var sum_amount = $（ "＃grid1"） sum_total = $（ "＃grid1"）。統計の場合は、getColメソッドを使用します。最初のパラメーターはcolmodeの名前値であり、2番目のパラメーターはfalseに設定されます。それ以外の場合、データの代わりに配列が返されます。 3番目は、「sum」、「avg」、「count」などの統計方法を設定することです。
選別
列のタイトルをクリックして、登場または下降順に列を並べ替えてください。列がソートを許可するかどうかを設定し、列プロパティでソート可能なソートを設定します。同時に、さまざまなデータ型の場合、INT/INTEGER INTEGER、FLOAT/番号/通貨フローティングポイントタイプ、日付、テキストテキスト、および関数を定義してカスタムソートルールを実装する機能など、対応するソートタイプを設定する必要があります。
$（ "＃grid1"）。jqgrid（........ colmodel：[...... {name： 'id'、index： 'id'、width：60、myexport：true、editable：true、sorttype： "int"、sortable：true}、....................................................グループ化
var mydata = [{id： "1"、Invdate： "2010-05-24"、name： "test"、note： "note"、tax： "10.00"、合計： "2111.00"} 、{id： "2"、Invdate： "2010-05-25"、name： "test2"、note： "note2"、tax： "20.00"、合計： "320.00"}、{id： "3"、Invdate： "2007-09-01"、name： "test3"、 "note3"、 "30.00"、 "30.00"、 "30.00"、 "30.00"、 "430.00"}、{id： "4"、Invdate： "2007-10-04"、name： "test"、note： "note"、tax： "10.00"、合計： "210.00"}、{id： "5"、Invdate： "2007-10-05"、 "test2"、Note： "" 20.00 "：" 20.00 " 、合計： "320.00"}、{id： "6"、Invdate： "2007-09-06"、name： "test3"、note： "note3"、税： "30.00"、合計： "430.00"}、{id： "7"、invdate： "" "2007-10-04"、 "test：" "、" tax： " "10.00"、合計： "210.00"}、{id： "8"、invdate： "2007-10-03"、name： "test2"、note： "note2"、金額： "300.00"、税： "21.00"、合計： "320.00"}、{id： "" 9 "、invdate：" 2007-09-01 "、" 2007-09-01 "、 「test3」、注： "note3"、金額： "400.00"、税： "30.00"、合計： "430.00"}、{id： "11"、invdate： "2007-10-01"、name： "test"、note： "note：" 200.00 "、税：" 10.00 "、合計：" 210 .00 "}、{id：" 12 "、Invdate：" 2007-10-02 "、name：" test2 "、note：" note2 "、金額：" 300.00 "、税：" 20.00 "、合計：" 320.00 "}、{id：" 13 "、invdate：" "2007-09-01" TE3 "、額：" 400.00 "、税：" 30.00 "、合計：" 430.00 "}、{id：" 14 "、invdate：" 2007-10-04 "、name：" test "、note：" note "、" 200.00 "、税：" 10.00 "、合計：" 210.00 "}、{id：" 15 "、i nvdate： "2007-10-05"、name： "test2"、note： "note2"、金額： "300.00"、税： "20.00"、合計： "320.00"}、{id： "16"、invdate： "2007-09-06"、name： "test3"、note： "400 .00 "、税：" 30.00 "、合計：" 430.00 "}、{id：" 17 "、invdate：" 2007-10-04 "、name：" test "、note：" note "、金額：" 200.00 "、税：" 10.00 "、合計：" 210.00 "}、{id："、 "2007-10-" 03 "、name：" test2 "、note：" note2 "、金額：" 300.00 "、税：" 20.00 "、合計：" 320.00 "}、{id：" 19 "、Invdate：" 2007-09-01 "、名前：" test3 "、note：" note3 "、" 400.00 "、" 30.00 "" 30.00 " 、、合計： "430.00"}、{id： "21"、Invdate： "2007-10-01"、name： "test"、note： "note"、金額： "200.00"、税： "10.00"、合計： "210.00"}、{id： "22"、invdate： "" 2007-02 "、" test2 "、" test2 "、" test2 "、" 、注：「Note2」、金額： "300.00"、税： "20.00"、合計： "320.00"}、{id： "23"、Invdate： "" 2007-09-01 "、Name：" test3 "、注：" Note3 "、金額：" 400.00 "、税：" 30.00、合計： "430.00"} 、{id： "24"、Invdate： "2007-10-04"、name： "test"、note： "note"、rument： "200.00"、tax： "10.00"、合計： "210.00"}、{id： "25"、Invdate： "2007-10-05"、 "2007-10-05"、name： "test2"、note2 "、 'am ount： "300.00"、税： "20.00"、合計： "320.00"}、{id： "26"、Invdate： "2007-09-06"、name： "test3"、note： "note3"、 "400.00"、税： "30.00"、合計： "430.00" e： "2007-10-04"、名前： "Test"、note： "note"、 "200.00"、税： "10.00"、合計： "210.00"}、{id： "28"、Invdate： "2007-10-03"、名前： "test2"、note： "note2"、 "300.00"、ta x： "20.00"、合計： "320.00"}、{id： "29"、invdate： "2007-09-01"、name： "test3"、note： "note3"、金額： "400.00"、税： "30.00"、合計： "430.00"}]; jquer（ "＃lid48"）。 「ローカル」、高さ： 'auto'、rownum：30、rowlist：[10,20,30]、colnames：['inv no'、 'date'、 'client'、 'lument'、 'tax'、 'total'、 'notes']、colmodel：[{name： 'id'、index： 'id'、width：60、 sortType： "int"}、{name： 'Invdate'、index： 'Invdate'、width：90、sortType： "date"、formatter： "date"}、{name： 'name'、index： 'name'、width：100、editable}、{name}、{name： 'lame'、index： 'floign： " Formatter： "number"、editable：true}、{name： 'tax'、index： 'tax'、width：80、align： "right"、sorttype： "float"、editable：true}、{name： 'total'、index： 'total'、width：80、align： "right"、sorttype： "float"}、 "'not：並べ替え可能：false}]、ページャー： "＃plist48"、viewrecords：true、sortname： 'name'、grouping：true、groupingView：{groupfield：['name']}、キャプション： "グループ化配列データ"}）;より複雑なソートもありますので、JQGridデモを見てみましょう！
フィルター
JQGridフィルタリングは、グリッド内のコンテンツをフィルタリングするのではなく、実際にデータベース内のデータをフィルタリングしています。
HTML：
<表ID = "s2List"> </table> <div id = "s2pager"> </div>
JavaScript：
jQuery（ "＃s3list"）。jqgrid（ 'navgrid'、 '＃s3pager'、{edit：false、add：false、del：false、search：false、false：false}）; jQuery（ "＃s3list"）。jqgrid（ 'navbuttonadd'、 "＃s3pager"、{caption： "トグル"、タイトル： "トグル検索ツールバー"、buttunicon： 'ui-icon-pin-s'、onclickbutton：function（）{mygrid [0] .toggletoolbar }}）; jQuery（ "＃s3list"） jQuery（ "＃s3list"）。jqgrid（ 'filtertoolbar'）;ツールバーとページネーションバーを追加、削除、変更、チェックします
JQGridには、ボタンを追加、変更、削除、クエリすることができるページングバーが付属しています。
HTMLにもう1つのレイヤーを追加すると、このレイヤーはページングバーを保存します。
<div id = "pager"> </div> $（ "＃grid1"）。jqgrid（...... pager： "＃pager"、//このプロパティもオプションのページサイズのrowlist：[10、20、30]、......）; //編集、追加など。ブール値を設定することにより、jQuery（ "＃grid1"）を表示するかどうかを決定します。Jqgrid（ 'navgrid'、 '#pager'、{edit：true、add：true、del：true、search：true、refresh：true}）; // 280、reloadaftersubmit：false}、// edit options {height：280、reloadaftersubmit：false}、// add options {reloadaftersubmit：false}、// del options {} // search options）;編集する前に、colmodelの編集可能な列に編集可能な値をtrueに割り当てることを忘れないでください。
ページのデータを読む
上記のページネーション以来、以下は別のページネーション方法を導入します。これは、スクロールバーを介してページをめくることです。このページネーション方法では、データベース内のすべてのデータはすぐにグリッドに入力されていないが、現在スクロールバーを閲覧しているデータのページを取得するために使用され、データの部分がデータベースから読み取られます。
$（ "＃grid1"）。jqgrid（...... //これは、スクロールページングスクロールに従ってデータを読み取ります。
次の例では、ローカルデータのみを使用しているため、スクロールとターニングページの効果も実現します。
jQuery("#scrolling").jqGrid({scroll: 1,datatype: "local",data:mydata,height: 100,width: 600,colNames: ['Index', 'Name', 'Code'],colModel: [{ name: 'id', index: 'id', width: 65 },{ name: 'name', index: 'name', width: 150 }、{name： 'note'、index： 'note'、width：100}]、rownum：5、gridview：true、pager： '＃pscrolling'、sortname： 'item_id'、view Records： "asc"、caption： "while scrolling" while scrolling "）;父と息子のテーブル
サブテーブルは、次の設定で使用できます
$（ "＃grid1"）。jqgrid（...... //サブテーブルサブグリッドを有効にする：true、subgridurl： '........'、//サブテーブルサブグリッドモデルの属性を設定します：[{name： 'name1'、 'name2'、......、 'namen']、width1、width2、...... ..ここのサブテーブルの設定は、最も基本的なものです。属性の詳細については、http：//www.trirand.com/jqgridwiki/doku.php?id=wiki：subgridを参照してください
セル値を取得/設定します
特定のセルの値を取得するために、GetCell（Rowid、ICOL）が呼び出されます。 ICOLは、現在Colmodelにリストされている位置インデックスまたは名前値のいずれかにすることができます。注：行またはセルを編集する場合、この方法は使用できません。現時点では、返された値は変化した値ではなく、元の値です。
特定のセルの値を設定します。SetCell（Rowid、colname、data、class、プロパティ）。 Rowid：現在の行ID; colname：0から始まる列名、または列位置インデックス。データ：セルのコンテンツを変更し、空の場合は更新されません。クラス：文字列の場合、AddClassメソッドを使用してセルのCSSに追加され、配列の場合はスタイルプロパティに直接追加されます。プロパティ：セルプロパティColmodelを設定します。
もちろん、行または列を取得/設定することもできます。ここでは、http://www.trirand.com/jqgridwiki/doku.phpのget/set/addのメソッドを確認できますか？
id = wiki：メソッド
データ検証
colmodelのeditrulesプロパティを設定することにより、入力データを確認できます
jQuery（ "＃grid_id"）。jqgrid（{... colmodel：[... name： 'price'、...、edittrules：{edithidden：true、required：true ......}、editable：true}、...] ...}）;以下は、利用可能な検証オプションです
縞模様の列を設定します
jQuery（ "＃ghcs"）。jqgrid（ 'setgroupheaders'、{// colspanstyleを使用してcolspan効果を有効にするかどうかを設定：false、groupheaders：[{colname '、// merge列グループ番号ofofcolumnsの最初の列名： }エディタ
jqgridのテンプレート列には、「テキスト」シングルラインテキストボックス、「テキストアレア」マルチラインテキストボックス、「ドロップダウンボックス」を選択するなど、いくつかの非常に基本的なエディターが付属しています。「ドロップダウンボックス」チェックボックス、「パスワードパスワードボックス」、「パスワード」ボタン、「ファイル」ボタン、「ファイルアップロードボックス、「カスタム」ボタン」
colmodelで編集をセットします
jQuery（ "＃grid_id"）。jqgrid（{... colmodel：[... name： 'price'、...、editable：true、edittype： 'text'、editoptions：{size：10、maxlength：15} ......}、...] ...] ...}）;編集はエディターのいくつかの設定であり、テキストボックスはサイズ、最大長などを設定できます。チェックボックスは値を設定できます。
ditoptions：{value： "yes：no"}
ドロップダウンボックスはこの形式です
編集：{value： "val1：text1; val2：text2; val3：text3"}
詳細については、http：//www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittypeを参照してください
テンプレート列は他の編集者を呼び出します
上記で導入されたエディターは、HTMLのフォーム要素のみを使用しており、以下に紹介したものはプラグインを呼び出します。
<script src = "js/my97datepicker/wdatepicker.js" type = "text/javascript"> </script> <script = "text/javascript"> function initdatepicker（cl）{$（cl）.click（function（）（function（） {wdatepicker（）;}）;} .... jquery（ "＃grid_id"）。jqgrid（{... colmodel：[... {name： 'date'、...、editable：true、edittype： 'text'、editoptions：{datainit：initainit：initainit：initainit：initainit：initainit：} .....}、...}、...ここでは、My97DatePickerプラグインがカレンダーエディターと呼ばれます。
テンプレート列に複数のコントロールを配置する場合は、次の方法を使用できます
jQuery（ "＃grid_id"）。jqgrid（{... afterinsertrow：function（rowid、adata）{var controls = ""; //テンプレートに配置されたコントロール...... $（ "＃grid_id"）。jqgrid（ 'setcell'、rowid、 'タグ'、コントロール）;} ...}）;これは、グリッドセルでHTMLを編集することで実際に実現されます。
Cell Selection Imitation Excelを移動します
セル編集モードを設定した後、アップ、ダウン、左、右のナビゲーションキーを編集する必要があるセルにジャンプできます。Enterを押して編集状態を入力し、ESCキーを押して変更を保存しないで、Enterを押して変更を保存します。
jQuery（ "＃grid_id"）。jqgrid（{... celledit：true、cellubmit： 'clientArray'、//セルコンテンツストレージのデフォルト値 'remote' ...}）;上記は、編集者が紹介したJQGridの使用の要約です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！