質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jqGrid

jqGridとは、jQqueryのプラグインであり、web上に表データの表示・操作を行う事が可能になります

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

2530閲覧

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

magmag123

総合スコア15

jqGrid

jqGridとは、jQqueryのプラグインであり、web上に表データの表示・操作を行う事が可能になります

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/08/28 18:08

前提・実現したいこと

ライブラリ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: "全角6桁表示" , 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: "0日" , 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>

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dameo

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'); と変えたらどうでしょう?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問