Bootstrap table使用方法记录

Bootstrap table使用方法记录

本文实例为大家分享了Bootstrap table的使用方法，供大家参考，具体内容如下

HTML代码：

/*index.cshtml*/

@section styles{

}

新增产品

×

编号：

名称：

(最多20个字)

技术参数：

(最多150个字)

类型：

普通产品

明星产品

关闭

{{modalBtn}}

@section scripts{

}

JS代码：

/*index.js*/

$(document).ready(function () {

var $table = $('#table');

var textLength = 30; //技术参数默认折叠显示长度

$table.bootstrapTable({

locale: 'zh-CN',

url: '/product/getList',

method: 'post',

contentType: 'application/json',

dataType: "json",

toolbar: '#toolbar', //工具按钮用哪个容器

pagination: true,

search: true,

showRefresh: true,

sidePagination: "server", //分页方式：client客户端分页，server服务端分页

singleSelect: true, //单行选择

pageNumber: 1, //初始化加载第一页，默认第一页

pageSize: 10, //每页的记录行数

pageList: [5, 10, 20],

queryParams: function (params) { //请求参数

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: '产品编号',

field: 'id'

},

{

title: '产品名称',

width: 200,

field: 'name'

},

{

title: '技术参数',

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 = "普通产品";

else if (value == "1002")

type = "明星产品";

return type;

};

function operateFormatter (value, row, index) {

return '修改 '

+ '删除';

};

function showUpdateModal (e, value, row, index) {

$("#productModalLabel").text("更新产品信息");

$("#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: "确认删除该产品？",

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', '警告', '服务器异常，请稍后再试！');

console.log("error：", err.statusText);

}

});

return true;

}

else {

return false;

}

}

});

http://};

var $search = $table.data('bootstrap.table').$toolbar.find('.search input');

$search.attr('placeholder', '请输入编号、产品名称、技术参数搜索');

$search.css('width', '400');

$(".model .form-group input").on("click", function(){

$(this).next(".tips").text("");

});

});

var showAddModal = function () {

$("#productModalLabel").text("新增产品");

$("#modalSubmitBtn").text("新增");

$("#prodId").val('');

$("#prodName").val('');

$("#prodTecParam").val('');

$("#modalSubmitBtn").unbind();

$("#modalSubmitBtn").on("click", addProduct);

$("#productModal").modal("show");

};

var addProduct = function () {

var product = {

name: $("#prodName").val(),

tecParam: $("#prodTecParam").val(),

type: $("#prodType").val()

};

if (product.name == null || product.name == "") {

$("#prodName").next(".tips").text("产品名称不能为空！");

return false;

}

if (product.name.length > 20) {

$("#prodName").next(".tips").text("最多20个字!");

return false;

}

if (product.tecParam.length > 150) {

$("#prodTecParam").next(".tips").text("最多150个字!");

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', '警告', '服务器异常，请稍后再试！');

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("产品名称不能为空！");

return false;

}

if (product.name.length > 20) {

$("#prodName").next(".tips").text("最多20个字!");

return false;

}

if (product.tecParam.length > 150) {

$("#prodTecParam").next(".tips").text("最多150个字!");

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', '警告', '服务器异常，请稍后再试！');

console.log("error：", err.statusText);

}

});

};

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。