bootstrapTable的使用

一.参数配置

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>  
<!-- 引入bootstrap样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<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>
 
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
 
<!-- Latest compiled and minified Locales -->
<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

 

C.table

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当前行 上移 下移 

var operateEvents = {
	    'click .up': function (e, value, row, index) {
      		//点击上移
      		var $tr = $(this).parents("tr"); 
	        if ($tr.index() == 0||$tr.index() == 1){
	        	alert("首行数据不可上移");
	        }else{
	            $tr.fadeOut().fadeIn(); 
	            $tr.prev().before($tr); 
	        } 
	        //下移
	        /*var $tr = $(this).parents("tr"); 
	        if ($tr.index() != len - 1) { 
	            $tr.fadeOut().fadeIn(); 
	            $tr.next().after($tr); 
	        } */
	    }
    };

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属性设置的时候必须要转换成数值类型，否则分页标签的页码不会被选中。

四.参考

 

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

2.bootstrap table使用总结

3.bootstrap table footerFormatter合并单元格