jqgridの行追加ボタン機能に関して

前提・実現したいこと

ライブラリjqgridを使用したグリッドを作成しています。
jqgridのオプション機能である、追加ボタン機能について教えてください。

【実現したいこと】
0. 各ページ最大10行表示できるグリッドがあるとき、追加ボタン押下時に
最終行に行が追加される。
0. 表示されているページの表示行数が最大行の時、2ページ目に遷移してページが
追加されるようにしたいです。
（10行(最大）表示されている状態でボタン押下した際、2ページ目を生成して行が追加される。）

発生している問題・エラーメッセージ

”1”の追加ボタン押下時に最終行に行を追加させることは実現できたのですが、”2”の最大行表示されている状態で、追加ボタンを押下した時の挙動がおかしいので、解決方法があれば教えてください。

【不明な挙動】

最大行表示されている状態でボタン押下したとき、2ページ目に遷移(生成）せず1ページ目に11行目が作成されます。
上記の続きで、ボタンを押下し続け、14行目作成時に2ページ目に遷移(2ページ目生成）し、2ページ目に行が追加される。

また、1ページ目で作成された、11行目以降も2ページ目に作成される。

該当のソースコード

JSP　jQuery
ソースコード
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- CDN読込 -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://js.cybozu.com/jqgrid/v5.1.1/js/jquery.jqGrid.min.js"></script>
<script src="https://js.cybozu.com/jqgrid/v5.1.1/js/i18n/grid.locale-ja.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://js.cybozu.com/jqgrid/v5.1.1/css/ui.jqgrid.css">


<title>グリッド表示サンプル</title>
</head>
<body>
<div id="wrapper">
			<table id="grid01"></table>
			<div id="pg01"></div>
			<input type="button" id="btn1" value="追加">

</div>
<script type="text/javascript">

$(document).ready(function(){
	// 表示データの設定
	var jsonData = [
		{
			syouken: "111111111111" ,
			name: "あいうえお" ,
			dantai: "あかさたなはまやらわ" ,
			henkou: "2018.04" ,
			harai: "〇〇" ,
			hurikae: "×××" ,
			saki: "△△" ,
			sonpo: "■■"
		},
		{
			syouken: "222222222222" ,
			name: "あいうえお" ,
			dantai: "あかさたなはまやらわ" ,
			henkou: "2018.04" ,
			harai: "〇〇" ,
			hurikae: "×××" ,
			saki: "△△" ,
			sonpo: "■■"
		},
		{
			syouken: "333333333333" ,
			name: "あいうえお" ,
			dantai: "あかさたなはまやらわ" ,
			henkou: "2018.04" ,
			harai: "〇〇" ,
			hurikae: "×××" ,
			saki: "△△" ,
			sonpo: "■■"
		},
		{
			syouken: "444444444444" ,
			name: "あいうえお" ,
			dantai: "あかさたなはまやらわ" ,
			henkou: "2018.04" ,
			harai: "〇〇" ,
			hurikae: "×××" ,
			saki: "△△" ,
			sonpo: "■■"
		},
		{
			syouken: "555555555555" ,
			name: "あいうえお" ,
			dantai: "あかさたなはまやらわ" ,
			henkou: "2018.04" ,
			harai: "〇〇" ,
			hurikae: "×××" ,
			saki: "△△" ,
			sonpo: "■■"
		},
		{
			syouken: "666666666666" ,
			name: "全角６桁表示" ,
			dantai: "あかさたなはまやらわ" ,
			henkou: "2018.04" ,
			harai: "〇〇" ,
			hurikae: "×××" ,
			saki: "△△" ,
			sonpo: "■■"
		},
		{
			syouken: "777777777777" ,
			name: "あいうえお" ,
			dantai: "あかさたなはまやらわ" ,
			henkou: "2018.04" ,
			harai: "〇〇" ,
			hurikae: "×××" ,
			saki: "△△" ,
			sonpo: "■■"
		},
		{
			syouken: "888888888888" ,
			name: "あいうえお" ,
			dantai: "あかさたなはまやらわ" ,
			henkou: "2018.04" ,
			harai: "〇〇" ,
			hurikae: "×××" ,
			saki: "△△" ,
			sonpo: "■■"
		},
		{
			syouken: "999-999999-9" ,
			name: "あいうえお" ,
			dantai: "あかさたなはまやらわ" ,
			henkou: "2018.04" ,
			harai: "〇〇" ,
			hurikae: "×××" ,
			saki: "△△" ,
			sonpo: "■■"
		},
		{
			syouken: "100000000000" ,
			name: "あいうえお" ,
			dantai: "あかさたなはまやらわ" ,
			henkou: "2018.04" ,
			harai: "〇〇" ,
			hurikae: "×××" ,
			saki: "△△" ,
			sonpo: "■■"
		}
	];

	$("#grid01").jqGrid({
		data: jsonData ,
		datatype: 'local' ,
		colNames:['ラベル1', 'ラベル2', 'ラベル3', 'ラベル4', 'ラベル5', 'ラベル6', 'ラベル7', 'ラベル8'],
	    colModel:[
	        {index:'syouken', name:'syouken', width: 80}
	       ,{index:'name', name:'name', width: 80}
	       ,{index:'dantai', name:'dantai', width: 150}
	       ,{index:'henkou', name:'henkou', width: 70}
	       ,{index:'harai', name:'harai', width: 70}
	       ,{index:'hurikae', name:'hurikae', width: 70}
	       ,{index:'saki', name:'saki', width: 70}
	       ,{index:'sonpo', name:'sonpo', width: 70}
	     ],
		// 複数選択を可にする
		multiselect: true,
		// 単数選択を可にする
		//,multiselect:false
	    height:'auto',
	    caption:'カスタムグリッド画面' ,
	    pager : 'pg01' ,
	    // フッターに行数を表示する
	    viewrecords: true ,
//	    rowList : [5, 10, 20] ,
	    rowNum : 10
	});

	// タイトル結合設定
	$("#grid01").jqGrid('setGroupHeaders' ,{
		useColSpanStyle : true ,
		groupHeaders :[
			{ startColumnName: 'dantai', numberOfColumns: 6, titleText: '大ラベル' }
		]
	});
	$('#grid01').jqGrid('setFrozenColumns');


	// 追加ボタンイベント
	$("#btn1").click(function(){
		var tmpData = {
				syouken: "000-000000-0" ,
				name: "あいうえおか" ,
				dantai: "ダミー追加行" ,
				henkou: "0000.00" ,
				harai: "ダミー" ,
				hurikae: "０日" ,
				saki: "ダミー" ,
				sonpo: "ダミー" ,
		};

		// 表示件数を取得
		var aa = $('#grid01').getGridParam("data");
		// jqgridの設定パラメーター取得
		// 現在のページ番号
		var currentPage = $("#grid01").getGridParam("page");
		// ページ数
		var lastpage = $('#grid01').getGridParam('lastpage');
		var row = $('#grid01').getGridParam('rowNum');

		// 現グリッドに表示される行数
		var rec = $("#grid01").getGridParam("reccount")

		$('#grid01').trigger('reloadGrid', [{page: lastpage}]);
		$('#grid01').addRowData(undefined, tmpData);
	});

});


</script>
</body>
</html>

試したこと

現在表示されているページ番号と最大行数を比較して、一致した場合、ページを追加するなどの処理を
記述してみたのですが、解決しませんでした。

退会済みユーザー

2020/08/31 20:06

$('#grid01').trigger('reloadGrid', [{page: lastpage}]); $('#grid01').addRowData(undefined, tmpData); を $('#grid01').addRowData(undefined, tmpData); $('#grid01').trigger('reloadGrid'); lastpage = $('#grid01').getGridParam('lastpage'); $('#grid01').setGridParam({ page: lastpage }).trigger('reloadGrid'); と変えたらどうでしょう？