bootstrapTable的使用

深碍√TFBOYSˉ_ 2021-09-15 04:08 646阅读 0赞

一.参数配置

var $table;
            //初始化bootstrap-table的内容
            function InitMainTable () {
                //记录页面bootstrap-table全局变量$table，方便应用
                var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
                $table = $('#grid').bootstrapTable({
                    url: queryUrl,                      //请求后台的URL（*）
                    method: 'GET',                      //请求方式（*）
                    //toolbar: '#toolbar',              //工具按钮用哪个容器
                    striped: true,                      //是否显示行间隔色
                    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,                   //是否显示分页（*）
                    sortable: true,                     //是否启用排序
                    sortOrder: "asc",                   //排序方式
                    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                    pageSize: rows,                     //每页的记录行数（*）
                    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                    search: false,                      //是否显示表格搜索
                    strictSearch: true,
                    showColumns: true,                  //是否显示所有的列（选择显示的列）
                    showRefresh: true,                  //是否显示刷新按钮
                    minimumCountColumns: 2,             //最少允许的列数
                    clickToSelect: true,                //是否启用点击选中行
                    //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                    showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                    cardView: false,                    //是否显示详细视图
                    detailView: false,                  //是否显示父子表
                    //得到查询的参数
                    queryParams : function (params) {
                        //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        var temp = {   
                            rows: params.limit,                         //页面大小
                            page: (params.offset / params.limit) + 1,   //页码
                            sort: params.sort,      //排序列名  
                            sortOrder: params.order //排位命令（desc，asc） 
                        };
                        return temp;
                    },
                    columns: [{
                        checkbox: true,  
                        visible: true                  //是否显示复选框  
                    }, {
                        field: 'Name',
                        title: '姓名',
                        sortable: true
                    }, {
                        field: 'Mobile',
                        title: '手机',
                        sortable: true
                    }, {
                        field: 'Email',
                        title: '邮箱',
                        sortable: true,
                        formatter: emailFormatter
                    }, {
                        field: 'Homepage',
                        title: '主页',
                        formatter: linkFormatter
                    }, {
                        field: 'Hobby',
                        title: '兴趣爱好'
                    }, {
                        field: 'Gender',
                        title: '性别',
                        sortable: true
                    }, {
                        field: 'Age',
                        title: '年龄'
                    }, {
                        field: 'BirthDate',
                        title: '出生日期',
                        formatter: dateFormatter
                    }, {
                        field: 'Height',
                        title: '身高'
                    }, {
                        field: 'Note',
                        title: '备注'
                    }, {
                        field:'ID',
                        title: '操作',
                        width: 120,
                        align: 'center',
                        valign: 'middle',
                        formatter: actionFormatter
                    }, ],
                    onLoadSuccess: function () {
                    },
                    onLoadError: function () {
                        showTips("数据加载失败！");
                    },
                    onDblClickRow: function (row, $element) {
                        var id = row.ID;
                        EditViewById(id, 'view');
                    },
                });
            };

(一).主要的参数几个参数：

1.paginationLoop: false,  这个参数是不让分页 在第一页时，点击左键(<) 就跳转到最后一页 ，反之，不然在最后一页的时候，点击右键(>)就跳转到第一页

2.clickToSelect: true, // 单击行即可以选中

（二）调用bootstraptable的一些方法可以动态更新表格（增删改等），用法如下：

//1.新增
    $("#table").bootstrapTable('insertRow', {index:0, row:data.data});
    //2.移除
    $("#table").bootstrapTable('remove', {
        field: 'adId',
        values: [row['adId']]
    });
    //3.刷新
    $("#table").bootstrapTable('refresh');
    //4.修改
    $("#table").bootstrapTable('updateCell', {
        index : index,
        field: 'status',
        value: row['status'] ? 0 : 1
    });

(四)操作

1.获取 table的数据

$('\#jcjkcxTable').bootstrapTable('getData')

注意是：当前分页的，不包括所有的

2.单位格双击

{
                    field: 'brxm00',
                    title: '病人姓名',
                    width: 40,
                    events: modelEvents,
                    formatter: function( value, row, index){
                        return "<a  class='brxmModeljs'>" + value + "</a>"
                    }
                },
    
    单击click  双击是dblclick
     window.modelEvents = {
                'dblclick .brxmModeljs': function (e, value, row, index) {
                    bhModal(row);
                    $('#modalNew').modal('show')
    
                }
            };

二.小demo

