Bootstrap table使用方法记录

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

HTML代码：



@section styles{
  
    .main {
      margin-top:20px;
    }

    .modal-body .form-group .form-control {
      display:inline-block;
    }
    .modal-body .form-group .tips {
      color:red;
    }
  
}


  
    
  

  



  
    
      
 
 
      
      
 
   编号：
   
 
 
   名称：
   
   (最多20个字)
 
 
   技术参数：
   
   (最多150个字)
 
 
   类型：
   
 
      
      
 
 
      
    
  


@section scripts{
  
  
  
  
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。

Bootstrap table使用方法记录

编号： 名称： (最多20个字) 技术参数： (最多150个字) 类型： 普通产品 明星产品 关闭 {{modalBtn}} @section scripts{ }

JavaScript相关栏目本月热门文章

编号：名称： (最多20个字) 技术参数： (最多150个字) 类型： @section scripts{ }