search

Home >Web Front-end >JS Tutorial >Analysis of how to use bootstarp+table

Analysis of how to use bootstarp+table

php中世界最好的语言
php中世界最好的语言Original
2018-05-24 13:45:032035browse

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>
Analysis of how to use bootstarp+table


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!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JSON and Math use case analysis in JSNext article：JSON and Math use case analysis in JS
Related articles
See more