前回はほとんど導入のみだった気もするので、今回は編集メインで組んでみました。
行の追加、行の編集、行の削除、それと簡易絞込み検索を実装しています。
jqGridデモ
※TOK2で404となっていました。すみません…
主な機能
- 行選択での各種セル編集
edittype:'custom'による独自定義- ナビゲート機能による行追加、行削除
- ナビゲート機能による簡易絞込み検索
なお、簡易絞込みで部分一致と思われる「次に含まれる」は完全一致検索をしている気がしてなりません。
解説
jqGridの基本コード
$('#tableのid').jqGrid({// [jqGridのプロパティ] http://www.jqueryhelp.net/basicgrids/properties/
datatype: 'local' // データタイプ
, colNames: ['テキスト', 'テキストエリア', 'チェック', 'セレクト', 'カスタム(日付)'] // カラム名
, colModel: [
{name:'text', index:'text', sorttype:'text', editable:true, edittype:'text'}
,{name:'textarea', index:'textarea', sorttype:'textarea', editable:true, edittype:'textarea', editoptions:{rows:'2', cols:'10'}}
,{name:'check', index:'check', sorttype:'checkbox', editable:true, edittype:'checkbox', editoptions:{value:'1:0'}}
,{name:'select', index:'select', sorttype:'select', editable:true, edittype:'select', editoptions:{value:'1:1;2:2;3:3'}}
,{name:'date', index:'date', sorttype:'date', editable:true, edittype:'custom', editoptions:{custom_element:elmDate, custom_value:valDate}}
] // カラム設定
, data: [
{id:'1', text:'文字列1', textarea:'複数文字列1', check:'1', select:'1'}
,{id:'2', text:'文字列2', textarea:'複数文字列2', check:'0', select:'2'}
,{id:'3', text:'文字列3', textarea:'複数文字列3', check:'3', select:'3'}
] // 読み込むデータ
, rowNum: 10 // 1ページの表示件数
, rowList: [5, 10, 15] // rowNumの選択リスト
, height: 150 // グリッドテーブルの高さ
, width: 640 // グリッドテーブルの幅
, pager: 'ページャdivタグのid' // ページャ
, shrinkToFit: true // カラム幅の自動調整
, viewrecords: true // フッタの右下に件数情報を表示
, multiselect: true // グリッドの左端選択チェック
//, cellEdit: true // セル編集の許可 ※セル編集を許可するとテキストエリアで改行よりも値確定が優先されるっぽい
, cellsubmit: 'clientArray' // セル編集時にsubmitする先。ローカルの場合は'clientArray'
, editurl: 'clientArray'
, loadonce:true
, onSelectRow: onSelectRowFunc
});
基本的には前回とほとんど似たような定義です。
グリッドテーブルをローカルで使用する場合、cellSubmitやediturlに'clientArray'を定義してあげる必要があります。
グリッドテーブルの各行を選択した際に、cellEditがtrueだと自動的に編集モードになります。
ただし、コメントに記載したとおり、編集モードでテキストエリアに改行を挿入しようとすると値確定されてしまいます。
そのため、今回は行選択時にonSelectRow内で手動で編集モードにしています。
行選択での各種セル編集
var lastSel;
function onSelectRowFunc(id) {
if(id && id!==lastSel){ // 別の行選択時
//$(this).restoreRow(lastSel); // 前の編集行をキャンセル
$(this).saveRow(lastSel); // 前の編集行を確定
lastSel = id;
}
$(this).editRow(id, true);
}
前述したように、onSelectRowでonSelectRowFuncという関数を呼んでいます。
関数の中身は以下を参考にしています。
edittype:'custom'による独自定義
/**
* edittype:customの要素を生成する関数
* @param value 現在の値
* @param options 要素のオプション
*/
function elmDate(value, options) {
var elm = $('<input>', {type:'text', value:value}).attr('readonly',true).css('width', '80').datepicker({dateFormat:"yy/mm/dd"});
return elm;
}
/**
* edittype:customの値確定時に送信する値
* @param elem 編集中の要素
* @param operation "get"or"set"
* @param value ? operationがsetのときに何かくる
*/
function valDate(elem, operation, value) {
return $(elem).val();
}
colModelで最後の列はカスタムの編集モードを定義しています。
定義の際には、edittype:'custom', editoptions:{custom_element:生成関数, custom_value:返却関数}を設定します。
editoptionsの2つの関数では、custom_elementで編集モードの際に要素を生成し、custom_valueで値確定時に参照モードへ渡す値を返却します。
今回はjQuery UIのDatepickerを使って、日付入力を行うテキストボックスを用意しました。
ナビゲート機能
$("#tableのid").jqGrid("navGrid", "#pagerのid", {
edit:false
, add:true
, del:true
, refresh:true
, search:true
, addfunc:addFunc
, delfunc:delFunc
}
, {} // editパラメータ
, {reloadAfterSubmit:false} // addパラメータ
, {reloadAfterSubmit:false} // delパラメータ
, {multipleSearch:false, multipleGroup:false, showQuery: false} // searchパラメータ
, {} // viewパラメータ
);
function addFunc() {
$("#tableのid").addRowData(undefined, {}, "last");
}
function delFunc() {
var selectRows = $("#tableのid").getGridParam('selarrrow');
var delRowNum = selectRows.length;
for (var i=delRowNum-1; i>=0; i--) {
$("#taboeのid").delRowData(selectRows[i]);
}
$("#tableのid").resetSelection()
}
グリッドテーブル下部にあるページャにナビゲート機能を付与しています。
今回は追加、削除、簡易絞込み検索、更新のボタンを有効にしています。
各引数内で使用できるオプションは以下に掲載されています。
本来は、追加や削除ボタンを押したときには標準のダイアログが表示されますが、今回はaddfunc、delfuncで処理を上書きしています。
というのも、ローカルで全てを完結するために'clientArray'を使用しているのに、標準のナビゲート機能を使った追加・削除では上手くローカルで機能しなかったためです。意味わかんないです。
上書きした追加・削除処理は以下のサイトを参考にさせてもらいました。
ただ、上記のサンプルでは行削除後にソートを行うと、削除したデータが復活します。
正常に削除しつつ、ソートが効くようにresetSelectionを最後に呼ぶようにしています。
と、こんな感じで、いろいろできるようになっています。
