Bootstrap table使用方法记录

/*index.cshtml*/ @section styles{ <style> .main { margin-top:20px; } .modal-body .form-group .form-control { display:inline-block; } .modal-body .form-group .tips { color:red; } </style> } <div> <div> <button type="button"> <span aria-hidden="true"></span>新增产品 </button> </div> <table></table> </div> <div tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">&times;</button> <h4></h4> </div> <div> <div> <label for="prodId">编号：</label> <input type="text" disabled> </div> <div> <label for="prodName">名称：</label> <input type="text"> <span >(最多20个字)</span> </div> <div> <label for="prodTecParam">技术参数：</label> <textarea rows="3"></textarea> <span >(最多150个字)</span> </div> <div> <label for="prodType">类型：</label> <select> <option value="1001">普通产品</option> <option value="1002">明星产品</option> </select> </div> </div> <div> <button type="button" data-dismiss="modal">关闭</button> <button type="button">{{modalBtn}}</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> @section scripts{ <script type="text/javascript" src="https://www.jb51.net/~/Scripts/bootstrap-table.js"></script> <script type="text/javascript" src="https://www.jb51.net/~/Scripts/bootstrap-table-zh-CN.js"></script> <script type="text/javascript" src="https://www.jb51.net/~/Scripts/common.js"></script> <script type="text/javascript" src="https://www.jb51.net/~/Views/Home/index.js"></script> }

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 '<span>' + value.substr(0, textLength) + '...</span>&nbsp;<a href="javascript:void(0)" >展开</a>'; } 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 '<a href="javascript:void(0)" >修改</a> ' + '<a href="javascript:void(0)" >删除</a>'; }; 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); } }); };