搜尋

首頁  >  文章  >  web前端  >  BootStrap table使用方法分析

BootStrap table使用方法分析

高洛峰
高洛峰原創
2017-03-20 14:02:232621瀏覽

本文實例為大家分享了BootStrap table的使用方法，供大家參考，具體內容如下

bootstrap table git address：https://github.com/wenzhixin/bootstrap-table 

rr。 

<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../bower_components/bootstrap-table-develop/dist/bootstrap-table.min.css"/>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/bootstrap-table.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>

or

<table data-toggle="table" data-url="data.json">
  <thead>
  ...
  </thead>
</table>

第二種較好理解點：

<table id="table" class="mychar1-table"></table>
$(&#39;#table&#39;).bootstrapTable({
  url: &#39;data.json&#39;
 });

詳細介紹

var $table = $(&#39;#mychart1&#39;);
$table.bootstrapTable({
url: reqprojectname_w+&#39;list/spectrumlist&#39;,
dataType: "json",
toolbar: &#39;#toolbar&#39;,  //工具按钮用哪个容器
striped: true,   //是否显示行间隔色
singleSelect: false,
pagination: true, //分页
pageNumber:1,   //初始化加载第一页，默认第一页
pageSize: 10,   //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //显示搜索框
sidePagination: "server", //服务端处理分页
 columns: [{
  field: &#39;id&#39;,
  title: &#39;序号&#39;
 }, {
  field: &#39;liushuiid&#39;,
  title: &#39;交易编号&#39;
 }, {
  field: &#39;orderid&#39;,
  title: &#39;订单号&#39;
 }, {
  field: &#39;receivetime&#39;,
  title: &#39;交易时间&#39;
 }, {
  field: &#39;price&#39;,
  title: &#39;金额&#39;
 }, {
  field: &#39;coin_credit&#39;,
  title: &#39;投入硬币&#39;
 }, {
  field: &#39;bill_credit&#39;,
  title: &#39;投入纸币&#39;
 }, {
  field: &#39;changes&#39;,
  title: &#39;找零&#39;
 }, {
  field: &#39;tradetype&#39;,
  title: &#39;交易类型&#39;
 },{
  field: &#39;goodmachineid&#39;,
  title: &#39;货机号&#39;
 },{
  field: &#39;inneridname&#39;,
  title: &#39;货道号&#39;
 },{
  field: &#39;goodsName&#39;,
  title: &#39;商品名称&#39;
 }, {
  field: &#39;changestatus&#39;,
  title: &#39;支付&#39;
 },{
  field: &#39;sendstatus&#39;,
  title: &#39;出货&#39;
 },
  {
   title: &#39;操作&#39;,
   field: &#39;id&#39;,
   align: &#39;center&#39;,
   formatter:function(value,row,index){
   var e = &#39;<a href="#" mce_href="#" onclick="edit(\&#39;&#39;+ row.id + &#39;\&#39;)">编辑</a> &#39;;
   var d = &#39;<a href="#" mce_href="#" onclick="del(\&#39;&#39;+ row.id +&#39;\&#39;)">删除</a> &#39;;
   return e+d;
  }
  }
  ]
 });

請求參數

$(function () {
  
 //1.初始化Table
 var oTable = new TableInit();
 oTable.Init();
  
 //2.初始化Button的点击事件
 /* var oButtonInit = new ButtonInit();
 oButtonInit.Init(); */
  
 });
  
  
 var TableInit = function () {
 var oTableInit = new Object();
 //初始化Table
 oTableInit.Init = function () {
  $(&#39;#tradeList&#39;).bootstrapTable({
  url: &#39;/VenderManager/TradeList&#39;,  //请求后台的URL（*）
  method: &#39;post&#39;,   //请求方式（*）
  toolbar: &#39;#toolbar&#39;,  //工具按钮用哪个容器
  striped: true,   //是否显示行间隔色
  cache: false,   //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
  pagination: true,   //是否显示分页（*）
  sortable: false,   //是否启用排序
  sortOrder: "asc",   //排序方式
  queryParams: oTableInit.queryParams,//传递参数（*）
  sidePagination: "server",  //分页方式：client客户端分页，server服务端分页（*）
  pageNumber:1,   //初始化加载第一页，默认第一页
  pageSize: 50,   //每页的记录行数（*）
  pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
  strictSearch: true,
  clickToSelect: true,  //是否启用点击选中行
  height: 460,   //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
  uniqueId: "id",   //每一行的唯一标识，一般为主键列
  cardView: false,   //是否显示详细视图
  detailView: false,   //是否显示父子表
  columns: [{
   field: &#39;id&#39;,
   title: &#39;序号&#39;
  }, {
   field: &#39;liushuiid&#39;,
   title: &#39;交易编号&#39;
  }, {
   field: &#39;orderid&#39;,
   title: &#39;订单号&#39;
  }, {
   field: &#39;receivetime&#39;,
   title: &#39;交易时间&#39;
  }, {
   field: &#39;price&#39;,
   title: &#39;金额&#39;
  }, {
   field: &#39;coin_credit&#39;,
   title: &#39;投入硬币&#39;
  }, {
   field: &#39;bill_credit&#39;,
   title: &#39;投入纸币&#39;
  }, {
   field: &#39;changes&#39;,
   title: &#39;找零&#39;
  }, {
   field: &#39;tradetype&#39;,
   title: &#39;交易类型&#39;
  },{
   field: &#39;goodmachineid&#39;,
   title: &#39;货机号&#39;
  },{
   field: &#39;inneridname&#39;,
   title: &#39;货道号&#39;
  },{
   field: &#39;goodsName&#39;,
   title: &#39;商品名称&#39;
  }, {
   field: &#39;changestatus&#39;,
   title: &#39;支付&#39;
  },{
   field: &#39;sendstatus&#39;,
   title: &#39;出货&#39;
  },]
  });
 };
  
 //得到查询的参数
 oTableInit.queryParams = function (params) {
  var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
  limit: params.limit, //页面大小
  offset: params.offset, //页码
  sdate: $("#stratTime").val(),
  edate: $("#endTime").val(),
  sellerid: $("#sellerid").val(),
  orderid: $("#orderid").val(),
  CardNumber: $("#CardNumber").val(),
  maxrows: params.limit,
  pageindex:params.pageNumber,
  portid: $("#portid").val(),
  CardNumber: $("#CardNumber").val(),
  tradetype:$(&#39;input:radio[name="tradetype"]:checked&#39;).val(),
  success:$(&#39;input:radio[name="success"]:checked&#39;).val(),
  };
  return temp;
 };
 return oTableInit;
 };

後台拼裝測試資料頁尾送送頁欄位：limit， offset ,前者表示每頁的個數，預設為10個，後者表示分頁時資料的偏移量。 

而搜尋時則傳遞給後端的是search字段，表示具體的搜尋內容。 

伺服器端回傳的資料中還要包含page（頁數），total（資料總量）兩個字段，前端要根據這兩個字段分頁。


以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。

更多BootStrap table使用方法分析相關文章請關注PHP中文網！

相關文章：

詳解Bootstrap實現基本佈局的方法

使用Bootstrap過渡效果Transition模態框（Modal）的方法

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Bootstrap Table使用方法詳解下一篇：Bootstrap Table使用方法詳解

相關文章

看更多