bootstrap table記錄使用過程中遇到的問題

1、使用bootstrap table，需要引進相關js
bootstrap-table.min.js、bootstrap-table.min.css
如果要導出excel需要引進bootstrap-table-export.js、tableExport.js
鏈接: https://pan.baidu.com/s/1cZZy6SPKrQ0UsJoSCGbIhQ 提取碼: mrwe

<script  type="text/javascript" src="${path}/skins/frame/plugin/bootstrap-3.3.5/js/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="${path}/skins/frame/plugin/bootstrap-3.3.5/css/bootstrap-table.min.css" type="text/css" media="all" />
<script src="${path}/skins/frame/plugin/bootstrap-3.3.5/js/bootstrap-table-export.js"></script>
<script src="${path}/skins/frame/plugin/bootstrap-3.3.5/js/tableExport.js"></script>

2、繪製表格

var columns = [
        [
            {
                "title": "xxxxxxxxx記錄表",
                "halign":"center",
                "align":"center",
                "colspan":9,
                valign:"middle",
                rowspan: 1,
            }
        ],
        [
            {
                "title": "日時",
                "halign":"center",
                "align":"center",
                "colspan": 1,
                valign:"middle",
                rowspan: 2,
                width:200,
                field: 'H'
            },
            {
                "title":  "2010-01-10",
                "halign":"center",
                "align":"center",
                width:300,
                "colspan":2
            },
            {
                "title": "2010-01-11",
                "halign":"center",
                "align":"center",
                "colspan": 2,
                valign:"middle",
                width:300,
                rowspan: 1,
            },
            {
                "title": "2010-01-12",
                "halign":"center",
                "align":"center",
                "colspan": 2,
                valign:"middle",
                width:300,
                rowspan: 1,
            },
            {
                "title": "2010-01-13",
                "halign":"center",
                "align":"center",
                "colspan": 2,
                valign:"middle",
                rowspan: 1,
                width:300,
            },
        ],
        [
            {
                title: "水位(m)",
                "halign":"center",
                valign:"middle",
                align:"center",
                rowspan: 1,
                width:150,
                field: 'Z'
            },
            {
                title: "流量(m³/s)",
                valign:"middle",
                align:"center",
                rowspan: 1,
                width:150,
                field: 'Q'
            },
            {
                title: "水位(m)",
                valign:"middle",
                align:"center",
                rowspan: 1,
                width:150,
                field: 'Z2'
            },
            {
                title: "流量(m³/s)",
                valign:"middle",
                align:"center",
                rowspan: 1,
                width:150,
                field: 'Q2'
            },
            {
                title: "水位(m)",
                valign:"middle",
                align:"center",
                rowspan: 1,
                width:150,
                field: 'Z3'
            },
            {
                title: "流量(m³/s)",
                valign:"middle",
                align:"center",
                rowspan: 1,
                width:150,
                field: 'Q3'
            },
            {
                title: "水位(m)",
                valign:"middle",
                align:"center",
                rowspan: 1,
                width:150,
                field: 'Z4'
            },
            {
                title: "流量(m³/s)",
                valign:"middle",
                align:"center",
                rowspan: 1,
                width:150,
                field: 'Q4'
            }
        ],
    ]

效果圖如下：

手動繪製表頭3行，第一行大標題，第二行是日時和4個日期，第三行是每個日期下包括水位和流量，如上圖所示

colspan：合併行，rowspan：合併列，field：對應屬性列名稱（後臺返回數據的名稱）
3、填充數據繪製表格數據

<div class="col-xs-12" id="countdiv">
   <table id="table" style="display:block; max-height:600px;min-width:1300px;overflow-y: scroll;"></table>
</div>

//style="display:block; max-height:600px;min-width:1300px;overflow-y: scroll;" 這個樣式使表格滾動顯示
 
 var data={{z:1,Q:1},{z2:2,Q2:2},{z3:3,Q3:3},{z4:4,Q4:4}}; //data數據加載json格式的數據
  $('#table').bootstrapTable({
              columns:columns,
              data:data.message

   })

4、修改表格某行的數據

columns[1][1]["title"]="2020-01-10時間"; //修改第二行第二列中title的值

5、導出excel

type：導出類型；fileName：導出文件名稱

  <a id="btn" href="javascript:;" class="gbn gbn-export" hotkey="a"  onclick="$('#table').tableExport({ type: 'excel', fileName: '統計'+new Date().format('yyyyMMddHHmmss'),escape: 'true' })"><i></i>導出表格(E)</a>

6、導出excel帶表格線，當數據爲null時顯示空而不是“-”
當查詢的數據爲null時，填充表格的數據和導出的excel文件都是“-”表示，只要修改bootstrap-table.min.js文件全局搜索undefinedText，把該值修改爲空即可；
默認繪製的表格導出爲excel文件，是沒有表格線的，需要修改tableExport.js文件，table標籤加上border="1"即可
(上傳的js文件已修改這兩點)
7、刷新數據
第一次數據填充表格後，再次點擊查詢時數據沒有刷新重新填充表格，要使用刷新方法，
使用$(’#table’).bootStrapTable(‘refresh’)；進行刷新沒有反應，使用下面粗暴的方法即可解決數據刷新問題

 $("#countdiv").html('');
      var html='<table id="table" style="display:block; max-height:600px;min-width:1300px;overflow-y: scroll;"></table>';
      $("#countdiv").append(html);

bootstrap table的屬性、事件、參數、方法等大全
https://blog.csdn.net/qq_38836082/article/details/81450164