jqGridの備忘録「グリッドを更新する方法」

本日は少々毛色の違う話題を。

私は、お仕事でプログラムを書いている。いわゆるLAPP(Linux Apache PostgreSQL PHP)という奴である。
ブラウザ側では、jQueryやjqGridを使って非同期通信をやっている。いわゆるAJASON（Asynchronous JavaScript + JSON）という奴である。

なんで、Ajax（XMLを使う）でなくAJASON（JSONを使う）かというと変換が楽だから！といういたって不精な理由である。（;´▽｀A``

当然、XMLを使わないことで出来ないこともあるわけだが、変換が楽という対価には代えがたい。

jqGridの詳細についてはこことかここを参照して頂きたい。
簡単に言うと表を作ってくれる便利なツールである。しかし案外ネットの情報が少ないと思う。（何度となくネットの情報の渦にのまれたことか・・・。）

かつ、おっさんなのでなんでもすぐに忘れてしまう。そこで備忘録。(^_^;


＜表を作成＞
this.createGrid = function(){
	$('#表のID').jqGrid( {
		data : this.gridData, // 配列要素が格納された２次元配列
		datatype : 'local',
		colNames : [ '項目１', '項目２', '項目３', '項目４' ],
		colModel : [ 
		{name : 'no1', width : 50, sorttype : 'int', align : 'right'},
		{name : 'no2', width : 80, sorttype : 'str', align : 'center'},
		{name : 'no3', width : 80, sorttype : 'str', align : 'center'},
		{name : 'no4', width : 80, sorttype : 'str', align : 'left'}
		],
		width : 390,
		height : 250,
		rowNum : 30,
		rownumbers : true,
		onSelectRow : function(id) {
					var grid = $("#表のID").jqGrid("getRowData",id);
					alert(grid.no1); // 選択した行の項目1の内容を表示する
					},
		gridview : true,
		viewrecords : true,
		caption: '表のタイトル',
		pager : 'ページャー要素のID'
	});
};

と宣言して表を作成するメソッドを作成。
この表を更新する方法として２パターンある。

１．グリッドを初期化して１行１行追加する方法
　速度的に使い物にならない！特に行数が多い場合は終わってる・・・。

　コマンドは以下の通り。

　$("#表のID").clearGridData();　// 表を初期化するコマンド
　$("#表のID").jqGrid("addRowData",行番号,'その行の配列(no1,no2,no3,no4)'); // 行を追加するコマンド

２．表を削除して再作成する方法
　お勧めはこちら。一回表を削除して２次元配列を "data"で宣言している２次元配列に渡してしまう。

　具体的には、

　$("#表のID").GridUnload(); // 表を削除
　this.gridData = []; // 変数を初期化
　this.gridData = 取得した２次元配列; // 変数を設定
　this.createGrid();

　これで処理速度は１０倍～１００倍くらい早くなります。

ラッキー！

jqGridの備忘録 「グリッドを更新する方法」

jqGridの備忘録「グリッドを更新する方法」