Heim > Artikel > Web-Frontend > Verwenden Sie Bootstrap-Table, um in 3 Minuten zufriedenstellende Tabellenfunktionen zu erreichen

Verwenden Sie Bootstrap-Table, um in 3 Minuten zufriedenstellende Tabellenfunktionen zu erreichen

青灯夜游nach vorne: 2021-04-30 11:00:102703Durchsuche

In diesem Artikel erfahren Sie mehr über die Verwendung des Tabellen-Plug-Ins Bootstrap-Table basierend auf Bootstrap und jQuery. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

1. Einführung

Wie Sie am Projektnamen erkennen können, handelt es sich hierbei um ein Bootstrap-Tabellen-Plug-in. Die Form der Tabellenanzeige ist fast immer an allen Front-End-Arbeiten beteiligt. Bootstrap Table bietet eine Reihe von Funktionen wie schnelle Tabellenerstellung, Abfrage, Paginierung, Sortierung usw. [Verwandte Empfehlung: „Bootstrap-Tutorial“]

Projektadresse: https://github.com/wenzhixin/bootstrap-table

Vielleicht sind Bootstrap- und jQuery-Technologie etwas veraltet, aber wenn es an der Geschichte liegt Technologieauswahl Oder wenn Sie diese beiden Bibliotheken noch in alten Projekten verwenden, wird Sie dieses Projekt auf jeden Fall zum Lächeln bringen und die Anforderungen an die Tabellenanzeige werden problemlos erfüllt!

2. Modus

Boostatrp-Tabelle ist in zwei Modi unterteilt: Client-Modus und Server-Modus.

Client: Zeigen Sie die Daten an, die der Server gleichzeitig über die Datenschnittstelle laden muss, konvertieren Sie sie dann in JSON und generieren Sie eine Tabelle. Wir können die Anzahl der angezeigten Zeilen, Paging usw. selbst definieren und es werden zu diesem Zeitpunkt keine Anfragen an den Server gesendet.
Server: Senden Sie Daten basierend auf der festgelegten Anzahl von Datensätzen pro Seite und der aktuell angezeigten Seite zur Abfrage an den Server.

3. Praktische Bedienung

Tipps: Die Erklärungen werden alle als Kommentare im Code angezeigt, bitte lesen Sie sie sorgfältig durch.

Wir verwenden die einfachste CDN-Einführungsmethode und der Code kann direkt ausgeführt werden. Kopieren Sie den Code und konfigurieren Sie den Pfad zur JSON-Datei, um den Effekt zu sehen.

3.1 Schnell loslegen

Das Sternchen im Kommentar zeigt an, dass der Parameter geschrieben werden muss, also lassen Sie uns ohne weitere Umschweife über den Code sprechen. Beispielcode:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello, Bootstrap Table!</title>
    // 引入 css
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
</head>
<body>
    // 需要填充的表格
    <table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>
// 引入js
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script>
        window.operateEvents = {
            // 当点击 时触发
            &#39;click .delete&#39;: function (e,value,row,index) {
                // 在 console 打印出整行数据
                console.log(row);
            }
        };

        $(&#39;#tb_departments&#39;).bootstrapTable({
            url: &#39;/frontend/bootstrap-table/user.json&#39;,         //请求后台的 URL（*）
            method: &#39;get&#39;,                      //请求方式（*）
            // data: data,                      //当不使用上面的后台请求时，使用data来接收数据
            toolbar: &#39;#toolbar&#39;,                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为 true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                    //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "client",           //分页方式：client 客户端分页，server 服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 6,                        //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以个人感觉意义不大
            strictSearch: true,                 //启用严格搜索。禁用比较检查。
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置 height 属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            showExport: true,                   //是否显示导出
            exportDataType: "basic",            //basic&#39;, &#39;all&#39;, &#39;selected&#39;.
            columns: [{
                checkbox: true     //复选框标题，就是我们看到可以通过复选框选择整行。
            }, {
                field: &#39;id&#39;, title: &#39;ID&#39;       //我们取json中id的值，并将表头title设置为ID
            }, {
                field: &#39;username&#39;, title: &#39;用户名&#39;         //我们取 json 中 username 的值，并将表头 title 设置为用户名
            },{
                field: &#39;sex&#39;, title: &#39;性别&#39;                //我们取 json 中 sex 的值，并将表头 title 设置为性别
            },{
                field: &#39;city&#39;, title: &#39;城市&#39;               //我们取 json 中 city 的值，并将表头 title 设置为城市
            },{
                field: &#39;sign&#39;, title: &#39;签名&#39;               //我们取 json 中 sign 的值，并将表头 title 设置为签名
            },{
                field: &#39;classify&#39;, title: &#39;分类&#39;           //我们取 json 中 classify 的值，并将表头 title 设置为分类
            },{
                //ormatter:function(value,row,index) 对后台传入数据 进行操作 对数据重新赋值 返回 return 到前台
                // events 触发事件
                field: &#39;Button&#39;,title:"操作",align: &#39;center&#39;,events:operateEvents,formatter:function(value,row,index){
                    var del = &#39;<button type="button" class="btn btn-danger delete">删除</button>&#39;
                    return del;
                }
            }
            ],
            responseHandler: function (res) {
                return res.data      //在加载远程数据之前，处理响应数据格式.
                // 我们取的值在data字段中，所以需要先进行处理，这样才能获取我们想要的结果
            }
        });
