columns:[{field: 'Key', title: '文件路径',formatter: function(value,row,index){} }]
Web-Frontend
Bootstrap-Tutorial
Verwenden Sie Bootstrap-Table, um in 3 Minuten zufriedenstellende Tabellenfunktionen zu erreichen
Verwenden Sie Bootstrap-Table, um in 3 Minuten zufriedenstellende Tabellenfunktionen zu erreichen
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 = {
// 当点击 时触发
'click .delete': function (e,value,row,index) {
// 在 console 打印出整行数据
console.log(row);
}
};
$('#tb_departments').bootstrapTable({
url: '/frontend/bootstrap-table/user.json', //请求后台的 URL（*）
method: 'get', //请求方式（*）
// data: data, //当不使用上面的后台请求时，使用data来接收数据
toolbar: '#toolbar', //工具按钮用哪个容器
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', 'all', 'selected'.
columns: [{
checkbox: true //复选框标题，就是我们看到可以通过复选框选择整行。
}, {
field: 'id', title: 'ID' //我们取json中id的值，并将表头title设置为ID
}, {
field: 'username', title: '用户名' //我们取 json 中 username 的值，并将表头 title 设置为用户名
},{
field: 'sex', title: '性别' //我们取 json 中 sex 的值，并将表头 title 设置为性别
},{
field: 'city', title: '城市' //我们取 json 中 city 的值，并将表头 title 设置为城市
},{
field: 'sign', title: '签名' //我们取 json 中 sign 的值，并将表头 title 设置为签名
},{
field: 'classify', title: '分类' //我们取 json 中 classify 的值，并将表头 title 设置为分类
},{
//ormatter:function(value,row,index) 对后台传入数据 进行操作 对数据重新赋值 返回 return 到前台
// events 触发事件
field: 'Button',title:"操作",align: 'center',events:operateEvents,formatter:function(value,row,index){
var del = '<button type="button" class="btn btn-danger delete">删除</button>'
return del;
}
}
],
responseHandler: function (res) {
return res.data //在加载远程数据之前，处理响应数据格式.
// 我们取的值在data字段中，所以需要先进行处理，这样才能获取我们想要的结果
}
});
</script>
</body>
</html>
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选择需要初始化表格。
$('#tb_departments').bootstrapTable({})
这个就像table的入口一样。
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>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: 'Key', title: '文件路径',formatter: function(value,row,index){} }]Nach dem Login kopieren
4.2 Automatische Aktualisierung columns:[{field: 'Key', title: '文件路径',formatter: function(value,row,index){} }]- 4.3 Zeilen kopieren
- 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:
events:operateEvents
window.operateEvents = {
'click .download': function (e,value,row,index) {
console.log(row);
}
}<script src="js/bootstrap-table-export.js"></script> showExport: true, //是否显示导出 exportDataType: basic, //导出数据类型，支持：'基本'，'全部'，'选中' exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel'] //导出类型
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
So erhalten Sie die Bootstrap -Suchleiste
Apr 07, 2025 pm 03:33 PM
So verwenden Sie Bootstrap, um den Wert der Suchleiste zu erhalten: Bestimmt die ID oder den Namen der Suchleiste. Verwenden Sie JavaScript, um DOM -Elemente zu erhalten. Holen Sie sich den Wert des Elements. Führen Sie die erforderlichen Maßnahmen aus.
Wie man vertikale Zentrierung von Bootstrap macht
Apr 07, 2025 pm 03:21 PM
Verwenden Sie Bootstrap, um die vertikale Zentrierung zu implementieren: FlexBox-Methode: Verwenden Sie den D-Flex, den Justify-Content-Center und die Ausrichtungsklassen aus Align-Item-Center, um Elemente in den Flexbox-Behälter zu platzieren. Methode für Ausstellungs-Iitem-Center-Klassen: Bei Browsern, die Flexbox nicht unterstützen, verwenden Sie die Klasse aus Align-items-Center-Klasse, vorausgesetzt, das übergeordnete Element hat eine definierte Höhe.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
