退会済みユーザー
2018/07/26 11:56
見づらい
Q&A
解決済
退会済みユーザー
総合スコア0
投稿2018/07/25 01:24
編集2018/07/26 10:35https://www.phpflow.com/php/addedit-delete-record-using-bootgrid-php-mysql/
上のページを参考に、下記を作成しました。
HTML
1<!--HTML1--> 2<body> 3 <form id="myform" method="post"> 4 <table id="employee_grid" class="table table-condensed table-hover table-striped" data-toggle="bootgrid"> 5 <thead> 6 <tr> 7 <th data-column-id="id" data-type="numeric" data-identifier="true" data-order="asc" data-width="27%">コード</th> 8 <th data-column-id="employee_namae" data-width="27%">名称</th> 9 <th data-column-id="employee_received" data-width="27%">割引率</th> 10 <th data-column-id="commands" data-formatter="commands" data-sortable="false" data-width="19%">編集・削除</th> 11 </tr> 12 </thead> 13 <tbody> 14 <% 15 foreach (var _店舗 in _店舗一覧) 16 { 17 %> 18 <tr data-row-id="<%= _店舗["コード"] %>" class="modal-tr"> 19 <td id="Code-<%= _店舗["コード"] %>"> 20 <input type="text" value="<%= _店舗["コード"] %>" /><%= _店舗["コード"] %></td> 21 <td id="Meisyo-<%= _店舗["コード"] %>"> 22 <input type="text" value="<%= _店舗["コード名"] %>" /><%= _店舗["コード名"] %></td> 23 <td id="Per-<%= _店舗["コード"] %>"> 24 <input type="text" value="<%= _店舗["割引率"] %>" /><%= _店舗["割引率"] %></td> 25 <td data-column-id="commands"></td> 26 </tr> 27 <% 28 } 29 %> 30 </tbody> 31 </table> 32 </form> 33 <div class="form-group text-center"> 34 <div class="col-lg-12"> 35 <button id="screen" type="button" class="btn btn-info pause"><span class="glyphicon glyphicon-plus"></span> 追加</button> 36 <button id="close" type="button" class="btn btn-info"><span class="glyphicon glyphicon-remove"></span> 閉じる</button> 37 <br> 38 </div> 39 </div>
HTML
1<!--HTML2 モーダル・ダイアログ新規(HTML1の「追加」ボタンを押した際に表示)--> 2 3 <div class="modal fade" id="add_model"> 4 <div class="modal-dialog"> 5 <div class="modal-content"> 6 <div class="modal-header"> 7 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span></span></button> 8 <h4 class="modal-title">新規</h4> 9 </div> 10 11 <div class="modal-body2"> 12 <form id="frm_add" method="post"> 13 <input type="hidden" value="add" name="action" id="action"> 14 <table class="center"> 15 <tr> 16 <td> 17 <table class="table table-condensed table-bordered table-hover hos_table_data"> 18 <thead> 19 <tr class="active"> 20 <th class="control-label"><span>コード</span></th> 21 <th class="control-label"><span>名称</span></th> 22 <th class="control-label"><span>割引率</span></th> 23 </tr> 24 </thead> 25 <tbody > 26 <tr style="height: 30px;"> 27 <td class="id"> 28 <input type="text" maxlength="2" class="form-control fm" style="width: 50px; text-align: right; font-size: larger; padding: 3px;" id="id" name="id" placeholder="00" /></td> 29 <td class="namae"> 30 <input type="text" maxlength="20" class="form-control fm" style="width: 300px; text-align: right; font-size: larger; padding: 3px;" id="namae" name="namae" placeholder="20字以内で入力してください" /></td> 31 <td class="received"> 32 <input type="text" maxlength="3" class="form-control fm" style="width: 50px; text-align: right; font-size: larger; padding: 3px;" id="received" name="received" placeholder="000" /></td> 33 </tr> 34 </tbody> 35 </table> 36 </td> 37 </tr> 38 </table> 39 </form> 40 </div> 41 <div class="modal-footer"> 42 <div class="form-group text-center"> 43 <div class="col-lg-12"> 44 <button id="btn_add" type="button" class="btn btn-info pause"><i class="glyphicon glyphicon-list"></i> 登録</button> 45 <button id="close2" type="button" class="btn btn-info" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> キャンセル</button> 46 <br> 47 </div> 48 </div> 49 </div> 50 </div> 51 </div> 52 </div>
HTML
1<!--HTML3 モーダル・ダイアログ編集(HTML1のdata-column-id="commands"内の「編集」ボタンを押した際に表示)--> 2 <div class="modal fade" id="edit_model"> 3 <div class="modal-dialog"> 4 <div class="modal-content"> 5 <div class="modal-header"> 6 <button type="button" class="close" data-dismiss="modal"aria-hidden="true"><span></span></button> 7 <h4 class="modal-title">編集</h4> 8 </div> 9 10 <div class="modal-body2"> 11 <form id="frm_edit" method="post"> 12 <input type="hidden" value="edit" name="action" id="action"> 13 <input type="hidden" value="0" name="edit_id" id="edit_id"> 14 <table class="center"> 15 <tr> 16 <td> 17 <table class="table table-condensed table-bordered table-hover hos_table_data"> 18 <thead> 19 <tr class="active"> 20 <th class="control-label"><span>コード</span></th> 21 <th class="control-label"><span>名称</span></th> 22 <th class="control-label"><span>割引率</span></th> 23 </tr> 24 </thead> 25 <tbody> 26 <tr style="height: 30px;" data-row-id="dialogid"> 27 <td class="id"> 28 <input type="text" maxlength="2" class="form-control fm" style="width: 50px; text-align: right; font-size: larger; padding: 3px;" id="id" name="id" placeholder="00" /></td> 29 <td class="edit_namae"> 30 <input type="text" maxlength="20" class="form-control fm" style="width: 300px; text-align: right; font-size: larger; padding: 3px;" id="edit_namae" name="edit_namae" placeholder="20字以内で入力してください" /></td> 31 <td class="edit_received"> 32 <input type="text" maxlength="3" class="form-control fm" style="width: 50px; text-align: right; font-size: larger; padding: 3px;" id="edit_received" name="edit_received" placeholder="000" /></td> 33 </tr> 34 </tbody> 35 </table> 36 </td> 37 </tr> 38 </table> 39 </form> 40 </div> 41 <div class="modal-footer"> 42 <div class="form-group text-center"> 43 <div class="col-lg-12"> 44 <button id="btn_edit" type="button" class="btn btn-info pause"><i class="glyphicon glyphicon-list"></i> 登録</button> 45 <button id="close3" type="button" class="btn btn-info" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> キャンセル</button> 46 <br> 47 </div> 48 </div> 49 </div> 50 </div> 51 </div> 52 </div>
HTML
1<!--入れているjs、css一覧 --> 2 <link href="./bootstrap3.2/bootstrap.min.css" /> 3 <link href="./bootstrap3.1.1/bootgrid.css" /> 4 <link href="./bootstrap3.1.1/jquery.bootgrid.css" /> 5 <link href="./bootstrap3.1.1/Examples.css" /> 6 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css"> 7 <script src="./jquery-1.10.2.min.js></script> 8 <script src="./bootstrap3.2/bootstrap.min.js"></script> 9 <script src="./bootstrap3.1.1/jquery.bootgrid.js"></script> 10 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
長くなったのでコメントに残り書きます
「url」を「.cs」にリンク変更→特に変わりなし
Visual studio 2017使用
回答3件
あなたの回答
tips
プレビュー