本文實(shí)例為大家分享了Bootstrap table的使用方法，供大家參考，具體內(nèi)容如下
創(chuàng)新互聯(lián)公司執(zhí)著的堅(jiān)持網(wǎng)站建設(shè)，小程序開發(fā)；我們不會(huì)轉(zhuǎn)行，已經(jīng)持續(xù)穩(wěn)定運(yùn)營十年。專業(yè)的技術(shù)，豐富的成功經(jīng)驗(yàn)和創(chuàng)作思維，提供一站式互聯(lián)網(wǎng)解決方案，以客戶的口碑塑造品牌，攜手廣大客戶，共同發(fā)展進(jìn)步。
HTML代碼：
重慶分公司
重慶分公司
/*index.cshtml*/
@section styles{
}
@section scripts{
}
JS代碼：
/*index.js*/
$(document).ready(function () {
var $table = $('#table');
var textLength = 30; //技術(shù)參數(shù)默認(rèn)折疊顯示長度
$table.bootstrapTable({
locale: 'zh-CN',
url: '/product/getList',
method: 'post',
contentType: 'application/json',
dataType: "json",
toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
pagination: true,
search: true,
showRefresh: true,
sidePagination: "server", //分頁方式：client客戶端分頁，server服務(wù)端分頁
singleSelect: true, //單行選擇
pageNumber: 1, //初始化加載第一頁，默認(rèn)第一頁
pageSize: 10, //每頁的記錄行數(shù)
pageList: [5, 10, 20],
queryParams: function (params) { //請(qǐng)求參數(shù)
var temp = {
pageSize: params.limit, //頁面大小
pageNo: params.offset / params.limit + 1, //頁碼
search: $('.search input').val()
};
return temp;
},
responseHandler: function (res) {
return {
pageSize: res.pageSize,
pageNumber: res.pageNo,
total: res.total,
rows: res.rows
};
},
columns: [
{
title: '產(chǎn)品編號(hào)',
field: 'id'
},
{
title: '產(chǎn)品名稱',
width: 200,
field: 'name'
},
{
title: '技術(shù)參數(shù)',
field: 'tecParam',
width: 300,
formatter: tecParamFormatter,
events: {
"click .toggle": toggleText
}
},
{
title: '類型',
field: 'type',
formatter: typeFormatter
},
{
title: '操作',
formatter: operateFormatter,
events: {
"click .mod": showUpdateModal,
"click .delete": deleteProduct
}
}
]
});
function tecParamFormatter(value, row, index) {
if (value != null && value.length > 30) {
return '' + value.substr(0, textLength) + '... 展開';
}
return value;
}
function toggleText(e, value, row, index) {
if (value == null) {
return false;
}
var $tecParam = $(this).prev(".tec-param"),
$toggle = $(this);
if ($tecParam.text().length > textLength + 5) { //折疊
$tecParam.text(value.substr(0, textLength) + "...");
$toggle.text("展開");
}
else if (value.length > textLength + 5 && $tecParam.text().length <= textLength + 5) { //展開
$tecParam.text(value);
$toggle.text("折疊");
}
}
function typeFormatter(value, row, index) {
var type = "";
if (value == "1001")
type = "普通產(chǎn)品";
else if (value == "1002")
type = "明星產(chǎn)品";
return type;
};
function operateFormatter (value, row, index) {
return '修改 '
+ '刪除';
};
function showUpdateModal (e, value, row, index) {
$("#productModalLabel").text("更新產(chǎn)品信息");
$("#modalSubmitBtn").text("更新");
$("#prodId").val(row.id);
$("#prodId").attr("disabled", true); //禁止修改id
$("#prodName").val(row.name);
$("#prodTecParam").val(row.tecParam);
if (row.type == 1001)
$("#prodType").find('option[value="1001"]').attr("selected", true);
else if (row.type == 1002)
$("#prodType").find('option[value="1002"]').attr("selected", true);
$("#modalSubmitBtn").unbind();
$("#modalSubmitBtn").on("click", updateProduct);
$("#productModal").modal("show");
};
function deleteProduct (e, value, row, index) {
var product = {
id: row.id
};
if (product.id === null || product.id === "") {
return false;
}
Common.confirm({
message: "確認(rèn)刪除該產(chǎn)品？",
operate: function (result) {
if (result) {
$.ajax({
type: "post",
url: "/product/delete",
contentType: "application/json",
data: JSON.stringify(product),
success: function (data) {
if (data !== null) {
if (data.result) {
$("#table").bootstrapTable("refresh", { silent: true });
tipsAlert('alert-success', '提示', '刪除成功！');
}
else {
tipsAlert('alert-warning', '提示', '刪除失敗！');
}
}
},
error: function (err) {
tipsAlert('alert-danger', '警告', ' 20) {
$("#prodName").next(".tips").text("最多20個(gè)字!");
return false;
}
if (product.tecParam.length > 150) {
$("#prodTecParam").next(".tips").text("最多150個(gè)字!");
return false;
}
$.ajax({
type: "post",
url: "/product/add",
contentType: "application/json",
data: JSON.stringify(product),
success: function (data) {
if (data !== null) {
if (data.result) {
$("#table").bootstrapTable("refresh", { silent: true });
$("#productModal").modal('hide');
$("#prodId").val('');
$("#prodName").val('');
$("#prodTecParam").val('');
tipsAlert('alert-success', '提示', '新增成功！');
}
else {
tipsAlert('alert-warning', '提示', '新增失??！');
}
}
},
error: function (err) {
tipsAlert('alert-danger', '警告', '服務(wù)器異常，請(qǐng)稍后再試！');
console.log("error：", err.statusText);
}
});
};
var updateProduct = function () {
var product = {
id: $("#prodId").val(),
name: $("#prodName").val(),
tecParam: $("#prodTecParam").val(),
type: $("#prodType").val()
};
if (product.name == null || product.name == "") {
$("#prodName").next(".tips").text("產(chǎn)品名稱不能為空！");
return false;
}
if (product.name.length > 20) {
$("#prodName").next(".tips").text("最多20個(gè)字!");
return false;
}
if (product.tecParam.length > 150) {
$("#prodTecParam").next(".tips").text("最多150個(gè)字!");
return false;
}
$.ajax({
type: "post",
url: "/product/update",
contentType: "application/json",
data: JSON.stringify(product),
success: function (data) {
if (data !== null) {
if (data.result) {
$("#table").bootstrapTable("refresh", { silent: true });
$("#productModal").modal('hide');
$("#prodId").val('');
$("#prodName").val('');
$("#prodTecParam").val('');
tipsAlert('alert-success', '提示', '修改成功！');
}
else {
tipsAlert('alert-warning', '提示', '修改失??！');
}
}
},
error: function (err) {
tipsAlert('alert-danger', '警告', '服務(wù)器異常，請(qǐng)稍后再試！');
console.log("error：", err.statusText);
}
});
};
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
