ECharts柱狀圖+BootstrapTable聯動

初來乍到，請多指教！賬號兩年多了，第一次寫博客~記錄一下日常踩的坑

ECharts其實在上家公司就接觸過一點，什么散點圖，折線圖，柱狀圖等等~

可是上家公司有web前端呀，我只負責填充數據，我是一個廢后端了沒錯了。

Bootstrap的話，一直都在用，但是BootstrapTable沒用過。。。

最近做了一個效果就是點擊柱狀圖表格變化，如圖~

 接下來就是踩坑的環節了o(╥﹏╥)o

1.點擊柱子（疊加點擊事件）

  我做的柱狀圖上頭有一些篩選條件，忘記截圖了。

  每當篩選一次，就重新加載一次柱狀圖數據，緊接着點擊柱子，請求后台的次數是隨着綁定柱狀圖的次數疊加的。

  我當時一直以為是我綁定柱狀圖點擊事件綁定錯了。。。我天真了！

  關鍵的代碼來了！！！

   //基於准備好的dom，初始化echarts實例
    var myChart = echarts.init(myChar);
   //關閉點擊，以免疊加點擊（Important!!!）
    myChart.off('click');
    //隱藏加載動畫
    myChart.showLoading(); 

2.表格服務器分頁

   后台必須要返回

{
    "total":"總數",
    "rows":"集合"
}

  為什么一定要返回肉絲，我就想返回Data，不行嗎！！！

  不行。。。。好吧，我遵守規則

3.表格展開子表

   就是點擊上圖那個+，展開子表格數據。

   我弄了一個下午，我百度了好久好久，然后！我沒弄出來。

   別人的方式是長出了BootstrapTable，我試了試，但是它出不來！！！好氣

   我只能拼接一個表格出來了，我真的是一顆小白菜。。。菜菜菜

   上代碼。

//首次加載表格
var getTable = function () {
    $("#datatable_Log").bootstrapTable('destroy');//首次加載
    $("#datatable_Log").bootstrapTable({
        url: '/TestTable/GetTable',//請求后台的URL（*）  
        method: 'get',//請求方式
        striped: true,//是否顯示行間隔色
        cache: false,//是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
        pagination: true,//是否分頁
        sortable: true,//是否啟用排序
        sortOrder: "asc",//排序方式
        pageNumber: 1,//初始化加載第一頁，默認第一頁
        pageSize: 15,//每頁的記錄行數（*）
        pageList: [15, 30, 60, 120],  //可供選擇的每頁的行數（*）
        queryParamsType: '', //默認值為 'limit' ,在默認情況下 傳給服務端的參數為：offset,limit,sort
        queryParams: queryParams, //前端調用服務時，會默認傳遞上邊提到的參數，如果需要添加自定義參數，可以自定義一個函數返回請求參數
        sidePagination: "server",   //分頁方式：client客戶端分頁，server服務端分頁（*）
        strictSearch: true,
        minimumCountColumns: 2,    //最少允許的列數
        clickToSelect: true,    //是否啟用點擊選中行
        searchOnEnterKey: true,
        sortable: true,//是否啟用排序
        sortOrder: "asc",//排序方式
        columns: column,
        detailView: true,//是否啟用子表格
        //注冊加載子表的事件,注意下這里的三個參數。（Important!）
        onExpandRow: function (index, row, $detail) { $detail.html(detailFormat(row.Id)); }

    });
}

//子表數據
var detailFormat = function (tabId) {
    var html = "<table class='table'>";
    $.ajax({
        type: "get",
        url: "/TestTable/GetTableLog",//子表請求的地址
        data: { tabId: tabId },
        async: false,
        success: function (res) {
            if (res["Total"] > 0) {
                html += "<tr  align='center'><td>狀態</td><td>備注</td><td>時間</td></tr>";
                for (var i = 0; i < res["Total"]; i++) {
                    html += "<tr  align='center'><td>" + res["Data"][i].LogType + "</td><td>" + res["Data"][i].Log_Remark + "</td><td>" + res["Data"][i].CREATE_TIME + "</td><tr>";
                }
            } else {
                html += "<tr  align='center'><td colspan='8' >暫無數據</td></tr>";
            }
            html += '</table>';
        }
    });
    return html;
}

4.表格同時加子表和復選框

   點擊+號展開子表的時候，復選框莫名其妙的勾選了，我也是一臉懵逼，什么情況。

   后來才知道是我引用的BootstrapTable的min.js包版本太低了，怪我。