我目前有一個引導表,顯示來自 SQL 資料庫的一些資料,能夠使用寄售、編輯和洗掉選項分別編輯每一行。Consign 只是consign將 DB 中的值從 No更改為 Yes。
更有可能一次委托多行,因此目的是能夠使用內置復選框選擇多個行,然后單擊工具列上的委托按鈕。然后這將打開一個模式來確認操作,然后將更改應用到資料庫 - 即將所有選定行的consign值從“否”更改為“是”。
我設法使按鈕僅在選中復選框時才起作用,并且我還創建了一個模式,如果它處于活動狀態,則單擊該按鈕時會出現該模式。資料庫更新中有幾個隱藏的輸入(選擇選項顯示是和今天的日期)。
我想我被困在如何獲取行的 ID(no此處稱為)以允許更新資料庫的問題上。我已經嘗試在這里一起向 MacGyver 提出一些建議,但到目前為止沒有任何效果,所以任何建議都將不勝感激。
這是我到目前為止的代碼。
HYML 表 - 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 獲取資料.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>

uj5u.com熱心網友回復:
只是為了讓其他人可以在將來需要時找到答案,我使用以下腳本來獲取我選擇的行的 ID,以將它們通過模式中的隱藏輸入傳遞,然后稍后使用(通過爆炸)更新 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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/407522.html
標籤:
