Analyse de l'utilisation de bootstarp+table

Cette fois, je vais vous apporter une analyse de la façon d'utiliser bootstarp+table. Quelles sont les précautions lors de l'utilisation de bootstarp+table. Voici un cas pratique, jetons un coup d'oeil.

Nous avons utilisé la technologie native de séparation front-to-back php + html5 dans le développement d'un projet. La conception de l'interface PHP est comme reposante. Si vous ne connaissez pas le repos, veuillez demander à Baidu. Toutes les données renvoyées sont en json.

En ce qui concerne la pagination, étant donné que la page frontale utilise bootstarp pour des problèmes de compatibilité, nous continuons à essayer le plug-in de table bootstarp pour la pagination des données
bootstarp a deux méthodes de configuration : l'écriture et l'application. sont similaires à l'ancien framework d'interface utilisateur easyui, mais je pense qu'easyui est vraiment facile à utiliser et l'arborescence asynchrone d'easyui est vraiment puissante. Bien sûr, il existe de nombreux composants d'arborescence prêts à l'emploi. Parce que le front-end de l'entreprise fait défaut, nous écrivons des pages. à temps partiel en PHP, vous savez.

Ce qui suit présente la configuration bootstarp : configuration js

<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="/static/imghw/default1.png" data-src="img/pdf.png" class="lazy" onClick="lookText(\&#39;&#39; + index + &#39;\&#39;)" alt="Analyse de l'utilisation de bootstarp+table" >&#39; + &#39;&#39;; } else if(type == ".txt") { return &#39;<img src="/static/imghw/default1.png" data-src="img/txt.png" class="lazy" onClick="lookText(\&#39;&#39; + index + &#39;\&#39;)" alt="Analyse de l'utilisation de bootstarp+table" >&#39; + &#39;&#39;; } else if(type == ".docx" || type == ".doc") { return &#39;<img src="/static/imghw/default1.png" data-src="img/doc.png" class="lazy" onClick="lookText(\&#39;&#39; + index + &#39;\&#39;)" alt="Analyse de l'utilisation de bootstarp+table" >&#39; + &#39;&#39;; } else if(type == ".png" || type == ".jpg") { return &#39;<img src="/static/imghw/default1.png" data-src="img/img.png" class="lazy" onClick="lookText(\&#39;&#39; + index + &#39;\&#39;)" alt="Analyse de l'utilisation de 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>

Une table est jointe. La pagination ci-dessus est une pagination en arrière-plan et le format de données renvoyé. par pagination en arrière-plan doit être ｛ total : 'votre total', lignes : 'vos données' ｝La pagination au premier plan ne doit renvoyer que ｛lignes:lignes｝
Enfin, joignez mon format json
{

"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\"}"
}]

>

Ici, je ne présenterai pas comment générer directement des tableaux à partir de HTML. Pour plus de détails, vous pouvez consulter la documentation ou Baidu
Lors de l'utilisation de la table bootstarp, nous impliquons parfois l'opération de mise à jour d'une donnée sur la page ou de suppression d'une donnée. Ce qui est supprimé et mis à jour est la ligne spécifiée <.> et l'index doit être obtenu. Le tableau suivant
par exemple Le updateRow ci-dessous met à jour la ligne spécifiée

$('#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
                            }
                        });

Je recommande d'utiliser cette méthode pour obtenir l'index (indice) et l'index doit être obtenu. 🎜>

    function getRowIndex(sel, row) {
        var data = $(sel).bootstrapTable('getData');
        for(var i = 0; i <p style="text-align: left;">L'artefact de pagination frontale vaut la peine d'être essayé ! <strong></strong></p>Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! <p style="text-align: left;"></p>Lecture recommandée : <p style="text-align: left;"></p><p style="text-align: left;">Explication détaillée des étapes de mise en œuvre de PromiseA+<a href="http://www.php.cn/js-tutorial-398044.html" target="_blank"></a></p><p style="text-align: left;">Un résumé pratique de l'utilisation de la bibliothèque de dessins EasyCanvas dans Pixeler développement de projet<a href="http://www.php.cn/js-tutorial-398039.html" target="_blank"></a></p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!