Analysis of how to use bootstarp+table

This time I will bring you an analysis of how to use bootstarp table. What are the precautions when using bootstarp table. The following is a practical case, let’s take a look.

We used the native php html5 front-to-back separation technology in a project development. The PHP interface design is like RESTful. If you don’t know RESTful, please ask Baidu. All data returned is JSON.

When it comes to paging, because the front-end page uses bootstarp for compatibility issues, we continue to try the bootstarp table plug-in for data paging
bootstarp has two configuration methods. The writing and application are similar to the old easyui UI framework, but I think easyui is really easy to use, and easyui's asynchronous tree is really powerful. Of course, there are many ready-made tree components. Because the company's front end is lacking, we write pages part-time in PHP, you know.

The following introduces the bootstarp configuration: js configuration

<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="Analysis of how to use bootstarp+table" >&#39; + &#39;&#39;; } else if(type == ".txt") { return &#39;<img src="img/txt.png" onClick="lookText(\&#39;&#39; + index + &#39;\&#39;)" alt="Analysis of how to use 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="Analysis of how to use 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="Analysis of how to use 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>

Attached is the table. The above paging is background paging. The data format returned by background paging should be {total: 'Your total', rows: 'Your data'} Foreground paging only needs to return {rows: rows}
Finally, attach my json format
{

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

}

Here I will not introduce how to directly generate tables from html. For details, you can check the documentation or Baidu
When using bootstarp table, we sometimes involve the operation of updating a piece of data on the page or deleting a piece of data. What is deleted and updated is the specified row.
You need to get the index table below
For example The following updateRow updates the specified row

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

I recommend using this method to get the index (subscript)

    function getRowIndex(sel, row) {
        var data = $(sel).bootstrapTable('getData');
        for(var i = 0; i <p style="text-align: left;"><strong>The front-end paging artifact is worth using! </strong></p><p style="text-align: left;"> I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! </p><p style="text-align: left;">Recommended reading: </p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-398044.html" target="_blank">Detailed explanation of the implementation steps of PromiseA</a></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-398039.html" target="_blank">Practical summary of the use of EasyCanvas drawing library in Pixeler project development</a></p>

The above is the detailed content of Analysis of how to use bootstarp+table. For more information, please follow other related articles on the PHP Chinese website!