bootstraptable
function ColumnFormatter(value, row, index) {
return ' <button class="btn btn-danger" data-index="' + index + '" onclick="Del(\'' + row.id + '\')); return false;">刪除</button>';;
}
source : https://live.bootstrap-table.com/example/column-options/formatter.html
$("#t-table").bootstrapTable({
url: '',
classes: 'table table-list',
striped: true, //是否顯示行間隔色
pagination: true, //是否顯示分頁
showHeader: true,
pageSize: 100, //一頁顯示幾筆
pageList: [0], //可供選擇的每頁的行數（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁,並記錄row
columns: [
{
field: 'column',
title: '顯示',
formatter: ColumnFormatter
},
{
field: 'date',
title: '日期',
formatter: setDateFormatToDay
},
],
onLoadError: function () {
showTips("數據加載失敗！");
},
formatNoMatches: function () {
return '';
},
formatShowingRows: function (fromIndex, toIndex, totalSize) {
//目前第幾頁
var currentPage = Math.ceil(fromIndex / this.pageSize);
//總共幾頁
var totalPageCount = Math.ceil(totalSize / this.pageSize);
return currentPage + ' / ' + totalPageCount;
}
});
source : https://blog.csdn.net/u013943009/article/details/79459029
<div class="col-sm">
<input type="file" class="form-control" id="fileUploader" >
<label class="custom-file-label" for="customFile" id="fileUploader"></label>
</div>
if ($("#fileUploader").get(0).files == 0) {
SweetAlert('warning', '請上傳附件', 3000);
return;
}
var formData = new FormData();
if ($("#fileUploader").val().length > 0) {
var pageImgUpload = $("#fileUploader").get(0).files; //上傳
for (var i = 0; i < 1; i++) {
formData.append(pageImgUpload[i].name, pageImgUpload[i]);
}
}
formData.append("id", this.id);
formData.append("operatorId", '@Model.variable');
$.ajax({
type: 'POST',
url: 'https://domain/api/Controller/Action',
data: formData,
cache: false,
async: false,
contentType: false,
processData: false,
headers: {
'requestverificationtoken': $('input[name="__RequestVerificationToken"]').val()
},
beforeSend: function () {
},
success: function (data) {
JsFun();
},
error: function (error) {
if (error.status === 400) {
}
}
});
}
source : https://stackoverflow.com/questions/46603256/sending-formdata-for-file-upload-using-ajax
https://stackoverflow.com/questions/33761469/sending-file-together-with-form-data-via-ajax-post
https://pjchender.blogspot.com/2019/01/js-javascript-input-file-upload-file.html
function Query() {
$.ajax({
type: 'GET',
url: 'https://domain/api/Controller/Action',
data: {
para: $("#Para").val(),
},
cache: false,
async: true,
beforeSend: function () {
LoadingStatus(true);
},
success: function (data) {
if (data != null) {
} else {
console.log("Fail");
}
},
error: function (error) {
if (error.status === 400) {
}
},
complete: function (data) {
LoadingStatus(false);
}
});
}
source : https://seanacnet.com/website-related/jquery-ajax-post-get-example/
https://stackoverflow.com/questions/56934849/ajax-post-request-with-antiforgerytoken-on-net-core-2-2
https://ithelp.ithome.com.tw/articles/10248847
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button> <!-- The Modal -->
<div class="modal main-content" id="exampleModal">
<!-- bootstrap 5 -->
<div class="modal-dialog modal-xl">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">附件 編輯</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <!-- bootstrap 5 -->
</div>
<!-- Modal body -->
<div class="modal-body">
<form id="addForm" method="post">
@{
@Html.AntiForgeryToken()
<div class="row form-group">
<div class="col-sm-5 title">
</div>
<div class="col-sm title">
<h4>新增 </h4>
</div>
</div>
<div class="row form-group">
<div class="col-sm-2 edit">
<label for="" class="form-label">show:</label>
</div>
<div class="col-sm-2">
@Html.DropDownListFor(o => o.list, Model.Lists, new { @class = "form-select", placeholder = "" })
</div>
</div>
<div class="row form-group">
<div class="col-sm-2 edit">
<label for="" class="form-label" style="color:red;">show:</label>
</div>
<div class="col-sm-2">
@Html.TextBoxFor(o => o.text, new { @class = "form-control", placeholder = "" })
</div>
</div>
<div class="btnBar">
<button type="submit" class="btn btn-primary" onclick="Add(); return false;">新增</button>
<button type="submit" class="btn btn-secondary" onclick="();return false;">取消</button>
</div>
<br />
}
</form>
</div>
</div>
</div>
</div>
source : https://getbootstrap.com/docs/4.0/components/modal/
var isEdit = false;
function getChildEdit(obj, index, field) {
var row = $("#father-table").bootstrapTable('getData', 0)[obj.getAttribute('data-index')];
QueryChild(row.key);
$("#childtable").bootstrapTable('showColumn', '');
isEdit = true;
}
function FeatureFormatter(value, row, index, field) {
var modal = field == '子' ? 'editLrnTeacher' : '';
return '<label id="lb' + field + '">show</label> <button class="btn btn-light" data-index=' + index + ' onclick="getChildEdit(this,' + index + ',\'' + field + '\');" data-bs-toggle="modal" data-bs-target="#' + modal + '">Edit</button>';
}
var showColumn = '';
function SetTableFormat() {
$('#childTable').on('hidden.bs.modal', function () { isEdit = false; });
$("#father-table").on("click-row.bs.table",
function (e, row, $tr, field) {
QueryChild(row.key, false); //查詢子資訊
showColumn = field;
//當未編輯，則可顯示隱藏detialTable
if(!isEdit) {
if ($tr.next().is('tr.detail-view')) {
$('#lable').text('預覽');
$("#father-table").bootstrapTable('collapseRow', $tr.data('index'));
} else {
$('#lb' + showColumn).text('隱藏');
$("#father-table").bootstrapTable('expandRow', $tr.data('index'));
}
}
});
$("#father-table").on('expand-row.bs.table', function (e, index, row, $detail) {
var table = '';
if (showColumn == 'childTable') {
$("#child-table").bootstrapTable('hideColumn', '');
table = $("#child-table").html();
}
$detail.html(table);
});
$("#father-table").bootstrapTable({
url: '',
columns: [
{
field: 'childColumn',
title: 'Name',
formatter: this.FeatureFormatter
},
],
onLoadError: function() {
showTips("數據加載失敗！");
},
formatShowingRows: function(fromIndex, toIndex, totalSize) {
//目前第幾頁
var currentPage = Math.ceil(fromIndex / this.pageSize);
//總共幾頁
var totalPageCount = Math.ceil(totalSize / this.pageSize);
return currentPage + ' / ' + totalPageCount;
}
});
}
source : https://www.itxst.com/bootstrap-table-events/ej3miv6n.html
https://bootstrap-table.com/docs/api/events/