ECharts柱状图+BootstrapTable联动

初来乍到,请多指教!账号两年多了,第一次写博客~记录一下日常踩的坑

ECharts其实在上家公司就接触过一点,什么散点图,折线图,柱状图等等~

可是上家公司有web前端呀,我只负责填充数据,我是一个废后端了没错了。

Bootstrap的话,一直都在用,但是BootstrapTable没用过。。。

引用:

   
    <link href="~/Scripts/datatable/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Scripts/datatable/bootstrap-table.min.css" rel="stylesheet" />
    
    <script src="~/Scripts/jquery-2.1.0.min.js">script>
    <script src="~/Scripts/echarts/echarts.min.js">script>
    <script src="~/Scripts/echarts/scope_setting.js">script>
    <script src="~/Scripts/datatable/bootstrap-table.min.js">script>
    <script src="~/Scripts/datatable/bootstrap-table-zh-CN.min.js">script>

 

最近做了一个效果就是点击柱状图表格变化,如图~

 

ECharts柱状图+BootstrapTable联动_第1张图片

 

 ECharts柱状图+BootstrapTable联动_第2张图片

 

 

 接下来就是踩坑的环节了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 = "";
    $.ajax({
        type: "get",
        url: "/TestTable/GetTableLog",//子表请求的地址        data: { tabId: tabId },
        async: false,
        success: function (res) {
            if (res["Total"] > 0) {
                html += "";
                for (var i = 0; i < res["Total"]; i++) {
                    html += "";
                }
            } else {
                html += "";
            }
            html += '
状态备注时间
" + res["Data"][i].LogType + "" + res["Data"][i].Log_Remark + "" + res["Data"][i].CREATE_TIME + "
暂无数据
'; } }); return html; }
 
   

4.表格同时加子表和复选框

   点击+号展开子表的时候,复选框莫名其妙的勾选了,我也是一脸懵逼,什么情况。

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

转载于:https://www.cnblogs.com/MuZiLily/p/11498865.html

你可能感兴趣的:(javascript,前端,后端)