Bootstrap Table select 全部并通过模式更新单元格值
Bootstrap Table select all and update cell value through modal
我目前有一个 Bootstrap Table 显示来自 SQL 数据库的一些数据，能够使用委托、编辑和删除选项分别编辑每一行。 Consign 只需将数据库中的 consign 值从否更改为是。
一次寄存多行的可能性更大，因此目标是能够使用内置复选框 select 多行，然后单击工具栏上的寄存按钮。然后这将打开一个模式以确认操作，然后将更改应用于数据库 - 即将所有 selected 行 consign 值从否更改为是。
我已经设法让按钮仅在复选框被 selected 时起作用，并且我还创建了一个模式，如果它处于活动状态，则在单击按钮时出现。那里有几个用于数据库更新的隐藏输入（select 选项显示是和今天的日期）。
我想我卡在了如何获取行的 ID（此处称为 no）以允许更新数据库的问题上。我已经尝试向 MacGyver 提出一些建议，但到目前为止没有任何效果，因此我们将不胜感激任何建议。
这是我目前的代码。
HYML Table - records.php
<div class="datatable-dashv1-list custom-datatable-overright">
<div id="toolbar">
<button id="consigned" class="btn btn-warning btn-md" data-toggle="modal" data-target="#modal_form" disabled><i class="glyphicon glyphicon-check"></i> Consign Selected</button>
</div>
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Consign Multiple Entries</h4>
</div>
<form action="#" id="form" class="form-horizontal">
<div class="modal-body form">
<input type="hidden" value="" name="no"/>
<div class="form-body">
<div class="form-group">
<p class="text-center">Are you sure you want to consign the selected items?</p>
<div class="col-md-9">
<select class="form-control" name="consigned" style="visibility:hidden;" required readonly>
<option value="Yes">Yes</option>
</select>
</div>
</div>
<div class="form-group">
<!-- below list_check shows the IDs of the rows selected -->
<label class="control-label col-md-3">* This is supposed to be hidden value</label>
<div class="col-md-9">
<input name='list_check'>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" id="btnConsign" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> Consign</button>
</div>
</form>
</div>
</div>
</div>
<table id="table" data-toggle="table" data-id-field="no" data-select-item-name="no" data-sort-name="no" data-sort-order="asc" data-pagination="true" data-page-list="[10, 25, 50, 100, 200, All]" data-search="true" data-searchable="true" data-show-columns="true" data-show-pagination-switch="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true"
data-cookie-id-table="saveId" data-show-columns-toggle-all="true" data-show-export="true" data-export-types="['xlsx', 'pdf']" data-export-options="{}" data-click-to-select="true" data-filter-control="true" data-filter-control-visible="true" data-filter-show-clear="true" data-show-refresh="false" data-maintain-meta-data="true" data-cookie="true" data-cookie-id-table="wasteId" data-cookie-expire="3h" data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="selected" data-checkbox="true">Select</th>
<th data-field="no" data-sortable="true" data-sorter="dateSorter" data-visible="false">No</th>
<th data-field="location" data-sortable="true" data-filter-control="select" data-filter-control-placeholder="Select Location">Location</th>
<th data-field="name" data-visible="false">Name</th>
<th data-field="area" data-visible="false">Area</th>
<th data-field="sendto" data-visible="false">Send To</th>
<th data-field="reference">Reference</th>
<th data-field="consigned" data-filter-control="select" data-filter-default="No">Consigned</th>
<th data-field="date_consigned" data-visible="false">Date Consigned</th>
<th data-field="action" class="col-lg-2">Action</th>
</tr>
</thead>
<tbody>
<?php
include 'include/fetch-data.php';
?>
</tbody>
</table>
</div>
PHP 获取-data.php
<?php
include 'include/dbconnect.php';
$sql = "SELECT * FROM Sendlist";
$result = $conn->query( $sql );
if ( $result->num_rows > 0 ) {
while ( $row = $result->fetch_assoc() ) {
echo '<tr>';
echo '<td></td>';
echo '<td>' . $row[ "no" ] . '</td>';
echo '<td>' . $row[ "location" ] . '</td>';
echo '<td>' . $row[ "name" ] . '</td>';
echo '<td>' . $row[ "area" ] . '</td>';
echo '<td>' . $row[ "sendto" ] . '</td>';
echo '<td>' . $row[ "reference" ] . '</td>';
echo '<td>' . $row[ "consigned" ] . '</td>';
echo '<td>' . $row[ "date_consigned" ] . '</td>';
if ( $row[ 'consigned' ] == 'Yes' ) {
echo "<td>
<a href='#consign_" . $row[ 'no' ] . "' class='btn btn-warning btn-sm hide' data-toggle='modal' id='consign' name='consign'><span class='glyphicon glyphicon-check'></span> Consign</a>
<a href='#unconsign_" . $row[ 'no' ] . "' class='btn btn-warning btn-sm' data-toggle='modal' id='unconsign' name='unconsign'><span class='glyphicon glyphicon-check'></span> Unconsign</a>
<a href='#edit_" . $row[ 'no' ] . "' class='btn btn-success btn-sm' data-toggle='modal'><span class='glyphicon glyphicon-edit'></span> Edit</a>
<a href='#delete_" . $row[ 'no' ] . "' class='btn btn-danger btn-sm' data-toggle='modal'><span class='glyphicon glyphicon-trash'></span> Delete</a>
</td>";
}
echo "</tr>";
include( 'include/edit-delete-modal.php' );
echo "</tr>";
}
}
?>
<script>
var $table = $('#table')
var $consigned = $('#consigned')
$(function() {
$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
$consigned.prop('disabled', !$table.bootstrapTable('getSelections').length)
})
$consigned.click(function () {
var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
})
$table.bootstrapTable('getSelections', {
field: 'no',
values: ids
})
$consigned.prop('disabled', true)
})
})
</script>
为了让其他人在以后需要时可以找到答案，我使用了以下脚本来获取我选择的行的 ID，以通过模态中的隐藏输入传递它们，稍后将使用该输入（使用 explode ) 更新 SQL 个条目。
<script type="text/javascript">
var $table = $('#table');
function getRowSelections() {
return $.map($table.bootstrapTable('getSelections'), function(row) {
return row;
})
}
$('#consigned').click(function() {
var selectedRows = getRowSelections();
var selectedItems = '\n';
$.each(selectedRows, function(index, value) {
selectedItems += value.no + ',';
});
$('#modal_form').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggers the modal
var recipient = button.data('whatever'); // Extract info from data-* attributes
var modal = $(this);
modal.find(".modal-body input[name='list_check']").val(selectedItems);
});
});
</script>
我目前有一个 Bootstrap Table 显示来自 SQL 数据库的一些数据，能够使用委托、编辑和删除选项分别编辑每一行。 Consign 只需将数据库中的 consign 值从否更改为是。
一次寄存多行的可能性更大，因此目标是能够使用内置复选框 select 多行，然后单击工具栏上的寄存按钮。然后这将打开一个模式以确认操作，然后将更改应用于数据库 - 即将所有 selected 行 consign 值从否更改为是。
我已经设法让按钮仅在复选框被 selected 时起作用，并且我还创建了一个模式，如果它处于活动状态，则在单击按钮时出现。那里有几个用于数据库更新的隐藏输入（select 选项显示是和今天的日期）。
我想我卡在了如何获取行的 ID（此处称为 no）以允许更新数据库的问题上。我已经尝试向 MacGyver 提出一些建议，但到目前为止没有任何效果，因此我们将不胜感激任何建议。
这是我目前的代码。
HYML Table - records.php
<div class="datatable-dashv1-list custom-datatable-overright">
<div id="toolbar">
<button id="consigned" class="btn btn-warning btn-md" data-toggle="modal" data-target="#modal_form" disabled><i class="glyphicon glyphicon-check"></i> Consign Selected</button>
</div>
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Consign Multiple Entries</h4>
</div>
<form action="#" id="form" class="form-horizontal">
<div class="modal-body form">
<input type="hidden" value="" name="no"/>
<div class="form-body">
<div class="form-group">
<p class="text-center">Are you sure you want to consign the selected items?</p>
<div class="col-md-9">
<select class="form-control" name="consigned" style="visibility:hidden;" required readonly>
<option value="Yes">Yes</option>
</select>
</div>
</div>
<div class="form-group">
<!-- below list_check shows the IDs of the rows selected -->
<label class="control-label col-md-3">* This is supposed to be hidden value</label>
<div class="col-md-9">
<input name='list_check'>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" id="btnConsign" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> Consign</button>
</div>
</form>
</div>
</div>
</div>
<table id="table" data-toggle="table" data-id-field="no" data-select-item-name="no" data-sort-name="no" data-sort-order="asc" data-pagination="true" data-page-list="[10, 25, 50, 100, 200, All]" data-search="true" data-searchable="true" data-show-columns="true" data-show-pagination-switch="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true"
data-cookie-id-table="saveId" data-show-columns-toggle-all="true" data-show-export="true" data-export-types="['xlsx', 'pdf']" data-export-options="{}" data-click-to-select="true" data-filter-control="true" data-filter-control-visible="true" data-filter-show-clear="true" data-show-refresh="false" data-maintain-meta-data="true" data-cookie="true" data-cookie-id-table="wasteId" data-cookie-expire="3h" data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="selected" data-checkbox="true">Select</th>
<th data-field="no" data-sortable="true" data-sorter="dateSorter" data-visible="false">No</th>
<th data-field="location" data-sortable="true" data-filter-control="select" data-filter-control-placeholder="Select Location">Location</th>
<th data-field="name" data-visible="false">Name</th>
<th data-field="area" data-visible="false">Area</th>
<th data-field="sendto" data-visible="false">Send To</th>
<th data-field="reference">Reference</th>
<th data-field="consigned" data-filter-control="select" data-filter-default="No">Consigned</th>
<th data-field="date_consigned" data-visible="false">Date Consigned</th>
<th data-field="action" class="col-lg-2">Action</th>
</tr>
</thead>
<tbody>
<?php
include 'include/fetch-data.php';
?>
</tbody>
</table>
</div>
PHP 获取-data.php
<?php
include 'include/dbconnect.php';
$sql = "SELECT * FROM Sendlist";
$result = $conn->query( $sql );
if ( $result->num_rows > 0 ) {
while ( $row = $result->fetch_assoc() ) {
echo '<tr>';
echo '<td></td>';
echo '<td>' . $row[ "no" ] . '</td>';
echo '<td>' . $row[ "location" ] . '</td>';
echo '<td>' . $row[ "name" ] . '</td>';
echo '<td>' . $row[ "area" ] . '</td>';
echo '<td>' . $row[ "sendto" ] . '</td>';
echo '<td>' . $row[ "reference" ] . '</td>';
echo '<td>' . $row[ "consigned" ] . '</td>';
echo '<td>' . $row[ "date_consigned" ] . '</td>';
if ( $row[ 'consigned' ] == 'Yes' ) {
echo "<td>
<a href='#consign_" . $row[ 'no' ] . "' class='btn btn-warning btn-sm hide' data-toggle='modal' id='consign' name='consign'><span class='glyphicon glyphicon-check'></span> Consign</a>
<a href='#unconsign_" . $row[ 'no' ] . "' class='btn btn-warning btn-sm' data-toggle='modal' id='unconsign' name='unconsign'><span class='glyphicon glyphicon-check'></span> Unconsign</a>
<a href='#edit_" . $row[ 'no' ] . "' class='btn btn-success btn-sm' data-toggle='modal'><span class='glyphicon glyphicon-edit'></span> Edit</a>
<a href='#delete_" . $row[ 'no' ] . "' class='btn btn-danger btn-sm' data-toggle='modal'><span class='glyphicon glyphicon-trash'></span> Delete</a>
</td>";
}
echo "</tr>";
include( 'include/edit-delete-modal.php' );
echo "</tr>";
}
}
?>
<script>
var $table = $('#table')
var $consigned = $('#consigned')
$(function() {
$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
$consigned.prop('disabled', !$table.bootstrapTable('getSelections').length)
})
$consigned.click(function () {
var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
})
$table.bootstrapTable('getSelections', {
field: 'no',
values: ids
})
$consigned.prop('disabled', true)
})
})
</script>
为了让其他人在以后需要时可以找到答案，我使用了以下脚本来获取我选择的行的 ID，以通过模态中的隐藏输入传递它们，稍后将使用该输入（使用 explode ) 更新 SQL 个条目。
<script type="text/javascript">
var $table = $('#table');
function getRowSelections() {
return $.map($table.bootstrapTable('getSelections'), function(row) {
return row;
})
}
$('#consigned').click(function() {
var selectedRows = getRowSelections();
var selectedItems = '\n';
$.each(selectedRows, function(index, value) {
selectedItems += value.no + ',';
});
$('#modal_form').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggers the modal
var recipient = button.data('whatever'); // Extract info from data-* attributes
var modal = $(this);
modal.find(".modal-body input[name='list_check']").val(selectedItems);
});
});
</script>