Teilen Sie eine tolle Plug-in-Bootstrap-Tabelle

Dieser Artikel fasst hauptsächlich die Verwendung von Bootstrap-Tabellen, Server-Paging, Client-Paging-Konvertierung und Tabellenaktualisierung zusammen und stellt sie vor. Interessierte Freunde können darauf verweisen.

Kürzlich bin ich mit a in Kontakt gekommen Tolles Plug-in, Bootstrap-Tabelle. Ich habe noch nie eine Front-End-Anzeige erstellt, und mein Eindruck von der Tabelle ist nur das Tabellen-Tag in HTML. Nach der Verwendung der Bootstrap-Tabelle muss ich sagen, dass sie wirklich großartig ist.

[Verwandte Videoempfehlungen: Bootstrap-Tutorial]

Konstruktionsmethode

1, HTML

<p class="btn-group hidden-xs"id="exampleTableEventsToolbar" >
 //定义一系列工具栏...
 </p>
<table data-toggle="table"
 data-url="${ctxAdmin}/user/userData?orgId=${orgId}" //table数据来源，json格式
 data-pagination="true" //是否支持分页
 data-show-search="true" //是否显示搜索框功能
 data-show-columns="true" //显示columns功能按钮
 data-icon-size="outline" 
 data-mobile-responsive="true"
 data-height="500" 
 id="tablelist"
 data-side-pagination="server" //支持服务器端分页，默认是client>
  <thead>
  <tr>
  <th data-field="user_id">ID</th>
  <th data-field="username" 
    data-formatter="usernameFormatter" //columns option 参见官网解释
    data-events="usernameEvents">用户名</th>
  <th data-field="real_name">真实姓名</th>
  <th data-field="tel_num">座机</th>
  <th data-field="mobile">手机</th>
  <th data-field="user_type">用户类型</th>
  <th data-field="operation" 
    data-formatter="actionFormatter"
    data-events="actionEvents">操作</th>
  </tr>
  </thead>
</table>

2, js-Struktur:

 (function() {
  $('#tablelist').bootstrapTable({
   url: "${ctxAdmin}/user/userData?orgId=${orgId}",
   search: true, //是否显示搜索框功能
   pagination: true, //是否分页
   showRefresh: true, //是否显示刷新功能 
   showToggle: true,
   showColumns: true,
   iconSize: 'outline',
   // toolbar: '#exampleTableEventsToolbar', 可以在table上方显示的一条工具栏，
   icons: {
    refresh: 'glyphicon-repeat',
    toggle: 'glyphicon-list-alt',
    columns: 'glyphicon-list'
   }
  });

kombiniert mit offizieller Website Anzeigetabellenoptionen, Spaltenoptionen, Ereignisse und Methoden können viele Funktionen vervollständigen. Der Datenformatierer und die Datenereignisse oben sind die Optionen in den Spaltenoptionen.

Datenformatierer und Datenereignisse

Um den folgenden Effekt zu erzielen, verwenden Sie Das Obige verwendet einfach zwei Optionen zusammen, eine zum Definieren des Formats und die andere zum Definieren des Klickvorgangs.

JS-Code direkt hochladen

  //value: 所在collumn的当前显示值，
  //row:整个行的数据 ，对象化，可通过.获取
   //表格-操作 - 格式化 
  function actionFormatter(value, row, index) {
    return &#39;<a class="mod" >修改</a> &#39; + &#39;<a class="delete">删除</a>&#39;;
  }
  //表格 - 操作 - 事件
  window.actionEvents = {
    &#39;click .mod&#39;: function(e, value, row, index) {   
       //修改操作
      },
    &#39;click .delete&#39; : function(e, value, row, index) {
       //删除操作 
      }
    }

Server-Paging/Client-Paging-Konvertierung, Tabellenaktualisierung

Bootstrap-Standard Das ist es clientseitige Paginierung, die über das html-Tag

data-side-pagination: „client“

oder übergeben werden kann < in js 🎜>

sidePagination: 'server'

angegeben. Beachten Sie, dass die von diesen beiden Hintergründen übergebenen JSON-Datenformate ebenfalls unterschiedlich sind

Client: Normales JSON-ArrayFormat [{},{},{}]
server: {"total":0,"rows":[]} wobei total die Anzahl aller abgefragten Datenelemente darstellt und sich die folgenden Zeilen auf die auf der aktuellen Seite angezeigte Datenmenge beziehen.

Wenn Sie die Paging-Methode entsprechend der Situation ändern müssen, müssen Sie

'refreshOptions' in Methoden //Festlegen der Optionen beim Aktualisieren
'refresh' //Legen Sie die URL fest, wenn Aktualisierung, Abfrage (Übergabe von Parametern an den Hintergrund)

 $("#tablelist").bootstrapTable('refreshOptions', {
    sidePagination: 'client' //改为客户端分页
        });
 $("#tablelist").bootstrapTable('refresh', {
     url: "${ctxAdmin}/user/getsearchuserinfo", //重设数据来源
     query: {username: $('#sea-username').val(),realname: $("#sea-realname").val(),mobile: $("#sea-mobile").val()}//传到后台的参数
          });

[Verwandte Empfehlungen]

1

Kostenloses js-Online-Video-Tutorial

2.

JavaScript Chinesisch-Referenzhandbuch

3.

php.cn Dugu Jiujian (3) - JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie eine tolle Plug-in-Bootstrap-Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!