新規登録画面に登録済データを呼び出しセットする機能をつけてみる6
コンポーネントクラスも作成できましたので、いよいよ本命のコンポーネントの中身を作っていきますが、その前にルート設定とデータ呼び出しのコントローラの関数を作成します。
1. ルート設定
以下のようにデータ呼び出しのルート設定をweb.phpに記述します。
Route::get('/customer/index/{name}', [App\Http\Controllers\MstCustomerController::class, 'getCustomersBySearchName'])->name('mst_customer_by_search_name');
2. MstCustomerController.phpに以下を記述します。
public function getCustomersBySearchName($CustomerName) { $customers = Customer::where('status', 1)->where('customer_nm','like',"%$CustomerName%")->orderBy('id', 'asc')->get(); return response()->json($customers); }
顧客名を検索キーにデータを取得しajaxで取得できるようにjsonでパックしてます。
3. コンポーネントのコーディングを行う
いよいよラストです。とりあえず、コードをまずは掲載します。
"modal-list.blade.php"を以下のようにコーディングします。
{{-- Modal画面 --}} <div class="modal fade" id="ListModal{{ $modalnm }}" tabindex="-1" aria-labelledby="ListModalLabel{{ $modalnm }}" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">検索</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> {{-- 検索ボックス、ボタン配置 --}} <div class="modal-header input-group"> <input name="search_nm{{ $modalnm }}" type="text" class="form-control" id="search_nm{{ $modalnm }}" placeholder="入力してください。"><br/> <button type="button" class="btn btn-primary" id="searchplay{{ $modalnm }}">検索</button> </div> <div class="modal-body"> <table class="table table-sm table-bordered table-striped" id="searchtable{{ $modalnm }}"> {{-- Tableヘッダ生成 --}} <thead> <tr> @foreach ($tableheader as $item) <th class="bg-light" scope="col">{{ $item }}</th> @endforeach </tr> </thead> {{-- ここにAjaxで取得したデータをセット --}} <tbody> </tbody> </table> {{-- ローディングアニメーション用のタグを配置 --}} <div class="loading hide"><div class="circle"></div></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> </div> </div> </div> </div> <script type="module"> $('#searchplay{{ $modalnm }}').on('click', function () { $('#searchtable{{ $modalnm }} tbody').empty(); //もともとある要素を空にする let searchName = $('#search_nm{{ $modalnm }}').val(); //検索ワードを取得 //検索ワードが入力されていない場合は何もしない if (!searchName) { return false; } $.ajax({ type: 'GET', //GETで送信 url: '{{ $modalurl }}' + searchName,//データを取得するURLを指定 dataType: 'json', //json形式で受け取る beforeSend: function () { $('.loading').removeClass('hide'); } //ローディングアニメーションを表示 }).done(function (data) { //ajaxが成功したときの処理 $('.loading').addClass('hide');//ローディングアニメーションを消す let html = ''; $.each(data, function (index, value) { //dataの中身からvalueを取り出す //取得したデータのTableを作成 html = html + ` <tr> @foreach ($inputname as $item) @if (trim($truncatesize[$loop->iteration - 1]) == "") <td class="col-{{ $celsize[$loop->iteration - 1] }}">${value.{{ $item }}}</td> @else <td class="col-{{ $celsize[$loop->iteration - 1] }}"><div class="text-truncate" style="max-width: {{ $truncatesize[$loop->iteration - 1] }}px;">${value.{{ $item }}}</div></td> @endif @endforeach </tr> ` }) $('#searchtable{{ $modalnm }} tbody').append(html); //できあがったTableをセット // 検索結果がなかったときの処理 if (data.length === 0) { $('#searchtable{{ $modalnm }} tbody').append('<td colspan="{{ count($tableheader) }}">該当データが存在しません</td>'); } }).fail(function () { //ajax通信がエラーのときコンソールログを吐き出し console.log('Error.'); }) }); //選択されたデータをテキストボックスにセットする //動的に生成したタグについては以下のように記述しないとイベントが発生しない $(document).on("click", "#searchtable{{ $modalnm }} td", function(){ let row = $(this).closest('tr').index(); //選択したテーブル行のデータを読み取りテキストボックスにセットする @foreach ($outputname as $item) @if (trim($item) == "") @else $("#{{ $item }}").val($("#searchtable{{ $modalnm }}").children("tbody").children("tr").eq(row).children().eq({{ $loop->iteration - 1 }}).text()); @endif @endforeach $('#ListModal{{ $modalnm }}').modal('hide'); }); </script>
これで、コンポーネント化は完了です。
4. まとめ
実際にコンポーネント化がポイントなので、コンポーネントの中身自体はあまり重要ではないですが、別で解説していこうと思います。
