コピペで使える JavaScript逆引きリファレンス

JavaScript/jQuery開発時に、こそっとお使いください。

jqGrid

[jqGrid] 主要オプション一覧

投稿日:2018年5月10日 更新日:

jqGridの主要オプション一覧です。

オプション

オプションには値で動きや見た目を指定するものと、
イベント発生時に呼び出されるものがあります。

【値を指定するオプション】
オプション意味
caption表のタイトルを指定する
例)caption:'タイトルです'
colNames列のタイトルを指定する ※文字の配列で指定します
例)colNames:['列1', '列2', '列3']
colModel列単位の設定 ※オブジェクトの配列で指定します
 index:インデックス名
 name:name名
 width:横幅
 align:横位置('left','center','right')
 editable:編集の可否(true, false)
 editoptions:
 sortable:ソートの可否(true, false)
 sorttype:数値としてソートする場合は'integer'
 resizable:列幅リサイズの可否(true, false)
data表示するデータ ※オブジェクトの配列で指定します
datatypeデータの種類 'local', 'json', 'xml'
rowNum1ページに表示する行数
 例)rowNum:10
rowListページャーの選択肢 ※数値の配列で指定します
 例)rowList:[10,20,50]
height表の高さ ※数値または'auto'で指定します。
width表の幅 ※数値または'auto'で指定します。
autowidth列幅を自動とするかどうか
 true:自動
 false:固定
pagerページャーの要素ID
toppagerページャーをグリッドの上部に表示するかどうか
 true:表示する
 false:表示しない
viewrecordsフッターの右下に表示中の行番号を表示
sortname初期表示時のソート列名を指定
sortorder初期表示時のソート順 'asc' 'desc'
 ※sortnameで指定した列に対して有効です
multiSort複数ソートの可否
 true:複数ソート可
 false:複数ソート不可
multiselect複数選択の可否
 true:複数選択可
 false:複数選択不可
multiselectWidth選択列の幅
 例)multiselectWidth:100
 ※multiselect:trueの場合のみ有効です
cellEdit値の編集可否
 true:編集可
 false:編集不可
cellsubmit
editurl
rownumbers行番号を表示するかどうか
 true:表示
 false:非表示(デフォルト)
rownumWidth行番号列の幅
 例)rownumWidth:100
 ※rownumbers:trueの場合のみ有効です
shrinkToFit表の横幅のサイズに列幅を自動調整するかどうか
 true:する
 false:しない(widthで指定した値でスクロール)
【イベント発生時に呼び出されるオプション】
イベント意味
loadCompleteグリッドのロードが完了した時点で呼ばれる
(引数に渡ってくる値)
 第1引数:グリッドの情報
onSelectRow行選択時に処理を行う
(引数に渡ってくる値)
 第1引数:行番号
 第2引数:multiselect=true時、選択時はtrue、解除時はfalse
 第3引数:行の情報
onSortColソートが行われる直前
(引数に渡ってくる値)
 第1引数:対象列名
 第2引数:列番号
 第3引数:ソート順(asc/desc)
onRightClickRow右クリックが押されたとき
(引数に渡ってくる値)
 第1引数:rowid
 第2引数:行番号
 第3引数:列番号
 第4引数:e

スポンサーリンク

スポンサーリンク

-jqGrid

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[jqGrid] 指定した行の値を更新する

jqGridで指定した行の値を更新するサンプルです。 サンプルソース 例)ボタンを押すと、2行目のデータを指定したデータ ...

[jqGrid] グリッドの値を取得する

グリッドに表示している値を全て取得するには、.getGridParam("data")を使用します。 サンプルソース 例 ...

[jqGrid] 行番号列を表示する

jqGridに行番号列を表示するサンプルです。 サンプルソース 例)行番号列を表示するサンプル [crayon-5b06 ...

[jqGrid] 選択行の行番号を取得する

jqGridで選択行の行番号を取得するサンプルです。 サンプルソース 例)ボタンを押すと選択行の行番号をコンソールに出力 ...

[jqGrid] 編集可能なグリッド

jqGridを編集可能なグリッドにするサンプルです。 サンプルソース 例)編集可能なグリッドサンプル [crayon-5 ...

スポンサーリンク