これはなに? †
- イケてる表を作る jQuery plugin
- 簡単!
- より高度な使い方のサンプル (めちゃめちゃたくさんある)
動作環境の設定 †
基本的な使い方 †
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jqgrid exam</title>
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid-4.5.4/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.10.3/jquery-ui.min.css">
<style type="text/css">
</style>
</head>
<body>
<table id="myTbl"></table>
<div id="myPager"></div><br>
<button>Shipment</button>
<script src="jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="jqgrid-4.5.4/js/i18n/grid.locale-ja.js" type="text/javascript"></script>
<script src="jqgrid-4.5.4/js/jquery.jqGrid.src.js" type="text/javascript"></script>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
var contents = [
{id:1, customer:'田中一郎', date:1385000000000, item:'ピタゴラスイッチ', unit_price:1450, amount:2, total_price:2900},
{id:2, customer:'田中一郎', date:1385000000000, item:'つるぴかLED', unit_price:50, amount:30, total_price:1500},
{id:3, customer:'佐藤二郎', date:1380000000000, item:'がっつりコンデンサ', unit_price:100, amount:5, total_price:500},
{id:4, customer:'山田花子', date:1390000000000, item:'満タン電池', unit_price:200, amount:12, total_price:2400},
];
$(document).ready(function() {
init();
$('button').on('click', function() {
var tbl = $("#myTbl");
var rowIds = tbl.getGridParam('selarrrow');
if (0 === rowIds.length) {
alert('選択されていません');
return;
}
var orderIds = new Array();
for (var idx = 0; idx < rowIds.length; idx++) {
var row = tbl.getRowData(rowIds[idx]);
orderIds.push(row.id);
}
alert('受注番号' + orderIds + 'を出荷します');
// 実アプリではここで ajax なんかを呼び出して、出荷処理と未出荷の受注一覧の取得を行う
var data = new Array();
for (var idx = 0; idx < contents.length; idx++) {
if (orderIds.indexOf("" + contents[idx].id) < 0) {
data.push(contents[idx]);
}
}
contents = data;
// 実アプリではここで ajax なんかを呼び出す
tbl
.jqGrid('clearGridData')
.jqGrid('setGridParam', { data: data })
.trigger('reloadGrid', [{ page: 1}]);
});
});
function init() {
var tbl = $("#myTbl");
tbl.jqGrid({
data: contents,
datatype: "local",
colNames: ['注文番号','顧客名','受注日','品目','単価','個数','合計金額'],
colModel: [
{ name: 'id' , index: 'id' , width: 40 , align: 'center', classes: 'tbl_id_class'},
{ name: 'customer' , index: 'customer' , width: 50 , align: 'center', classes: 'tbl_txt_class'},
{ name: 'date' , index: 'date' , width: 100 , align: 'center', classes: 'tbl_txt_class',
formatter: function (cellValue, option) {
if (!cellValue) {
return "-";
}
var date = new Date(cellValue);
return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
}
},
{ name: 'item' , index: 'item' , width: 100, align: 'center', classes: 'tbl_txt_class'},
{ name: 'unit_price' , index: 'unit_price' , width: 40, align: 'right' , classes: 'tbl_num_class'},
{ name: 'amount' , index: 'amount' , width: 40, align: 'right' , classes: 'tbl_num_class'},
{ name: 'total_price' , index: 'total_price' , width: 40, align: 'right' , classes: 'tbl_num_class'},
],
rowNum: 10, // デフォルトの 行/ページ
rowList: [10, 20, 50], // 行/ページ セレクトボックスの候補
caption: "Orders", // 表タイトル
height: 200,
width: 600,
shrinkToFit: true, // 画面サイズに合わせて表の大きさを変える
pager: 'myPager', // Pager の id
viewrecords: true, // 行数を pager の右下に表示する。
multiselect: true, // 左側にチェックボックスを作成
});
}
/* ==================== SCRIPTS ==================== */
</script>
</body>
</html>
ラジオボタン付きの単一選択画面の作り方 †
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jqgrid exam</title>
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid-4.5.4/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.10.3/jquery-ui.min.css">
<style type="text/css">
</style>
</head>
<body>
<table id="myTbl"></table>
<div id="myPager"></div><br>
<button>Shipment</button>
<script src="jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="jqgrid-4.5.4/js/i18n/grid.locale-ja.js" type="text/javascript"></script>
<script src="jqgrid-4.5.4/js/jquery.jqGrid.src.js" type="text/javascript"></script>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
var contents = [
{id:1, customer:'田中一郎', date:1385000000000, item:'ピタゴラスイッチ', unit_price:1450, amount:2, total_price:2900},
{id:2, customer:'田中一郎', date:1385000000000, item:'つるぴかLED', unit_price:50, amount:30, total_price:1500},
{id:3, customer:'佐藤二郎', date:1380000000000, item:'がっつりコンデンサ', unit_price:100, amount:5, total_price:500},
{id:4, customer:'山田花子', date:1390000000000, item:'満タン電池', unit_price:200, amount:12, total_price:2400},
];
$(document).ready(function() {
init();
$('button').on('click', function() {
var tbl = $("#myTbl");
var rowId = tbl.getGridParam('selrow');
if (!rowId) {
alert('選択されていません');
return;
}
var row = tbl.getRowData(rowId);
alert('受注番号' + row.id + 'を出荷します');
// 実アプリではここで ajax なんかを呼び出して、出荷処理と未出荷の受注一覧の取得を行う
var data = new Array();
for (var idx = 0; idx < contents.length; idx++) {
if (row.id != contents[idx].id) {
data.push(contents[idx]);
}
}
contents = data;
// 実アプリではここで ajax なんかを呼び出す
tbl
.jqGrid('clearGridData')
.jqGrid('setGridParam', { data: data })
.trigger('reloadGrid', [{ page: 1}]);
});
});
function init() {
var tbl = $("#myTbl");
tbl.jqGrid({
data: contents,
datatype: "local",
colNames: ['','注文番号','顧客名','受注日','品目','単価','個数','合計金額'],
colModel: [
{ name: 'select' , index: 'select', width: 20, align: 'center', resizable: false, sortable: false,
formatter: function (cellValue, option) {
return '<input type="radio" name="radio_' + option.gid + '" onclick=\"selectRow(this);\"/>';
}
},
{ name: 'id' , index: 'id' , width: 40 , align: 'center', classes: 'tbl_id_class'},
{ name: 'customer' , index: 'customer' , width: 50 , align: 'center', classes: 'tbl_txt_class'},
{ name: 'date' , index: 'date' , width: 100 , align: 'center', classes: 'tbl_txt_class',
formatter: function (cellValue, option) {
if (!cellValue) {
return "-";
}
var date = new Date(cellValue);
return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
}
},
{ name: 'item' , index: 'item' , width: 100, align: 'center', classes: 'tbl_txt_class'},
{ name: 'unit_price' , index: 'unit_price' , width: 40, align: 'right' , classes: 'tbl_num_class'},
{ name: 'amount' , index: 'amount' , width: 40, align: 'right' , classes: 'tbl_num_class'},
{ name: 'total_price' , index: 'total_price' , width: 40, align: 'right' , classes: 'tbl_num_class'},
],
beforeSelectRow: function (rowid, e) {
// 選択行のラジオボタンを選択状態にする
var $radio = $(e.target).closest('tr').find('input[type="radio"]');
$radio.prop("checked", true);
return true; // allow row selection
},
rowNum: 10, // デフォルトの 行/ページ
rowList: [10, 20, 50], // 行/ページ セレクトボックスの候補
caption: "Orders", // 表タイトル
height: 200,
width: 600,
shrinkToFit: true, // 画面サイズに合わせて表の大きさを変える
pager: 'myPager', // Pager の id
viewrecords: true, // 行数を pager の右下に表示する。
multiselect: false, // 左側にチェックボックスを作成
});
}
function selectRow(radio) {
// クリックしたラジオボタンの行を選択状態にする
var rowid = $(radio).closest('tr').attr('id');
console.log(rowid);
var tbl = $("#myTbl");
tbl.jqGrid('setSelection', rowid);
}
/* ==================== SCRIPTS ==================== */
</script>
</body>
</html>
- 単純に単一選択にしたければ multiselect : false にすればいいだけ
- アフォーダンスとして単一選択であることをユーザに仄めかすためにラジオボタンをつける。結構大変
- 表の第一列に <input type="radio"> を設定する
- 行が選択された場合に、このラジオボタンを選択状態にする
- ラジオボタンがクリックされた時に、ラジオボタンを含む行を選択状態にする
- 選択行は var rowId = tbl.getGridParam?('selrow'); で取得できる。未選択時は undefined が返る
HTML#Javascript
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
