Bootstrap table使用方法记录

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

HTML代码：

/*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 class="main">
 <div id="toolbar" class="btn-group">
 <button id="addProductBtn" type="button" class="btn btn-default" onclick="showAddModal()">
 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增产品
 </button>
 </div>

 <table id="table"></table>
</div>

<div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title" id="productModalLabel"></h4>
 </div>
 <div class="modal-body">
 <div class="form-group">
 <label for="prodId" class="col-md-2">编号：</label>
 <input type="text" class="form-control" id="prodId" disabled>
 </div>
 <div class="form-group">
 <label for="prodName" class="col-md-2">名称：</label>
 <input type="text" class="form-control" id="prodName">
 <span class="tips" >(最多20个字)</span>
 </div>
 <div class="form-group">
 <label for="prodTecParam" class="col-md-2">技术参数：</label>
 <textarea rows="3" class="form-control" id="prodTecParam"></textarea>
 <span class="tips" >(最多150个字)</span>
 </div>
 <div class="form-group">
 <label for="prodType" class="col-md-2">类型：</label>
 <select class="form-control" id="prodType">
 <option value="1001">普通产品</option>
 <option value="1002">明星产品</option>
 </select>
 </div>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button id="modalSubmitBtn" type="button" class="btn btn-primary">{{modalBtn}}</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal -->
</div>

@section scripts{
 <script type="text/javascript" src="~/Scripts/bootstrap-table.js"></script>
 <script type="text/javascript" src="~/Scripts/bootstrap-table-zh-CN.js"></script>
 <script type="text/javascript" src="~/Scripts/common.js"></script>
 <script type="text/javascript" src="~/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 class="tec-param">' + value.substr(0, textLength) + '...</span> <a class="toggle" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >展开</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 class="mod btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a> '
 + '<a class="delete btn btn-danger" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</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);
 }
 });
};