jqGrid で ごにょごにょしてみた。(反省会)
はい、まず反省会から
こんな記事を書きながらも、、、データ更新時な、なんと、、、
ページングがぶっ壊れてましたorz
動作確認まともにしていない証拠ですNE!
ほかにも、データが多い状態で少ないデータを取得した場合のデータの入れ替え不備等々問題だらけ(TT
色々試して見たものの取りあえず、暫定版を公開しなおすことにしました。
そして頓挫、初期からテーブルを出していなければ、データ更新が上手くいかないという罠
やり方は色々あるかもしれないけれど如何せん調べきれなかったので、
今回は初期テーブルを出した後、ボタンクリックによって再描画処理を行うような何かにしてみようかと思います。
やりたいこと
~ 前回まで ~
・データは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()出来なかったんだよなぁ、、、
これも表を出した状態じゃないと無効ってなるのかもしれない。
かといって検出用のロジックを組むのも、、、メンドイ
まだまだ未熟也
jqGrid で カスタムフォーマットを使用してみた。(追記)
まず初めに、この記事で書いている内容を実行してもまともに動きません。
取りあえずまともに動かしたい人は以下の記事を参考にしてみてください。morio.hateblo.jp
JSでExcelのような描画云々するのに便利なものはないか、、、と調べているとあるじゃないですか!
その名も「jqGrid」!
今更感のあるライブラリ
さてやりたいことは、以下
・データはajaxで取得
・ページング
・フィルタリング
・ソート
・フォーマッターの使用
・ボタンを押した際のデータのリロード ← イマココ
jqGridでもAjaxで取得やら云々かんぬん出来るみたいだけど、
今回はAjaxでデータを取得して正常に取得できた場合は、
通信した後に、jqGridで描画という感じにしてみた。
あと、日本語だと初期表示で枠はみ出したりと残念な感じになるので、少しフォントサイズは修正済み
test.json
[ {"test_id":"10","test_name":"テスト名1"}, {"test_id":"11","test_name":"テスト名2"}, {"test_id":"12","test_name":"テスト名3"}, {"test_id":"13","test_name":"テスト名4"}, {"test_id":"14","test_name":"テスト名5"}, {"test_id":"15","test_name":"テスト名6"}, {"test_id":"16","test_name":"テスト名7"}, {"test_id":"17","test_name":"テスト名8"}, {"test_id":"18","test_name":"テスト名9"}, {"test_id":"19","test_name":"テスト名10"}, {"test_id":"20","test_name":"テスト名11"}, {"test_id":"21","test_name":"テスト名12"}, {"test_id":"22","test_name":"テスト名13"}, {"test_id":"23","test_name":"テスト名14"} ]
test.html
<html> <head> <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> <script type="text/javascript"> $(function(){ $("#test").click(function(){ var text=$("#text").val();; console.log(text); $.ajax({ type: 'GET', scriptCharset: 'utf-8', url: "../test.json?id=" + text, dataType:'json', success: function(res){ var resultData = res; console.log(resultData); $("#list").jqGrid({ data: resultData, datatype: "local", colNames:['ID', '名前'], colModel:[ {name:'test_id'}, {name:'test_name', formatter:linkFormatter}, ], multiselect: false, pager : 'pager', // ページング rowNum : 10, height: 100, width: 500, caption: 'テスト表示' }); // リロード処理(いかんせんこれでよいのか、、、) $("#list").jqGrid().setGridParam({ data: resultData, datatype: "local", colNames:['ID', '名前'], colModel:[ {name:'test_id'}, {name:'test_name', formatter:linkFormatter}, ], multiselect: false, pager : 'pager', // ページング rowNum : 10, height: 100, width: 500, caption: 'テスト表示' }).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> <input type="text" id="text" /> <input type="button" id="test" /> <table id="list"></table> <div id="pager" class="pager"></div> </body> </html>
上記のように書いたら、、、以下のように表示されたりします。
いやはやベンリー!
黒猫のウィズ クロム・マグナⅤ 9-3 ハード ノーコンクリアしてきた
ご無沙汰してます。ほのぼの生きてます。
ここ最近クロムマグナのハード9がクリアできなくて、心をへし折られそうになってました。
が、ようやく、、、ようやく9-3のサブクエコンプしたー!
ということで、道中は攻略サイトで進め方が記載されているのでパーティーを紹介!
※ノーコンクリア出来ると思ってなくてキャプチャ撮っていなかっただけという、、、
基本的には、リヴェータ&ルドヴィカはスキルが貯まったら鉄壁に即使用
リンカは1戦目、スキルが使えるようになったら、即スキル使用で、5チェーン貯めてひたすら殴る!
三体目もひたすら殴る
リースは回復&パネチェン
グレイスはタイミングよく状態以上回復で進めると運良くクリア!
しかし、、、一体も落ちずにクリア出来たのには驚きですね!
左右をバランス良く削るのは中々骨が折れますが、水赤の火力3体入れてたのでなんとかなりました(笑)
- 作者: さがら総,黒星 紅白
- 出版社/メーカー: 小学館
- 発売日: 2015/04/17
- メディア: 文庫
- この商品を含むブログ (7件) を見る
アキラをいれてクリアは自分には出来そうにないので、貯めてたクリスタル割りながら消化してました(汗
鬼畜な9-3クリアまでが長かったー!!
あと9-2フルコンプのみ!
鬼門はやっぱり、、、全問正解だよね!
見破りいれたいけど、火力不足になりがちでいかんせん運頼みプレイ^_^;
12段は水デッキで!
ご無沙汰ですが、今回は12段を水デッキで突撃します!
そして、、、炎デッキではなしえなかった6Tクリアを可能にしました(><
雷2体出てくると7Tになってしまいますが、、、それでも炎デッキより安定して高順位を叩き出せる(^^;
13段は手持ちでは厳しいものがあるので、一旦は保留
穴埋めクイズはボタンを押すのに時間が掛かるのに、選択肢選択と同じ時間なので、
ゲーム的に厳しくてパスすることにしました(^^;
今回は特に順位にこだわりはないのでまったりクリア予定
しかし、インフレ怖い|||orz|||
魔導杯 神話 12段で頑張ってみた。(フラクタルも手に入りました!)
さて久々の投稿ですが、、、
今回から1万位以内でも上位景品が貰えるとのことなので、
頑張ってみることにしました。
というのも、デイリー1万位以内出貰えるレムは妖精特化の回復で
中々の性能+見破り。炎の見破りはカーナというイメージでしたが
今回のハムスターと中々相性がいい感じ(^^
残念ながら水デッキは弱く、ハムスターのクリア率も安定しない|||orz|||
そして最終日は初めて1000位以内を取得しました。
しかし、半日で10万ポイント越え稼ぐのは大変すぎ!
※まだ最終日の結果は出ていないですが全体的に頑張ったかなと
3日目遊びに出たりで全くポイント稼げていないのが足を引っ張ったり(汗
使ったクリスタルは
累計の10個、デイリー報酬の8個、図鑑の9個と1つ = 28個
全体的に使いすぎな気もするけど、クイズ力がないのがわるいんやぁー|||orz|||
SS時点でHP2700(潜在190開放済み)とかなり高め
進化させたいと思っても、、、無念経験値が足りません。
L化はハムスターが集まったら頑張ってみます。
比類なき賢者の猫トロフィーも2つ手に入り、
1つでスキル5個開放と中々の性能
とりあえず、回復キャラとしては良い感じではないでしょうか?
- 作者: 水沢夢
- 出版社/メーカー: 小学館
- 発売日: 2015/04/17
- メディア: 文庫
- この商品を含むブログ (3件) を見る
魔導杯 綺石 12段で駆け抜けてきた
13段解放するのか!?と思ったけどしなかったので、、、
今回の魔導杯は前回と同様、12段8ターン抜けのデッキで挑戦してきました。
総合5000位は体力的に厳しいので、、、今回はデイリー5000位狙い
インフレしていく中、8ターン抜けというのは
どうなんだろうと思ったけれど、
これが案外、1位率高い感じで助かりました(^^;
キャプチャ失敗するとは情けない|||orz|||
最初2ターン
ボスまで1ターンで消化
ボス2回攻撃(後ろの二体で左右を攻撃)
封印解けたらアスカとリヴェータの全体攻撃で
8ターン終了!!
敵のスキル反射を考えるとこれ以下は相当厳しいorz
リヴェータをラトにシフトチェンジしたいけど、、、
育成出来てない問題はラトに変えると攻撃力大丈夫か?という懸念
スキルチャージ+攻撃の戦士族がいないからこれ以上のターン短縮は厳しいか(汗
23時30分の時点でこんな感じ、
最後の追い込み勢+最近の上位入賞のポイント数を考えると
不安だけど6万後半ぐらいがボーダーじゃないかと思って一足先に終了
23:45分 78740ptで2748位、、、
後15分の攻防が怖い(((((((( ;゚Д゚))))))))ガクガクブルブルガタガタブルブル
ねこあつめで癒されるか
やはり俺の青春ラブコメはまちがっている。10.5 (ガガガ文庫)
- 作者: 渡航
- 出版社/メーカー: 小学館
- 発売日: 2015/03/18
- メディア: 文庫
- この商品を含むブログ (10件) を見る
Abyss Code 05 冥世の天蓋 冥滅級 ノーコンできなかったorz
なんとか、、、3コンでクリア出来たので、、、
感想は回復は1体は必要かと、SS回復は2体、遅延or軽減必須!
と書きながらデッキに遅延軽減はいないという(汗
助っ人に遅延キャラを入れてます。
1戦目:左右→中
右は初回毒を放ってきます。(毎ターン400ダメージ)
左が連攻300~400
中が連攻400~500
毒で削られながらもターン数を稼ぎます
2戦目:左右→中
ここも中々厳しいです。
個人的には運ゲーの領域
右は初回スキル封印(20ターン)
左は全属性弱体化
中は弱体化なしで1000~1500、弱体化で2000over
スキル封印と弱体化を受けて、一体がここで落ちます。
スキル封印時に状態回復キャラが封印されるとほぼ詰みますorz
3戦目:右→中→左
遅延を使うと右のスキル反射が毒を放ってきます。(毎ターン1000)
タービンのダメージは2500を超えるため、
開幕遅延で右を倒し、今回は左を先に倒してしまったので、
中の毎ターン600以上のダメージに撃沈、ここで1コンしました。
中を倒した後、左を倒すことで何とかなるかもしれないです。
ボス:右→左→中
右の属性特攻が怖いので、先に処理しておきます。
とはいえ、、、
左は300の連続攻撃
中は600の連続攻撃
ダメージが被ると即落ちるので油断なんて出来ません。
右を落とした段階で1コン
左を落として中に遅延をぶち込んでダメージを蓄積させて1コン
ダメージが9割を超えると怒り状態になりスキル反射を放ってきます。
後の注意点は、連続攻撃を数回はなった後スキル封印を放ってきます。
600の連続攻撃を受けるとデッキは崩壊寸前になるのでSS回復を忘れずに(汗
最後はなんとか攻撃ごり押しでクリア
インフレが起こる中、このクエストが普通にクリア出来るようになる日がすぐに訪れるのだろうか(汗
フルメタル・パニック! アナザー (10) (富士見ファンタジア文庫)
- 作者: 大黒尚人,賀東招二,四季童子
- 出版社/メーカー: KADOKAWA/富士見書房
- 発売日: 2015/02/20
- メディア: 文庫
- この商品を含むブログ (1件) を見る