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を編集可能なグリッドにするサンプルです。 サンプルソース 例)編集可能なグリッドサンプル [crayon-5 ...

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

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

[jqGrid] グリッド内にリンクを表示する

jqGridでグリッド内にリンクを表示するサンプルです サンプルソース 例)「コード」列にリンクを設定する [crayo ...

[jqGrid] グリッドロード完了時に処理を行う(loadComplete)

jqGridでグリッドロード完了時に処理を行うサンプルです サンプルソース 例)グリッドロード完了時にアラート表示する ...

[jqGrid] 列幅変更時に処理を行う(resizeStart、resizeStop)

jqGridで列幅変更時に処理を行うサンプルです サンプルソース 例)列幅変更時にアラート表示する [crayon-5c ...

スポンサーリンク