Cara Mempertahankan Nilai Kontrol Input Di Bootstrap-Table Pada Paging, Filtering, Dan Pencarian Di ASP.NET MVC

Cara Mempertahankan Nilai Kontrol Input Di Bootstrap-Table Pada Paging, Filtering, Dan Pencarian Di ASP.NET MVC

Tim,

Ketika bekerja dengan Bootstrap-Table oleh Wenzhixin dalam proyek tertentu, saya mengalami masalah yaitu nilai kontrol input seperti kotak centang dan kotak teks hilang ketika saya melakukan pencarian, pemfilteran, atau pagination dari Bootstrap-Table. Saya mencoba beberapa solusi yang disajikan di github dan dokumentasi seperti mengatur properti dari data-pemelihara-meta-data atau data-maintain-dipilih untuk benar dan banyak lagi. Setelah beberapa jam, saya menemukan solusi dalam dokumentasi yaitu Menyimpan Data Baris Menggunakan Input. Solusinya adalah mengambil nilai kontrol saat ini dan memanggil Bootstrap-Table metode updateRow untuk melestarikan nilai-nilai. Seluruh halaman ditampilkan di bawah ini termasuk kode JavaScript-nya.

Bacaan Lainnya

@{
ViewBag.Title = "Home Page";
}

<div class="row">
<div id="divPeople" class="col-md-12">
<div class="table-responsive">
<table id="tblPeople"
class="table table-striped"
data-toggle="table"
data-search="true"
data-sort-name="FullName"
data-sort-order="asc"
data-show-export="false"
data-show-columns="true"
data-id-table="advancedTable"
data-show-multi-sort="false"
data-toolbar="#toolbar"
data-click-to-select="true"
data-cookie="true"
data-pagination="true"
data-cookie-id-table="tblPeopleID"
data-page-size="10"
data-filter-control="true"
data-sortable="true"
data-url="@Url.Action("GetPeople","Home")"
data-page-list="[10, 25, 500, 1000, 10000, All]">
<thead>
<tr style="background-color: #FFFFFF;">
<th data-field="FullName" data-visible="true" data-sortable="true" data-searchable="true">Full Name</th>
<th data-field="PreferredName" data-visible="true" data-sortable="true" data-searchable="true">Preferred Name</th>
<th data-field="PhoneNumber" data-visible="true" data-events="peopleEvents" data-sortable="true" data-formatter="PhoneNumberFormatter" data-searchable="true">Phone Number</th>
<th data-field="IsSalesperson" data-visible="true" data-sortable="true" data-events="peopleEvents" data-formatter="IsSalespersonFormatter" data-searchable="true">Is Salesperson</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="row">
<br />
</div>
<div id="divContainer" class="row">
<div class="col-md-12">
<div id="divBtnSave" class="col-md-3">
<button id="btnSave" type="button" value="Save" class="btn btn-primary">Save</button>
</div>
<div class="col-md-9"></div>
</div>
</div>
@section Scripts{
<link href="~/Content/bootstrap-table.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-table.js"></script>
<style type="text/css">
#divBtnSave{
padding-left:0px;
}
</style>
<script type="text/javascript">
var checkedRows = [];
var $table = $('#tblPeople');

$(function () {
$('#btnSave').click(function (e) {

if (checkedRows.length < 1) {
alert('No records selected!');
}
else {
alert('There are ' + checkedRows.length + ' records selected!');
}
});
});

function IsSalespersonFormatter(value, row, index) {
var checked = value ? 'checked' : '';
return '<input type="checkbox" name="chkSalesPerson_' + index + '" ' + checked + ' />';
}

function PhoneNumberFormatter(value, row, index) {
return '<input type="text" name="txtPhone_' + index + '" readonly style="background-color:white;" class="form-control" value="' + value + '">';
}

window.peopleEvents = {

'change :input': function (e, value, row, index) {
var target = $(e.target).attr('name');
if (target.includes('chkSalesPerson')) {
row.IsSalesperson = $(e.target).prop('checked');

if (row.IsSalesperson) {
checkedRows.push({ IsSalesperson: true, PhoneNumber: row.PhoneNumber });
}
else {
$.each(checkedRows, function (index, value) {
if (value.AdmUserID === row.AdmUserID) {
checkedRows.splice(index, 1);
return false;
}
});
}
}
else {
row.PhoneNumber = $(e.target).prop('value');
}

$table.bootstrapTable('updateRow', {
index: index,
row: row
});
}
};
</script>
}

Seperti yang Anda lihat di atas, saya menggunakan atribut pemformat data untuk kolom PhoneNumber yang mengembalikan kontrol kotak teks input dan IsSalesPerson yang merupakan kontrol kotak centang. PeoplesEvent akan mendapatkan kontrol target dari baris yang dipilih dan mempertahankan nilainya menggunakan metode updateRow di seluruh paging, mencari dan memfilter Bootstrap-Table. Mengatur data-pemelihara-meta-data atau data-maintain-dipilih tidak akan berfungsi jika kita menggunakan atribut pemformat data.

$table.bootstrapTable('updateRow', {
index: index,
row: row
});

Saat menjalankan aplikasi, Anda dapat melihat Bootstrap-Table yang telah diisi sebelumnya dengan nilai tanpa pilihan atau modifikasi apa pun.

Saya kemudian memilih dua catatan di halaman pertama dan menavigasi ke halaman ketiga.

Di halaman ketiga, saya juga memilih dua set rekaman lainnya.

Setelah itu, saya mengklik tombol Simpan yang menunjukkan bahwa saya telah memilih empat catatan. Begitulah cara saya memperbaiki masalah ini.

Editor: NEXCloud Team

Pos terkait