1.bootstrap table对每列数据进行统计汇总

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>无标题文档</title>  
    
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
    <style>
    	.fixed-table-container table{
    		width: 600px;
    		margin: auto;
    	}
    </style>
    </head>  
    <body >  
    <table id="table"></table>
    <div id="priceText">总结：<label></label></div>
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
     
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
     
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <script language="javascript">  
    $(function() {
    	$('#table').bootstrapTable({
    	    url: 'table.json',
    	    pagination: true, // 在表格底部显示分页组件
    	    sumMoney:'sumMoney',
    	    showFooter:true,
    	    columns: [{
    	        field: 'id',
    	        title: 'ID'
    	    }, {
    	        field: 'name',
    	        title: '城市'
    	    }, {
    	        field: 'price_jb',
    	        title: '基本'
    	    },  {
    	        field: 'price_jx',
    	        title: '绩效'
    	    },  {
    	        field: 'pricesum',
    	        title: '总共',
    	        footerFormatter: function (value) {
    	           var count = 0;
    	           console.log(value);
    	           for (var i=0; i<value.length;i++) {
    	               count += parseFloat(JSON.parse(JSON.stringify(value[i])).pricesum);
    	           }
    	           $('#priceText').find('label').text(count);
    	       } 
    	    }, ]
    	
    	});
    });
    </script>
    </body>  
    </html>

table.json

[{  
        "id": "1",  
        "name": "上海1",  
        "price_jb":"10",  
        "price_jx":"80",  
        "pricesum":"90"
     }, {  
        "id": "2",  
        "name": "上海2",  
        "price_jb":"10",  
        "price_jx":"80",  
        "pricesum":"90"
     }, {  
        "id": "3",  
        "name": "上海3",  
        "price_jb":"20",  
        "price_jx":"80",  
        "pricesum":"100"
     }
     ]

注意：使用 footerFormatter函数时，前面必须设置showFooter:true

2.新增一行数据

<button id="addJs">新增</button>
    $('#addJs').click(function(){
    	var index =  $('#table').bootstrapTable('getData').length;
    	 $('#table').bootstrapTable('insertRow', {
    		index: index,
    		row: {
    			id: '5',
    			name: '小辫子',
    			price_jb:'20',
    			price_jx:'30',
    			pricesum:'34'
    		}
    	});
    })

三.注意

1.获取后端数据 url异步交互注意2点

A.前端设置

//初始化Table
    TableInit(ylzBizID.FK_SHJCMX_GETDATALISTPF(),intQueryParams);
    
    
    function TableInit(url,queryParams) {
        $('#shjhtjTable').bootstrapTable('destroy');
        $('#shjhtjTable').bootstrapTable({
            url: url,
            method: 'GET',     
            // contentType: "application/x-www-form-urlencoded", //如果后端获取到queryParams的传递的参数时候加上这个
            toolbar: '#toolbar',   
            showFooter:false,//这是显示fixed-table-footer
            sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*）
            queryParamsType: "limit",//查询参数组织方式
            queryParams : queryParams,
            pagination: true, // 在表格底部显示分页组件
            pageSize: 10, // 页面数据条数
            pageNumber: 1, // 首页页码
            pageList: [10, 15, 20, 50],//分页步进值
            dataField: "rows",//bootstrap table 可以前端分页也可以后端分页，这里
            //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的  
            //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
            columns: [
                {
                    field: 'jssj00',
                    title: '发生时间'
                }, {
                    field: 'jczt00',
                    title: '状态类型',
                    formatter: function (value, row, index){ // 单元格格式化函数
                        var text;
                        switch(value){
                            case 1:
                                text = "待受理";
                                break;
                            case 2:
                                text = "申诉中";
                                break;
                        }
                        return text;
                    }
                },{
                    title: "操作",
                    align: 'center',
                    valign: 'middle',
                    width: 100, // 定义列的宽度，单位为像素px
                    events: operateEvents,
                    formatter: function (value, row, index) {
                       return "<a class='btn btn-xs green viewDetails'  style='color: #29a2ff'>查看详情</a>"; 
                    }
                }
            ],
            onLoadSuccess: function(data){  //加载成功时执行
                console.log(data)
                console.info("加载数据成功");
            },
            onLoadError: function(){  //加载失败时执行
                console.info("加载数据失败");
            }
        })
    }
    //初始化的时候发送请求
    function intQueryParams(params){
        var temp = {   
            pageSize: params.limit,//一页几条数据
            pageIndex:(params.offset / params.limit) + 1//当前页
        };
        return temp;
    }

