Analyse zur Verwendung der BootStrap-Tabelle-js-Tutorial-php.cn

Analyse zur Verwendung der BootStrap-Tabelle

高洛峰

Freigeben： 2017-03-20 14:02:23

Original

2661 Leute haben es durchsucht

Das Beispiel in diesem Artikel zeigt, wie Sie die BootStrap-Tabelle als Referenz verwenden. Der spezifische Inhalt lautet wie folgt:

Git-Adresse der Bootstrap-Tabelle: https://github.com/wenzhixin/bootstrap-table

Dateien vorstellen

<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>

Nach dem Login kopieren

Verwendungsmethode

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

Nach dem Login kopieren

oder

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

Nach dem Login kopieren

Der zweite Weg zum besseren Verständnis:

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

Nach dem Login kopieren

Detaillierte Einführung

$(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;
 };

Nach dem Login kopieren

Parameter anfordern

oTableInit.queryParams = function (params) {
  var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
  limit: params.limit, //第几条记录
  offset: params.offset, //显示一页多少记录
  sdate: $("#stratTime").val(),
  
  };
  return temp;
 };

Nach dem Login kopieren

Hintergrund-Assembly-Testdaten

JSONArray jsonData=new JSONArray();
 JSONObject jo=null;
 for (int i=0,len=10;i<len;i++){
  jo=new JSONObject();
  jo.put("id", i+(j++));
  jo.put("liushuiid", i+1);
  jo.put("price", 100);
  jo.put("mobilephone",10);
  jo.put("receivetime", 10);
  jo.put("tradetype", 10);
  jo.put("changestatus", "成功");
  jo.put("sendstatus", "失败");
  jo.put("bill_credit", 10);
  jo.put("goodroadid", 10);
  jo.put("SmsContent", 10);
  jo.put("orderid", 10);
  jo.put("goodsName", 10);
  jo.put("inneridname", 10);
  jo.put("xmlstr", 10);
  jsonData.add(jo);
 }
 int TotalCount=97;
 JSONObject jsonObject=new JSONObject();
 jsonObject.put("rows", jsonData);//JSONArray
 jsonObject.put("total",TotalCount);//总记录数

Nach dem Login kopieren

Paging-Empfang

int pageindex=0;
int offset = ToolBox.filterInt(json1.getString("offset"));
int limit = ToolBox.filterInt(json1.getString("limit"));
if(offset !=0){
 pageindex = offset/limit;
}
 pageindex+= 1;//第几页<br>...

Nach dem Login kopieren

BootStrap während Die Paging-Tabelle übergibt zwei Paging-Felder an das Backend: „Limit“ und „Offset“. Ersteres stellt die Nummer jeder Seite dar, die standardmäßig 10 beträgt. Letzteres stellt den Offset der Daten während des Pagings dar.

Bei der Suche wird das Suchfeld an das Backend übergeben und gibt den spezifischen Suchinhalt an.

Die vom Server zurückgegebenen Daten umfassen auch zwei Felder: Seite (Anzahl der Seiten) und Gesamt (Gesamtdatenmenge). Das Frontend sollte entsprechend diesen beiden Feldern paginieren.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.

Weitere Artikel zur Analyse der Verwendung der BootStrap-Tabelle finden Sie auf der chinesischen PHP-Website!

Verwandte Artikel:

Ausführliche Erklärung zur Implementierung des Grundlayouts mit Bootstrap

So verwenden Sie den Bootstrap-Übergangseffekt. Übergangsmodalbox ( Modal)

JS-Komponente Bootstrap Table Tabellenzeilen-Drag-Effekt-Implementierungscode