前回に、JSONを使ってとDataTablesを作成しました。
今回は、テーブルの各行に「編集」ボタンを設置し、行データをボタンに渡して初期値として表示するようにしてみます。bootstrapでモーダルを表示し、編集ボタンからのデータをモーダルに表示します。
この記事では、CodeIgniter4を使用していますが、編集ボタンの実装自体はCodeIgniter4とはあまり関係ない内容となっています。CodeIgniter4に興味ない方は、コントローラーとルートの設定は飛ばしてください。
大まかなかな流れとしては、以下の様になります。
- DataTablesのデータ表示内容に、「編集」見出しを作成する
- 列の各行に「編集」ボタンを作成し、ボタンタグにその行のデータを格納する
- モーダルを作成する
- モーダルの入力フォームに初期値として各行のデータを表示する
サンプルデータは、前回記事の内容に、「department」を追加しています。データ項目は下記になります。
- id
- last_name
- first_name
- number
- department
前回までの記事
- CodeIgniter4 シンプルなページネーションの実装
- CodeIgniter4にBootstrap、DataTablesを使ったページネーション
- CodeIgniter4にJSONを使ってDataTablesを実装する
前回までの記事に対し、モデル App/Models/TestModel.phpの$allowedFieldsに「department」が追加されます。
protected $allowedFields = ['id', 'last_name', 'first_name', 'number', 'department'];ルートとコントローラーの設定
今回は、”json-pagination-edit.php”というファイルを作成していきますので、前回に作成したルートをコピーし、ファイル名を”json-pagination-edit”に変更します。
App/Config/Routs.phpファイルを開き、下記のルートを追加します。
$routes->get('/json-pagination-edit', 'Home::jsonPaginationEdit');
App/Controllers/Homeというコントローラをすでに作成していますので、そこに”jsonPaginationEdit”を追加します。
前回までの記事と同様ですが、最後に「department」の項目を増やしています。
public function jsonPaginationEdit()
{
$testModel = new TestModel();
$testData = $testModel -> findAll();
$dataArray =[];
foreach($testData as $row){
$dataArray[] = [
$row['id'],
$row['last_name'],
$row['first_name'],
$row['number'],
//下記を追記
$row['department']
];
}
$displayData = [
'jsonData'=>json_encode($dataArray)
];
return view('json-pagination-edit', $displayData);
}前回作成した”json-pagination”をAPP/Viewsの下にコピーし、ファイル名を”json-pagination-edit”とします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootstrap CDNをコピー -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--datatable CDNをコピー -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#table-datatable').dataTable({
data: <?php echo $jsonData ?>,
columns:[
{title: "ID"},
{title: "Last Name"},
{title: "First Name"},
{title: "Number"},
{title: "Department"}
],
order:[[ 1, "asc" ]],
lengthMenu: [20, 50, 100, 200],
displayLength: 20
});
} );
</script>
<title>CI4 DataTables Pagination</title>
</head>
<body>
<div class="container mt-0 ml-3">
<h1>CodeIgniter4 Datatablesを使ったページネーション JSON+編集ボタン</h1>
<table class="table table-sm table-bordered table-striped table-hover ml-3" id="table-datatable">
</table>
</div>
</body>
</html>DataTablesでの見出しとボタンの作成
まず、thタグに当たる見出しに「編集」をDataTablesスクリプト部分のtitleに追加します。
$(document).ready( function () {
$('#table-datatable').dataTable({
data: <?php echo $jsonData ?>,
columns:[
{title: "ID"},
{title: "Last Name"},
{title: "First Name"},
{title: "Number"},
{title: "Department"},
//下記の行を追加する。{title: "Department"},の最後に「,」を忘れずに。
{title: "編集"}
],
order:[[ 1, "asc" ]],
lengthMenu: [20, 50, 100, 200],
displayLength: 20
});
} );これでブラウザを最読み込みすると、エラーメッセージがでますが、これは追加したタイトルに対応するデータがないためです。そのままOKをクリックして進むと、見出しに「編集」が出ます。
次にこのカラムのセル内容を設定します。{title: “編集”}の”編集”後に「render:」以降で関数を作成し、指定したデータを持つボタンを作成します。このボタンは、ID「modalReviseUser」のモーダルをターゲットとして開き、データをdataId1からdata4にセットしています。
作成されたボタンのイメージとしては下記のようになります。
button type="button" id="btn1" class="btn-sm btn-warning user-btn" data-toggle="modal" data-target="#modalReviseUser" data-id1="1" data-id2="abc001" data-id3="xyz001" data-id4="xyz001" onclick="attachData(btn1)"<編集/button>- mordalのデータターゲット：#modalReviseUser
- data-id1：ID
- data-id2：Last Name
- data-id3：First Name
- data-id4：Number
- data-id5：Department
render:以降には下記を追記します。function (data, type, full, meta)のfullからデータをとり、ボタンのdata-idに格納していきます。function (data, type, full, meta)の詳細につきましては、下記のリンクを参照ください
{title: "編集",
//”編集” カンマの後に下記を追記します。
render: function (data, type, full, meta){
let buttonId = full[0];
let btnLastName = full[1];
let btnFirstName = full[2];
let btnNumber = full[3];
let btnDepartment = full[4];
let reviseBtn = "<button type='button' id='btn"+buttonId+"' class='btn-sm btn-warning user-btn' data-toggle='modal' data-target='#modalReviseUser' data-id1='"+buttonId+
"' data-id2='"+btnLastName+
"' data-id3='"+btnFirstName+
"' data-id4='"+btnNumber+
"' data-id5='"+btnDepartment+
"' onclick='attachData(btn"+buttonId+")'>編集</button>"
return reviseBtn;
}
} これでブラウザを再読み込みすると、編集ボタンが確認できます。デベロッパーツールでボタンを選択すると、上記のボタンイメージのように、データが格納されていることがわかります。
モーダルのinputタグにデータを渡す。
モーダルのデータ編集のinputタグにデータを渡しますが、まだモーダル自体がありませんので、モーダルを作成します。
<!-- Modal Revise User Info -->
<!-- idは上記のボタンに記述したdata-target='#modalReviseUser'の対象となるので、id名を同じにします -->
<div class="modal fade" id="modalReviseUser" tabindex="-1" role="dialog" aria-labelledby="reviseModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="reviseModalLabel">Revise user info</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="<?= base_url('revise-user')?>" method="post">
<div class="modal-body">
<div class="form-group row">
<label class="col-sm-3 col-form-label" for='reviseUserId'>User ID</label>
<div class="col">
<!-- この後で、このインプットタグにid1のデータを格納します。 -->
<input class="form-control" type="text" id="reviseUserId" name="userId">
</div>
</div>
<div class="form-group row">
6<label class="col-sm-3 col-form-label" for='reviseLastName'>Last Name</label>
<div class="col">
<!-- この後で、このインプットタグにid２のデータを格納します。 -->
<input class="form-control" type="text" id="reviseLastName" name="lastName">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for='reviseFirstName'>First Name</label>
<div class="col">
<!-- この後で、このインプットタグにid3のデータを格納します。 -->
<input class="form-control" type="text" id="reviseFirstName" name="firstName">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for='reviseNumber'>Number</label>
<div class="col">
<!-- この後で、このインプットタグにid4のデータを格納します。 -->
<input class="form-control" type="text" id="reviseNumber" name="number">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for='reviseDept'>Department</label>
<div class="col">
<!-- この後で、このセレクトタグにid５のデータを初期値とします。 -->
<select id="reviseDept" class="form-control" name="dept">
<option value="HR">Human Resource</option>
<option value="AC">Accounting</option>
<option value="SL">Sales</option>
<option value="PUR">Purchase</option>
<option value="WH">Warehouse</option>
<option value="GA">General Affair</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger" name="delete-st">Revise</button>
</div>
</form>
</div>
</div>
</div>
これで、編集ボタンをクリックするとモーダルが開くようになりました。あとは、モーダルにある入力フォームに既存値を初期値として表示するだけです。
上記のDataTablesスクリプトタグでボタンに記述した「onclick=’attachData()」により、クリックされるとフォームのValueにデータを渡します。上記ののスクリプトの下に「attacheData()」を記述します。
function attachData(btnId){
$('#reviseUserId').val($(btnId).data('id1'));
$('#reviseLastName').val($(btnId).data('id2'));
$('#reviseFirstName').val($(btnId).data('id3'));
$('#reviseNumber').val($(btnId).data('id4'));
$('#reviseDept').val($(btnId).data('id5'));
}これで完成です。ブラウザを最読み込みし、編集ボタンをクリックすると、入力フォームに初期値が表示されるようになりました。
データの中に空白（スペース）があると、data-へのデータ受け渡しがうまく行きません。この場合は、JSONではなく、通常の配列を使用し、tdタグをhtmlで作成してデータを格納するとよいでしょう。
変数を囲むシングルクォーテーション「’」が抜けていました。（上記は修正済み） データに空白のあるなしにかかわらず、シングルクォーテーションで変数を囲みましょう
——ホタイブログ—–
関連記事
Chart.js 複数軸で右表示しない、min/max設定ができない
CodeIgniter4 MS SQL SERVERの接続
CodeIgniter4 複数のデータベースを設定する
CodeIgniter4にJSONを使ってDataTablesを実装する
CodeIgniter4にBootstrap、DataTablesを使ったページネーション
CodeIgniter4 シンプルなページネーションの実装
コメント