たまにjqGridに触れる機会があります。
前回のサンプルでは単純なグリッドテーブルで行の追加や削除は実装していませんでした。
jqGridのデータはサーバから取得することが多いですが、ローカルにデータを持って追加や削除を行うことも可能です。
datatype: 'local' loadonce: true
行の追加、編集、削除はそれぞれ以下のメソッドを使います。
行追加
jQuery("#grid_id").addRowData( rowid, data, position, srcrowid );
行編集
jQuery("#grid_id").editRow(rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc);
urlには'clientArray'を指定することでローカル編集ができます。
行削除
jQuery("#grid_id").delRowData( rowid );
注意点として、rowidにユニークな値を入れておかないと、ソート時にリロードされてローカルで編集したデータがリセットされます。
これで、ある程度さっくりとローカル編集可能なグリッドテーブルが実現できました。サンプルは近いうちに公開します。
ただ、このときにdelRowDataを行うとソートが効かなくなってしまいます。
調べてみると、ソートを行う際にjqGridの以下のメソッドが呼ばれているのが分かりました。
(省略)
sortData = function (index, idxcol,reload,sor, obj){
if(!ts.p.colModel[idxcol].sortable) { return; }
if(ts.p.savedRow.length > 0) {return;}
if(!reload) {
if( ts.p.lastsort === idxcol ) {
if( ts.p.sortorder === 'asc') {
ts.p.sortorder = 'desc';
} else if(ts.p.sortorder === 'desc') { ts.p.sortorder = 'asc';}
} else { ts.p.sortorder = ts.p.colModel[idxcol].firstsortorder || 'asc'; }
ts.p.page = 1;
}
(省略)
delRowDataを行うと、削除したデータがsavedRowに格納されており、lengthが0より大きくなってreturnされています。
これは、どうやら復旧用のデータのようで、保存時または復旧時に削除されるものだそうです。
参考：wiki:inline_editing - jqGrid Wiki
一応、getGridParamでアクセス可能な領域ではあるのですが、読み取り専用でsetGridParamでは編集できません。
仕方なしにjqGridのソースを追っていると、いくつかのメソッドで削除している記述がありました。
その1つがresetSelectionというメソッドです。
本来は、multiselectのプロパティで表示されるチェックボックスの行選択を解除するメソッドなようです。
delRowDataで行を削除後、resetSelectionで行選択を解除しつつsavedRowに格納された復旧データを空にしてあげることで、ソートが効くようになりました。
jQuery("#grid_id").delRowData( rowid ); jQuery("#grid_id").resetSelection();
いずれ、サンプル作ります。
サンプル作りました。