B.后端返回的数据格式必须是 rows和total

![70][]

C.table

![70 1][]

2.解决传到后端的中文会乱码的问题

加上：contentType

$('#shjhtjTable').bootstrapTable({
            url: url,
            method: 'post',
            contentType:"application/x-www-form-urlencoded; charset=UTF-8",
    	})

3.data的数据复制时

var Data = [
                            {
                                "dbzi00": 1,
                                "dbzbm0": "1233",
                                "dbzmc0": "过敏性紫癜1",
                                "zdbm00": "E03.802",
                                "zczmc0": "单侧乳腺癌根治术",
                                "ssbm00": 2323,
                                "cwnr00": "人工膝关节组件、内外固定材料",
                                "sfbz00": "280000元",
                                "bzsm00": "含乳癌改良根治术"
                            },
                            {
                                "dbzi00": 2,
                                "dbzbm0": "1233",
                                "dbzmc0": "过敏性紫癜2",
                                "zdbm00": "E03.802",
                                "zczmc0": "单侧乳腺癌根治术",
                                "ssbm00": 2323,
                                "cwnr00": "人工膝关节组件、内外固定材料",
                                "sfbz00": "280000元",
                                "bzsm00": "含乳癌改良根治术"
                            },
    
                        ];

**注意**：**url和data的区别是：url是异步请求远程数据；data是直接把数据赋值给他**。

$('#twoTableJS').bootstrapTable('destroy');
        $('#twoTableJS').bootstrapTable({
            data:Data,
            contentType:"application/x-www-form-urlencoded; charset=UTF-8",
            toolbar: '#toolbar',   
            showFooter:false,//这是显示fixed-table-footer
            sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
            pagination: true, // 在表格底部显示分页组件
            pageSize: 5, // 页面数据条数
            pageNumber: 1, // 首页页码
            pageList: [5, 15, 20, 50],//分页步进值
            columns: [
                {
                    field: 'dbzi00',
                    title: '序号',
                    width: 50,
                    formatter: function (value, row, index) {
                       return index+1; 
                    }
                }, {
                    field: 'zyh000',
                    title: '住院号',
                    width: 50,
                    events: zyhEvents,
                    formatter: function (value, row, index) {
                       return "<a class='btn btn-xs zyh' style='color: blue;'>"+value+"</a>"; 
                    }
                }
    		],
    		onLoadSuccess: function(data){  //加载成功时执行
                console.info("加载数据成功");
            },
            onLoadError: function(){  //加载失败时执行
                console.info("加载数据失败");
            }
    	})

table当前行 上移 下移

4.解决BootstrapTable设置height属性后，表格不对齐的问题

打开bootstrap-table.js 找到 BootstrapTable.prototype.resetView方法，找到如下代码：

if (this.options.showHeader && this.options.height) {
                this.$tableHeader.show();
                //注释掉下面两行 取消表头初始化解决表头和内容不对齐问题
                //this.resetHeader();
                //padding += this.$header.outerHeight();
    }

5.记住选中的分页（设置table的默认选中页码）

1、通过pageNumber属性设置

$('#agentTable').bootstrapTable({    
        data:{......},    
        pageNumber: 
        parseInt($.cookie("curAgentTablePageNumber") ? $.cookie("curAgentTablePageNumber") : 1),    
        onPageChange: function (pageNumber) {        
            $.cookie("curAgentTablePageNumber", pageNumber);    
        },    
        columns: []
    })

pageNumber属性设置的时候必须要转换成数值类型，否则分页标签的页码不会被选中。

![format_png][]

四.参考

1.  [前端表格插件 BootstrapTable 入门教程][BootstrapTable]

2.[bootstrap table使用总结][bootstrap table]

3.[bootstrap table footerFormatter合并单元格][bootstrap table footerFormatter]

[70]: /images/20210813/cbd98a96c78d46e5bc2c36affee2e804.png
[70 1]: /images/20210813/a34a37b037544bf2b7a88532d633b117.png
[format_png]: /images/20210813/5929de073afe471aa9a56c0259b9bc0c.png
[BootstrapTable]: https://blog.csdn.net/gao_xu_520/article/details/80838318
[bootstrap table]: https://blog.csdn.net/u014520745/article/details/54290130
[bootstrap table footerFormatter]: https://blog.csdn.net/tpc1990519/article/details/79037174