Bootstrap table使用方法记录

 /*index.cshtml*/ @section styles{  } 
 
  新增产品 
 
 
 
 ×
 
 编号：
 名称：(最多20个字)
 技术参数：(最多150个字)
 类型： 普通产品明星产品
 关闭{{modalBtn}}
 @section scripts{  } 

 /*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; } } }); }; 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); } }); };