In diesem Artikel wird erläutert, wie Sie das Bootstrap-Tabellen-Plug-in zum Implementieren dynamischer Tabellen verwenden.
Empfohlenes Tutorial: Bootstrap-Tutorial
Wenn wir BootStrapTable (im Folgenden als: BsTable bezeichnet) erstellen, wo Spalten Parameter werden als Inhalte von Tabellenspalten gespeichert. Unsere Anforderung besteht darin, den Inhalt von Spaltenparametern basierend auf den zurückgegebenen Daten dynamisch zu generieren. Dadurch werden dynamische Tabellen generiert.
Spaltenparameterformat: ähnlich dem folgenden
columns: { { field: 'Id', title: '编号', },{ field: 'name', title: '名称', },{ field: 'sex', title: '性别', //自定义方法 formatter: function (value) { if (value == 1) { return '男'; } else if (value == 2) { retuen '女'; } } }, }
Anforderung: Senden Sie eine Ajax-Anfrage, indem Sie auf die Schaltfläche klicken, und erstellen Sie eine dynamische Tabelle basierend auf den von der Anfrage zurückgegebenen Daten.
Schaltflächenstruktur: Klickereignis festlegen
<button type="button" class="btn btn-primary" onclick="DataQuery.sqlExecute()"> <i class="fa fa-check"></i> SQL语句执行 </button>
Klickereignis schreiben: dataQuery.js (Hinweis: Dies wird Stück für Stück analysiert, Die vollständige Version wird am Ende gepostet werden Code)
1. Holen Sie sich den HTML-Seitenelementwert
Da zur Implementierung zwei Parameter erforderlich sind Funktion: SQL-Anweisung (sql) + Verbindungsinformationen (connectInfo), daher müssen Sie zunächst die Werte der beiden Elemente von der Seite abrufen: Der Klassenselektor wählt das Element aus, um den entsprechenden Wert zu erhalten.
var sql = $('#sql').val(); var connectInfo = $('#connectInfo').val();
2. Wählen Sie das Tabellenelement auf der Seite aus, senden Sie eine Ajax-Anfrage und erstellen Sie die BSTable
Das Tabellenelement auf der Seite : Beetl-Tags verwenden. Ersetzen Sie den wiederverwendeten HTML-Code durch eine Reihe von Code-Tags, die bequem zu verwenden und einfach zu warten sind.
<#table id="DataQueryTable"/>
2.1 Ajax-Anfrageparameterkonfiguration
参数 | 含义 |
---|---|
type | 请求类型 |
url | 请求链接地址 |
contentType | 发送给服务器的格式 |
dataType | 收到数据的格式 |
data | 发送给服务端的数据 |
success | 请求成功时调用 |
error | 请求失败时调用 |
Detaillierter Code:
$('#DataQueryTable').bootstrapTable({ ajax: function (request) { $.ajax({ type: "GET", url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo, contentType: "application/json;charset=utf-8", dataType: "json", json: 'callback', success: 见下文 error: 见下文 }) })
2.2 Ajax-Anfrage ist erfolgreich, erstellt basierend auf dem zurückgegebene JSON-Daten Dynamischer Header
2.2.1 Benutzerdefiniertes dynamisches Header-Array initialisieren
//定义动态表头字段数组 var dynamicHeader = []; //向数组中填入属性 dynamicHeader.push({ field: "state", check: true });
2.2.2 Dynamische Header-Generierung
//针对返回的json数据,遍历json数据的key集合 for (var i = 0; i<(Object.keys(json[0])).length; i++) { //获取对应索引的value值,将获取的值设置到动态表头字段中。 var property = (Object.keys(json[0]))[i]; dynamicHeader.push({ "title": property, "field": property, //显示是否显示隐藏 switchable: true, //是否开启排序 sortable: true }); }
Wir können diesen Code gemeinsam durchsuchen. Drücken Sie F12 So zeigen Sie den spezifischen Inhalt in Object.keys(json[0]) an: Simulieren Sie eine Anfrage/einen Test.
2.2.3 Erstellen der Tabelle Die Tabelle muss vor dem Erstellen der Tabelle zerstört werden, sonst bleibt der zuletzt geladene Inhalt erhalten
$('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({ //得到的json数据,会根据columns参数进行对应赋值配置 data: json, //Bstable工具导航条 toolbar: '#toolbar', //浏览器缓存,默认为true,设置为false避免页面刷新调用浏览器缓存 cache: false, //是否显示行间隔色 striped: true, //分页方式:client客户端分页,server服务端分页 sidePagination: "client", //排序方式 sortOrder: "desc", //每页记录行数 pageSize: 25, //初始化加载第一页 pageNumber: 1, //可供选择的每页行数 pageList: "[25, 50, 100, All]", //是否显示切换按钮 showToggle: true, //是否显示所有的列 showColumns: true, //是否显示导出按钮(下篇文章将会提到) showExport: true, //导出数据类型(下篇文章将会提到) exportDataType: "basic", //是否显示分页 pagination: true, //是否启用全匹配搜索,否则为模糊搜索 strictSearch: true, //开启搜索 search: true, //自定义所生成的动态表头放入,结合上述json数据,实现表格数据内容的构建 columns: dynamicHeader }); },
2.3 Ajax-Anfrage fehlgeschlagen, Popup-Fenster mit Fehlermeldung, Seite neu geladen
error: function () { alert("SQL查询错误,请输入正确的SQL语句!"); location.reload(); }
Vollständiger JS-Code
/** * BsTable动态表格生成 */ DataQuery.sqlExecute = function (){ var sql = $('#sql').val(); var connectInfo = $('#connectInfo').val(); $('#DataQueryTable').bootstrapTable({ ajax: function (request) { $.ajax({ type: "GET", url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo, contentType: "application/json;charset=utf-8", dataType: "json", json: 'callback', success: function (json) { var dynamicHeader = []; dynamicHeader.push({ field: "state", check: true }); for (var i = 0; i<(Object.keys(json[0])).length; i++) { var property = (Object.keys(json[0]))[i]; //console.log(property); dynamicHeader.push({ "title": property, "field": property, switchable: true, sortable: true }); } //console.log(Object.keys(json[0])); $('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({ data: json, toolbar: '#toolbar', cache: false, striped: true, sidePagination: "client", sortOrder: "desc", pageSize: 25, pageNumber: 1, pageList: "[25, 50, 100, All]", showToggle: true, showColumns: true, showExport: true, exportDataType: "basic", pagination: true, strictSearch: true, search: true, columns: dynamicHeader }); }, error: function () { alert("SQL查询错误,请输入正确的SQL语句!"); location.reload(); } }); } }); };
3. Testen Sie die Ergebnisse der dynamischen Tabellengenerierung
3.1 Der Test ist in zwei Teile unterteilt: Rufen Sie zunächst die durch die Anfrage erhaltenen JSON-Daten ab Simulieren Sie die Anfrage, um 100 Daten zu erhalten
@RequestMapping(value = "/test") @ResponseBody public Object test(){ return iDataQueryService.windQuery("SELECT TOP 100 [OBJECT_ID]\n" + " ,[S_INFO_WINDCODE]\n" + " ,[S_CON_WINDCODE]\n" + " ,[S_CON_INDATE]\n" + " ,[S_CON_OUTDATE]\n" + " ,[CUR_SIGN]\n" + " ,[OPDATE]\n" + " ,[OPMODE]\n" + " FROM [WIND].[db_datareader].[AINDEXMEMBERS]"); }
3.2 Sehen Sie sich die von der Anfrage zurückgegebenen JSON-Daten an
3.3 Dynamische Tabellengenerierung testen
Die obige Anfrage kann normal Daten zurückgeben, aber was ist mit der dynamischen BSTable, die wir über eine Ajax-Anfrage erstellt haben?
Die Anforderung lautet: SQL-Anweisungs-/Linkinformationen, und die Ajax-Anforderung gibt JSON-Daten zurück, was mit der obigen Anforderung übereinstimmt.
Schauen Sie sich unseren dynamischen Tischgenerierungsstatus an:
Bingo, So Bisher wurde die dynamische Tabellenfunktion BootStrapTable implementiert.
Das obige ist der detaillierte Inhalt vonDetailliertes Tutorial zur dynamischen Tabelle von BootStrapTable [mit Code]. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!