jqGrid で ごにょごにょしてみた。（反省会）
はい、まず反省会から
こんな記事を書きながらも、、、データ更新時な、なんと、、、
ページングがぶっ壊れてましたorz
動作確認まともにしていない証拠ですNE!
ほかにも、データが多い状態で少ないデータを取得した場合のデータの入れ替え不備等々問題だらけ（ＴＴ
色々試して見たものの取りあえず、暫定版を公開しなおすことにしました。
そして頓挫、初期からテーブルを出していなければ、データ更新が上手くいかないという罠
やり方は色々あるかもしれないけれど如何せん調べきれなかったので、
今回は初期テーブルを出した後、ボタンクリックによって再描画処理を行うような何かにしてみようかと思います。
やりたいこと
～ 前回まで ～
・データはajaxで取得
・ページング
・フィルタリング
・ソート
・フォーマッターの使用
・ボタンを押した際のデータの更新
～今回～
・不要カラムの削除
・データはajaxでPOSTで取得(なぜGETにしていたんだorz)
・まともなページング
でソース
test.json
[ {"test_id":"10","test_name":"テスト名1","test_id2":"10","test_name2":"テスト名10"}, {"test_id":"11","test_name":"テスト名2" ,"test_id2":"11","test_name2":"テスト名11"}, {"test_id":"12","test_name":"テスト名3" ,"test_id2":"12","test_name2":"テスト名12"}, {"test_id":"13","test_name":"テスト名4" ,"test_id2":"13","test_name2":"テスト名13"}, {"test_id":"14","test_name":"テスト名5" ,"test_id2":"14","test_name2":"テスト名14"}, {"test_id":"15","test_name":"テスト名6" ,"test_id2":"15","test_name2":"テスト名15"}, {"test_id":"16","test_name":"テスト名7" ,"test_id2":"16","test_name2":"テスト名16"}, {"test_id":"17","test_name":"テスト名8" ,"test_id2":"17","test_name2":"テスト名17"}, {"test_id":"18","test_name":"テスト名9" ,"test_id2":"18","test_name2":"テスト名18"}, {"test_id":"19","test_name":"テスト名10","test_id2":"19","test_name2":"テスト名19"}, {"test_id":"20","test_name":"テスト名11","test_id2":"20","test_name2":"テスト名20"}, {"test_id":"21","test_name":"テスト名12","test_id2":"21","test_name2":"テスト名21"}, {"test_id":"22","test_name":"テスト名13","test_id2":"22","test_name2":"テスト名22"}, {"test_id":"23","test_name":"テスト名14","test_id2":"23","test_name2":"テスト名23"} ]
index.html
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" media="screen" href="/jqgrid/css/jquery-ui.min.css" rel="stylesheet" />
<link type="text/css" media="screen" href="/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="/jqgrid/js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="/jqgrid/js/jquery.jqGrid.min.js" ></script>
<script type="text/javascript" src="/jqgrid/js/i18n/grid.locale-ja.js" ></script>
<style>
.link{
text-align : center;
padding : 3px;
background-color : #ffffff;
width : 50px;
height : 30px;
cursor : pointer;
border : solid 1px;
}
</style>
<script type="text/javascript">
$(function(){
$("#test").ready(function(){
$("#list").jqGrid({
data: [],
datatype: "local",
colNames:['ID', '名前','ID2','名前2'],
colModel:[
{name:'test_id'},
{name:'test_name', formatter:linkFormatter},
{name:'test_id2'},
{name:'test_name2', formatter:linkFormatter},
],
multiselect: false,
pager : 'pager',
rowNum : 10,
height: 100,
width: 500,
caption: 'テスト表示'
});
});
$("#test").click(function(){
var text=$("#text").val();
console.log(text);
$.ajax({
type: 'POST',
scriptCharset: 'utf-8',
url: '../test.json',
data: {id: text},
dataType:'json',
success: function(res){
var resultData = res;
console.log(resultData);
// 再描画処理
$("#list").jqGrid("clearGridData").setGridParam({
data: resultData,
datatype: "local",
colNames:['ID', '名前','ID2','名前2'],
colModel:[
{name:'test_id'},
{name:'test_name', formatter:linkFormatter},
{name:'test_id2'},
{name:'test_name2', formatter:linkFormatter},
],
multiselect: false,
// pagerが無いことに注意！
rowNum : 10,
height: 100,
width: 500,
caption: 'テスト表示'
// .jqGrid('hideCol',"test_name2") でカラムの非表示
}).jqGrid('hideCol',"test_id2").jqGrid('hideCol',"test_name2").trigger("reloadGrid");
//フィルタリング処理
$("#list").filterToolbar({
defaultSearch:'cn'
});
},
error:function(){
console.log('取得に失敗しました。');
}
});
});
});
function linkFormatter(cellvalue, options, rowObject){
return '<a href="test/' + rowObject.test_id + '">' + cellvalue + '</a>';
}
</script>
<style>
.ui-jqgrid-sortable{
font-size:12px;
}
#input_pager{
font-size:12px;
}
#list{
font-size:12px;
}
</style>
</head>
<body>
<span><input type="text" id="text" /></span>
<span id="test" class="link">送信</span>
<br>
<table id="list"></table>
<div id="pager" class="pager"></div>
</body>
</html>
列の非表示には以下の記述を用いる。
このとき「colModel」の値を設定する必要がある。
colName を設定して悶絶したのはいい思い出|||orz|||
.jqGrid('hideCol',"test_name2")
ちなみに参考例では上で書いたものの、以下の記述でも可だったりします。
.hideCol("test_name2")
ハマりポイント
setGridParam 内で pager を書いてしまうと、データ変更時に問題が生じて正常なページングが行えなくなるので、
必要なものだけ記述したほうが良いと思われる。
jqGrid("clearGridData") でデータを消して再度描画
とはいえ、本来だと検索するまでは表を描画しない状態にしたかったけれど、、、
GridUnload()の使い方が|||orz|||
そもそも、jqGridの3系から若干色々変わっているのか、GridUnload()出来なかったんだよなぁ、、、
これも表を出した状態じゃないと無効ってなるのかもしれない。
かといって検出用のロジックを組むのも、、、メンドイ
まだまだ未熟也
