複数選択サンプル
複数行を選択するサンプル。
- multiselect: true
にするだけなので簡単。
あとは、"selarrrow" から、選択中の行ID一覧を取得し、行データを取得するだけなので、削除やら更新は省略。
<!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/i18n/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#list").jqGrid({ datatype: "local", colNames:['ID', '名前'], colModel:[ {name:'id'}, {name:'name'}, ], multiselect: true, caption: '配列をグリッド表示する' }); var mydata = [ {id:"1",name:"test1"}, {id:"2",name:"test2"}, {id:"3",name:"test3"}, ]; for(var i=0;i<=mydata.length;i++) jQuery("#list").addRowData(undefined,mydata[i]); // 行データを取得する jQuery("#btn1").click( function() { var grid = jQuery("#list"); var ids = grid.getGridParam("selarrrow"); if( ids.length <= 0 ) { alert("選択されてません"); return; } var strs = []; for( var i=0; i<ids.length; ++i ) { var id = ids[i]; var row = grid.getRowData(id); strs.push("選択されたデータは ID、名前 = " + row.id + ", " + row.name); } alert(strs.join("\n")); }); }); </script> </head> <body> <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> <p><button id="btn1">選択中の行を取得する</button></p> </body> </html>