ページングやらなんやら
jqGrid のポイントとなる機能。結構色々なことができるし、ソースを見ても頑張った形跡がありありと見て取れる。ま、そういう所には得てしてバグが入り込むものだ。(^^;
前準備
というわけで2点ソースを修正する必要があります。いずれも grid.formedit.js です。
- grid.formedit.js
- 47行目
stempl = ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc'], => stempl = p.sopt || ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc'],
-
- 95行目
for(j=0;p.sopt.length<0;j++) { => for(j=0;j<p.sopt.length;j++) {
ソースは以下のようになります。
解説は明日にでも・・。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ナビゲータサンプル</title> <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.7.2.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/grid.loader.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#list").jqGrid({ url : "test.json", mtype : "POST", editurl : "test.cgi", width : 500, datatype : "json", colNames : ['従業員番号', '名前'], colModel : [ {name:'employee_no', editable:true}, {name:'name' , editable:true}, ], rownumbers : true, gridview : true, viewrecords: true, rowNum : 10, rowList : [10,20,30], pager : jQuery("#pager"), caption : 'ナビゲータ' }); // ナビゲーションバーの設定 navi_opts = { edit : true, add : true, del : true, search : true, refresh : true, view : true, closeOnEscape : true, afterRefresh : function(){alert("defined by navi_opts");} }; // 検索オプション search_opts = { drag : true, closeOnEscape : true, multipleSearch : true, caption : "検索...", Find : "検索", Reset : "リセット", groupOps : [ { op: "AND", text: "全部の" }, { op: "OR", text: "いずれかの" } ], matchText : " 上記", rulesText : " 条件に適合", sopt : ["eq", "ne", "lt", "le", "gt", "ge", "bw", "bn", "ew", "en", "cn", "nc",], odata : ['等しい', '等しくない', 'より小さい', '以下', 'より大きい', '以上', 'で始まる', 'で始まらない', 'で終わる', 'で終わらない', 'を含む', 'を含まない'] }; jQuery("#list").navGrid("#pager", navi_opts, // ナビゲーションツールバーの表示オプション null, // 編集時のオプション null, // 追加時のオプション null, // 削除時のオプション search_opts, // 検索時のオプション null // 詳細表示のオプション ); }); </script> </head> <body> <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> <div id="pager" class="scroll" style="text-align:center;"></div> </body> </html>
- test.json の中身
{ total : 2, page : 1, records : 15, rows : [ {cell:["0001", "name0001"]}, {cell:["0002", "name0002"]}, {cell:["0003", "name0003"]}, {cell:["0004", "name0004"]}, {cell:["0005", "name0005"]}, {cell:["0006", "name0006"]}, {cell:["0007", "name0007"]}, {cell:["0008", "name0008"]}, {cell:["0009", "name0009"]}, {cell:["0010", "name0010"]}, {cell:["0011", "name0011"]}, {cell:["0012", "name0012"]}, {cell:["0013", "name0013"]}, {cell:["0014", "name0014"]}, {cell:["0015", "name0015"]}, ] }
- test.cgi は空ファイルを用意する。