ナビゲータでクエリパラメータを追加する
次は、ナビゲータで「追加」「編集」「削除」時にクエリパラメータをくっつける方法。
以下のサンプルでは、
- 追加、編集時に
onclickSubmitParam | onclickSubmitValue(edit) |
editDataParam | editDataValue |
- 削除時に
onclickSubmitParam | onclickSubmitValue(delete) |
delDataParam | delDataValue |
というパラメータを追加したリクエストを送信するようになります。
<!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 : false, refresh : false, view : false, closeOnEscape : true }; // 編集時、追加時オプション(共通で使用できる) // パラメータの追加方法は2通りある edit_insert_opts = { // 実行ボタンを押した時に、呼ばれるコールバック関数 // この関数の戻り値がパラメータとして付加される // edit_option : このナビゲーションバーに設定したオプション // post_data : 編集、あるいは追加するデータ(パラメータそのもの) onclickSubmit : function(edit_option, post_data){ return { onclickSubmitParam : "onclickSubmitValue(edit)" }; }, editData : { editDataParam : "editDataValue" } }; // 削除時オプション // こちらもパラメータの追加方法は2通り del_opts = { // 編集時、追加時オプションとほぼ同じだが、データは渡ってこない // おそらくバグだと思われる・・ onclickSubmit : function(del_option){ return { onclickSubmitParam : "onclickSubmitValue(delete)" }; }, delData : { delDataParam : "delDataValue" } }; jQuery("#list").navGrid("#pager", null, // ナビゲーションツールバーの表示オプション edit_insert_opts, // 編集時のオプション edit_insert_opts, // 追加時のオプション del_opts, // 削除時のオプション null, // 検索時のオプション 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>