Analyse der Verwendung von bootstarp+table

Dieses Mal werde ich Ihnen eine Analyse zur Verwendung von bootstarp+table geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von bootstarp+table?

Wir haben in einer Projektentwicklung die native Front-to-Back-Trennungstechnologie PHP + HTML5 verwendet. Das PHP-Schnittstellendesign ähnelt RESTful. Wenn Sie RESTful nicht kennen, fragen Sie bitte Baidu. Alle zurückgegebenen Daten sind JSON.

Da die Front-End-Seite aus Kompatibilitätsgründen Bootstarp verwendet, probieren wir weiterhin das Bootstarp-Tabellen-Plug-In für das Daten-Paging aus.
Bootstarp verfügt über zwei Konfigurationsmethoden: Schreiben und Anwenden sind dem Easyui-UI-Framework ähnlich, aber ich denke, dass Easyui wirklich einfach zu verwenden ist und der asynchrone Baum von Easyui wirklich leistungsstark ist. Da das Frontend des Unternehmens fehlt, schreiben wir einen Teil davon -time in PHP, wissen Sie.

Im Folgenden wird die Bootstarp-Konfiguration vorgestellt: js-Konfiguration

<script> $(&#39;#std-list&#39;).bootstrapTable({ url: &#39;controller/standard.php?op=query&#39;, method: "post", //使用post发送数据的时候 需要设置contenType不然后台无法接受数据 contentType: "application/x-www-form-urlencoded; charset=UTF-8", toolbar: &#39;#toolbar1&#39;, // 对应你table里面的工具栏 pagination: true, //打开分页 pageSize: 10,//一页放多少个数据 showRefresh: true,//现实刷新按钮 showToggle: true, pageList: [10, 20],//设置可以每页现实的数据量 strictSearch: true, singleSelect: false,//单选多选 search: false,//搜索框（当前端分页时候，搜索框可以自己过滤数据，后端分页无意义） onCheck: function(row, $element) {}, queryParams: function(params) { //向后台发送的参数都可以写这里 var temp = { pageSize: params.limit, //页面大小 pageNumber: params.offset, //页码 op: s, conds: data }; return temp; }, rowStyle: function(row, index) { //改变行样式。也可以使用cellStyle改变单元格样式 console.log(1); }, sidePagination: &#39;server&#39;, columns: [{ checkbox: true }, { field: &#39;StandardNumber&#39;, title: &#39;标准编号&#39; }, { field: &#39;StandardName&#39;, title: &#39;标准名称&#39; }, { field: &#39;StandardLevel&#39;, title: &#39;标准类别&#39; }, { field: &#39;QyStandardNumber&#39;, title: &#39;企标编号&#39; }, { field: &#39;ReferStandardNumber&#39;, title: &#39;引用标准&#39; }, { field: &#39;FileName&#39;, title: &#39;查看全文&#39;, formatter: function(value, row, index) { //格式化你想要的数据 if(value) { var list = []; list.push(value); for(var i = 0; i < list.length; i++) { //console.log(list[i]); if(list[i] != null) { var str = list[i]; var conds = str.indexOf(&#39;.&#39;); var type = str.substr(conds, str.length) if(type == ".pdf") { return &#39;<img src="img/pdf.png" onClick="lookText(\&#39;&#39; + index + &#39;\&#39;)" alt="Analyse der Verwendung von bootstarp+table" >&#39; + &#39;&#39;; } else if(type == ".txt") { return &#39;<img src="img/txt.png" onClick="lookText(\&#39;&#39; + index + &#39;\&#39;)" alt="Analyse der Verwendung von bootstarp+table" >&#39; + &#39;&#39;; } else if(type == ".docx" || type == ".doc") { return &#39;<img src="img/doc.png" onClick="lookText(\&#39;&#39; + index + &#39;\&#39;)" alt="Analyse der Verwendung von bootstarp+table" >&#39; + &#39;&#39;; } else if(type == ".png" || type == ".jpg") { return &#39;<img src="img/img.png" onClick="lookText(\&#39;&#39; + index + &#39;\&#39;)" alt="Analyse der Verwendung von bootstarp+table" >&#39; + &#39;&#39;; } } } } else { return &#39;&#39;; } } }, { field: &#39;IsCancel&#39;, title: &#39;是否作废&#39; } ], rowStyle: function(value, row, index) { if(value) { var list = []; list.push(value); for(var i = 0; i < list.length; i++) { console.log(list[i].IsCancel); if(list[i].IsCancel == &#39;是&#39;) { console.log(1); var style = {}; style = { css: { &#39;color&#39;: &#39;red&#39; } }; return style; } else { var style = {}; style = { css: { &#39;color&#39;: &#39;&#39; } }; return style; } } } } }); </script>

Die obige Paging-Tabelle ist im Hintergrund und das vom Hintergrund zurückgegebene Datenformat Paging sollte lauten: ｛total: 'Ihre Gesamtsumme', Zeilen:'Ihre Daten'｝Vordergrund-Paging muss nur {rows: rows} zurückgeben.🎜>Zum Schluss hänge ich mein JSON-Format an
{

"total": "2",
"rows": [{
    "Id": "6",
    "StandardName": "1994",
    "StandardNumber": "GB-100-1994",
    "StandardLevel": "",
    "QyStandardNumber": "",
    "ReferStandardNumber": "",
    "ReferLevel": "",
    "ClassNumber": "",
    "DraftUnit": "",
    "PublishDate": "",
    "ImplementDate": "",
    "InputDatabaseDate": "",
    "IsCancel": "否",
    "CancelDate": "",
    "StructureID": "",
    "OldStandardNumber": "",
    "OldStandardName": "",
    "StandardMemo": "",
    "UseDepartment": "",
    "FileName": null,
    "FileContent": null
}, {
    "Id": "4",
    "StandardName": "4",
    "StandardNumber": "4",
    "StandardLevel": "",
    "QyStandardNumber": "1",
    "ReferStandardNumber": "",
    "ReferLevel": "",
    "ClassNumber": "",
    "DraftUnit": "",
    "PublishDate": "",
    "ImplementDate": "",
    "InputDatabaseDate": "",
    "IsCancel": "是",
    "CancelDate": "",
    "StructureID": "",
    "OldStandardNumber": "",
    "OldStandardName": "",
    "StandardMemo": "",
    "UseDepartment": "",
    "FileName": "变电设备在线监测I2接口网络通信规-范.pdf",
    "FileContent": "{\"database\":\"m2018.php\",\"key\":\"4\"}"
}]

}

Hier werde ich nicht vorstellen, wie man Tabellen direkt aus HTML generiert. Weitere Informationen finden Sie in der Dokumentation oder bei Baidu.

Bei der Verwendung der Bootstarp-Tabelle müssen wir manchmal Daten auf der Seite aktualisieren oder Daten löschen. Die angegebene Zeile wird gelöscht und aktualisiert 🎜> und der Index muss abgerufen werden. Die folgende Tabelle
zum Beispiel: Die updateRow unten aktualisiert die angegebene Zeile

$('#std-list').bootstrapTable('updateRow', {
                            index: getRowIndex('#std-list', row[current]),
                            row: {
                                StandardName: StandardName,
                                StandardLevel: StandardLevel,
                                QyStandardNumber: QyStandardNumber,
                                ReferStandardNumber: ReferStandardNumber,
                                UseDepartment: UseDepartment,
                                ReferLevel: ReferLevel,
                                ClassNumber: ClassNumber,
                                StructureId: StructureId,
                                DraftUnit: DraftUnit,
                                PublishDate: PublishDate,
                                InputDatabaseDate: InputDatabaseDate,
                                OldStandardNumber: OldStandardNumber,
                                OldStandardName: OldStandardName,
                                StandardMemo: StandardMemo,
                                CancelDate: CancelDate,
                                OldStandardNumber: OldStandardNumber,
                                OldStandardName: OldStandardName,
                                StandardMemo: StandardMemo,
                                IsCancel: cancellation
                            }
                        });

Ich empfehle die Verwendung dieser Methode, um den Index (Index) abzurufen

    function getRowIndex(sel, row) {
        var data = $(sel).bootstrapTable('getData');
        for(var i = 0; i 

Das Front-End-Paging-Artefakt ist eine Verwendung wert!

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der Implementierungsschritte von PromiseA+

Eine praktische Zusammenfassung der Verwendung der EasyCanvas-Zeichenbibliothek in Pixeler Projektentwicklung

Das obige ist der detaillierte Inhalt vonAnalyse der Verwendung von bootstarp+table. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!