Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung der Verwendung der Bootstrap-Tabelle

Zusammenfassung der Verwendung der Bootstrap-Tabelle

angryTom
angryTomOriginal
2019-08-20 16:29:204834Durchsuche

Zusammenfassung der Verwendung der Bootstrap-Tabelle

Bootstrap-Table basiert auf Bootstrap-Table und ist ein Tabellen-Plug-In, das speziell zum Anzeigen von Daten verwendet wird. Bootstrap stammt von Twitter und ist derzeit das beliebteste Frontend-Framework. Bootstrap basiert auf HTML, CSS und JAVASCRIPT und bietet die Vorteile von Einfachheit, Flexibilität und schneller Front-End-Entwicklung. Ich werde Bootstrap und Bootstrapping hier nicht beschreiben. Dieser Artikel konzentriert sich darauf, einige meiner Kenntnisse über die Verwendung von Bootstrap-Table in meinem Projekt zu erläutern und zu erläutern, wie ich sie erlerne.

Empfohlenes Tutorial: Bootstrap-Einführungs-Tutorial

Lassen Sie mich zunächst erklären: Jquery, Bootstrap, Bootstrap- Tabelle. Beziehung zwischen. Viele Teile des Bootstrap-Codes beinhalten JQuery, was bedeutet, dass Bootstrap auf JQuery basiert und die Bootstrap-Tabelle, die wir verwenden möchten, auf Bootstrap basiert. Bevor Sie Bootstrap-Table verwenden, müssen Sie sich also auf JQuery und Bootstrap JS und CSS beziehen Dateien.

Als nächstes die Eigenschaften von Bootstrap-Table: Im Vergleich zu JQuery-UI, JQGRID und anderen Tabellenanzeige-Plug-Ins ist Bootstrap-Table mehr als ausreichend für eine leichte Datenanzeige. und die Unterstützung für Eltern-Kind-Tabellen usw. ist ebenfalls sehr gut. Das Wichtigste ist, dass es nahtlos mit anderen Bootstrap-Tags kombiniert werden kann.

1. Einführung in js, css

<!--css样式-->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">
<!--js-->
<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

2. Tabellendatenfüllung

Es gibt zwei Möglichkeiten, Daten abzurufen bootStrap-Tabelle: Eine besteht darin, die Datenquelle über das Daten-URL-Attribut der Tabelle anzugeben, und die andere besteht darin, die Daten durch Angabe der URL beim Initialisieren der Tabelle über JavaScript abzurufen

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

Die zweite Methode ist mehr effizienter bei der Verarbeitung komplexer Daten als die erste. Flexibel, verwenden Sie im Allgemeinen die zweite Methode, um Tabellendaten zu füllen.

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

Das Feld Feld muss dem vom Server zurückgegebenen Feld entsprechen, um die Daten anzuzeigen.

3. Daten im Hintergrund abrufen

a. Servlet ruft Daten ab

BufferedReader bufr = new BufferedReader(
 new InputStreamReader(request.getInputStream(),"UTF-8"));
 StringBuilder sBuilder = new StringBuilder("");
 String temp = "";
 while((temp = bufr.readLine()) != null){
 sBuilder.append(temp);
 }
 bufr.close();
 String json = sBuilder.toString();
 JSONObject json1 = JSONObject.fromObject(json);
 String sdate= json1.getString("sdate");//通过此方法获取前端数据

b Die entsprechende Methode im springMvc Controller ruft Daten ab

public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId,PortId,CardNumber,Success,maxrows,tradetype)
{
 ...
}

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Studium aller hilfreich sein.

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung der Bootstrap-Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn