Zusammenfassung der Erfahrungen mit Bootstrap Table

Ich habe zuvor die in unserem Management-Hintergrund verwendeten Tabellensteuerelemente untersucht und Folgendes gefunden: Bootstrap-Tabelle unter http://bootstrap-table.wenzhixin.net.cn Es fühlt sich ziemlich gut an, aber die offizielle Dokumentation ist nicht sehr vollständig , was dazu führt, dass meine eigene Netzwerkdatenanforderung nie weitergeleitet wurde.

Das Debugging wurde heute endlich bestanden und ich möchte es hier mit Ihnen teilen.

1. Einführung zugehöriger Konfigurationsdateien

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
<!-- bootstrap table -->
<link href="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table-locale-all.js"></script>
<script src="//cdn.bootcss.com/bootstrap-table/1.11.0/extensions/export/bootstrap-table-export.min.js"></script>
<!-- bootstrap table 包含excel导出，pdf导出 -->
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="//cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

Achtung!!!! Sie wissen es nicht. Daher kann Excel nicht exportiert werden

2 Kopfzeilen und Symbolleisten schreiben

Tatsächlich ist das Schreiben der gesamten Kopfzeile sehr einfach und erfordert nur eine einige einfache Konfigurationen.

Beachten Sie, dass die Attribute jeder Bean in geschrieben sind
Achten Sie auf die Bindungssymbolleiste

Sie können sich auf die folgende Konfiguration beziehen

<!-- 工具栏的按钮，可以自定义事件 -->
<div id="toolbar" class="btn-group">
 <button type="button" class="btn btn-default">
 <i class="glyphicon glyphicon-plus"></i>
 </button>
 <button type="button" class="btn btn-default">
 <i class="glyphicon glyphicon-heart"></i>
 </button>
 <button type="button" class="btn btn-default">
 <i class="glyphicon glyphicon-trash"></i>
 </button>
</div>
 
 
<table id="demo" class="table table-striped table-hover table-bordered"
 data-toolbar="#toolbar" // 这里必须绑定工具栏，不然布局会错乱
 data-search="true"
 data-show-refresh="true"
 data-show-columns="true"
 data-show-export="true"
 data-export-types="[&#39;excel&#39;]"
 data-export-options=&#39;{ // 导出的文件名
 "fileName": "products", 
 "worksheetName": "products"
 }&#39;
 >
 <thead>
 <tr>
  <th width="3%" data-field="prodId">产品Id</th>
  <th width="10%" data-field="nameOfProduct">产品名称</th>
  <th width="4%" data-field="categoryId">产品类别</th>
  <th width="5%" data-field="domicileOfCapital">资本类型</th>
  <th width="8%" data-field="underwriter">发行机构</th>
  <th width="6%" data-field="managementInstitution">基金公司</th>
  <th width="5%" data-field="managementInstitution2">管理机构</th>
  <th width="3%" data-field="flag">角标</th>
  <th width="7%" data-field="beginTime">上线时间</th>
  <th width="7%" data-field="endTime">下线时间</th>
  <th width="4%" data-field="status">发布状态</th>
  <th width="4%" data-field="fundRaisingStatus">募集状态</th>
  <th width="3%" data-field="totalScore">打分</th>
  <th width="3%" data-field="modesOfGuaranteeScore">担保</th>
  <th width="3%" data-field="invsetmentTargetScore">投资</th>
  <th width="3%" data-field="underwriterScore">发行</th>
  <th width="3%" data-field="sourceOfPaymentScore">还款</th>
  <th width="3%" data-field="issuerDescriptionScore">融资</th>
  <th width="10%">操作</th>
 
 </tr>
 </thead>
</table>

3. Bindung der Back-End-Logik

Da die Bootstrap-Tabelle standardmäßig über ein Formular übermittelt wird, stimmen ihre Paging-Parameter und Abfrageparameter nicht mit unserem Back-End-Logikprotokoll überein. (Offizielle Dokumentation für diesen Teil fehlt)

Daher müssen wir eine benutzerdefinierte Konfiguration für das Protokoll vornehmen.

$(function() {
 $("#demo").bootstrapTable({
 url: "http://ydjr.dev.chengyiwm.com/goldman-mgr/listProduct",
 sortName: "prodId", //排序列 
 striped: true, //條紋行 
 sidePagination: "server", //服务器分页 
 clickToSelect: true, //选择行即选择checkbox 
 singleSelect: true, //仅允许单选 
 searchOnEnterKey: true, //ENTER键搜索 
 pagination: true, //启用分页 
 escape: true, //过滤危险字符 
 queryParams: getParams, //携带参数 
 method: "post", //请求格式 
 responseHandler: responseHandler,
 });
 
});
 
 
/**
 * 默认加载时携带参数
 * 
 * 将自带的param参数转化到cy的请求逻辑协议
 */
function getParams(params) {
 var query = $("#searchKey").val();
 console.log(JSON.stringify(params));
 return {
 head: {
  userId: "11154",
  skey: "6FC19FCE5D8DCF130954D8AE2CADB30A",
  platform: "pc",
  imei: "",
  appVersion: "",
  cityId: "",
  platformVersion: "",
  deviceId: "",
  channel: "",
  protoVersion: 1,
  isPreview: 2
 },
 body: {
  'query': params.search, // 搜索参数
  'start': params.offset, // 分页开始位置
  'pageSize': params.limit, //每页多少条
 
 }
 }
}
 
 
/**
 * 获取返回的数据的时候做相应处理，让bootstrap table认识我们的返回格式
 * @param {Object} res
 */
function responseHandler(res) {
 return {
 "rows": res.body.listProduct, // 具体每一个bean的列表
 "total": res.body.totalCount // 总共有多少条返回数据
 }
}

OK Nachdem die Konfiguration abgeschlossen ist, möchte ich Ihnen unseren Anzeigeeffekt zeigen:

Das Obige ist der gesamte Inhalt dieses Artikels, I Ich hoffe, es wird für Ihr Studium nützlich sein. Vielen Dank für Ihre Hilfe und ich hoffe, dass alle die chinesische PHP-Website unterstützen werden.

Weitere Artikel zur Zusammenfassung der Erfahrungen mit der Verwendung von Bootstrap Table finden Sie auf der chinesischen PHP-Website!