</script>
</body>
</html>

Verwenden Sie Bootstrap-Table, um in 3 Minuten zufriedenstellende Tabellenfunktionen zu erreichen

Der obige Code zeigt, wie grundlegende Funktionen über grundlegende APIs implementiert werden. Der Beispielcode listet nicht alle APIs auf. Es gibt viele interessante Funktionen in dieser Bibliothek, die darauf warten, von jedem entdeckt zu werden. Wie das Sprichwort sagt, liegt es an einem selbst, den Meister zum Üben zu führen um es Freunden einfacher zu machen, das Plug-in übersichtlich zu nutzen.

3.2.1 Initialisierungsteil TypWir verwenden es, wenn wir den Dateninhalt ändern müssen. Beispiel: Kodierungskonvertierung

3.2.3 Ereignisauslöser

选择需要初始化表格。
$(&#39;#tb_departments&#39;).bootstrapTable({})
这个就像table的入口一样。
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>

Da wir oft Tabellen verarbeiten müssen, sind Ereignisauslöser eine gute Wahl. Zum Beispiel: Es kann unsere Zeilendaten aufzeichnen und Trigger verwenden, um benutzerdefinierte Funktionen usw. auszuführen.

4. Erweiterungen

Wir stellen mehrere Erweiterungen vor, die es uns ermöglichen, problemlos mehr Tabellenfunktionen zu implementieren, ohne unsere eigenen Räder erfinden zu müssen, um unsere Arbeit effizienter zu gestalten (Sie können auch auf die offizielle Website gehen, um die spezifische Verwendung der Erweiterungen anzuzeigen, was der Beamte gesammelt hat Viele Erweiterungen). Die alten Regeln gehen direkt auf den Code über:

4.1 Tabellenexport

columns:[{field: &#39;Key&#39;, title: &#39;文件路径&#39;,formatter: function(value,row,index){} }]

4.2 Automatische Aktualisierung

events:operateEvents
 window.operateEvents = {
        &#39;click .download&#39;: function (e,value,row,index) {
            console.log(row);
        }
   }

4.3 Zeilen kopieren

<script src="js/bootstrap-table-export.js"></script> 
showExport: true,                                           //是否显示导出
exportDataType: basic,								        //导出数据类型，支持：&#39;基本&#39;，&#39;全部&#39;，&#39;选中&#39;
exportTypes:[&#39;json&#39;, &#39;xml&#39;, &#39;csv&#39;, &#39;txt&#39;, &#39;sql&#39;, &#39;excel&#39;]   //导出类型

5. Zusammenfassung
Dieser Artikel erklärt nur kurz die Verwendung von Bootstrap-Table und wird derzeit implementiert Die Tabellenfunktion. Freunde, die besorgt sind, können dieses von HelloGitHub empfohlene Plug-In verwenden. Sie werden feststellen, dass das Erstellen von Formularen im Web so schnell gehen kann, und ich freue mich darauf, dass Ihre Freunde weitere interessante Funktionen entdecken.

Hinweis: Der obige js-Teil verwendet keine funktionale Form. Es wird empfohlen, die funktionale Form zu verwenden, nachdem Sie sich damit vertraut gemacht haben. Dies erleichtert auch die Wiederverwendung und sorgt dafür, dass der Code standardisierter aussieht.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonVerwenden Sie Bootstrap-Table, um in 3 Minuten zufriedenstellende Tabellenfunktionen zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

json jquery bootstrap 接口 JS 事件 table github https

Stellungnahme：

Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Eine kurze Diskussion darüber, wie die Korrespondenz zwischen Bootstrap- und jQuery-Versionen überprüft wirdNächster Artikel：Eine kurze Diskussion darüber, wie die Korrespondenz zwischen Bootstrap- und jQuery-Versionen überprüft wird

In Verbindung stehende Artikel

Mehr sehen

Verwenden Sie Bootstrap-Table, um in 3 Minuten zufriedenstellende Tabellenfunktionen zu erreichen

1. Einführung

2. Modus

3. Praktische Bedienung

3.1 Schnell loslegen

3.2.1 Initialisierungsteil TypWir verwenden es, wenn wir den Dateninhalt ändern müssen. Beispiel: Kodierungskonvertierung

4. Erweiterungen

4.1 Tabellenexport columns:[{field: &#39;Key&#39;, title: &#39;文件路径&#39;,formatter: function(value,row,index){} }]

In Verbindung stehende Artikel

4.1 Tabellenexport
columns:[{field: 'Key', title: '文件路径',formatter: function(value,row,index){} }]