因为"某某氏"那边需要看h5领券活动的后台数据,而且发布在两个渠道(ofo客户端、微信)。
需要展示活动券的领取数(能分别模糊查询openID、券码、渠道、时间)以及访问量趋势(各渠道数据、日期)。
所以就打算一个弄表格,一个弄折线图。
表格选来选去还是用BootstrapTable,因为功能挺强大的,但有点复杂。
Github:bootstrap-table
文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
各种折腾之后
效果如下:http://demo.laji.blog/data_backend/data_get.html
每一列都可以进行模糊搜索,可以导出各种格式的数据,因为设置的是服务端进行分页,所以每次都是通过url加上各个参数去后台获取json数据。
TIM截图20170328180654.png
数据格式如下:
http://demo.laji.blog/data_backend/data.php?search=&sort=id&order=asc&offset=0&limit=10&_=1490695578970

插一句,我改了extensions/select2-filter/下的bootstrap-table-select2-filter.js文件,因为发现过滤器扩展只有输入框和下拉框,于是加上了个日历控件,但又发现日期控件的值改变时,没有去后台获取数据,就加了个change事件。
TIM截图20170328183132.png
代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据查询</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-table.min.css">
    <!--<link rel="stylesheet" href="css/bootstrap-editable.css">-->
    <link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css">
    <link rel="stylesheet" href="css/sui.min.css">
    <link rel="stylesheet" href="css/sui-append.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/extensions/export/bootstrap-table-export.min.js"></script>
    <script src="js/tableExport.js"></script>
    <link rel="stylesheet" href="css/select2.min.css">
    <script src="js/extensions/select2-filter/bootstrap-table-select2-filter_gai.js"></script>
    <script src="js/select2.min.js"></script>
    <script src="js/holder.js"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <script src="js/json2.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="toolbar">
    <select class="form-control">
        <option value="10">导出前10条</option>
        <option value="100">导出前100条</option>
        <option value="500">导出前500条</option>
        <option value="1000">导出前1000条</option>
        <option value="5000">导出前5000条</option>
        <option value="10000">导出前1w条</option>
        <option value="20000">导出前2w条</option>
        <option value="50000">导出前5w条</option>
        <option value="100000">导出前10w条</option>
        <option value="1000000">导出前100w条</option>
    </select>
    <span>*点击最右侧按钮选择格式并导出数据</span>
</div>
<table id="table_get"></table>
    <script>
        $(function () {
            //1.初始化Table
            var oTable = new TableInit();
            oTable.Init();

            //2.初始化Button的点击事件
            var oButtonInit = new ButtonInit();
            oButtonInit.Init();
        });
        var config = {
            url: 'data.php',         //请求后台的URL(*)
            dataType: 'json',           //服务器返回的数据类型
            method: 'get',                      //请求方式(*)
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,                   //是否显示分页(*)
            sortable: true,                     //是否启用排序
//                    queryParams: oTableInit.queryParams(
//                        {
//                            'sort':0,
//                            'limit':10
//                        }),//重写传递查询参数(*) url + '?sort=XXXX&order=asc&offset=0&limit=10'
            /*
             请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,
             例如 toolbar 中的参数 如果 queryParamsType = 'limit' ,返回参数必须包含
             limit, offset, search, sort, order 否则, 需要包含:
             pageSize, pageNumber, searchText, sortName, sortOrder.
             返回false将会终止请求
             */
            //===
            pageSize: 10,                       //每页的记录行数(*)
            pageNumber:1,                       //初始化加载第一页,默认第一页
            sortOrder: "asc",                   //排序方式
            sortName:"id",
//                    searchText:"",
            //===
            sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            pageList: [10, 25, 50, 100, 500, 'All'],        //可供选择的每页的行数(*) 当返回的总条数大于'All'前面的500,才会显示All
//                    search: true,                       //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: false,                //是否启用点击选中行
            //height: 550,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识,一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            sortStable: true,
            silentSort: false,
            showFooter: false,
            detailFormatter:'detailFormatter',
            showExport: true,
//                    resizable: true,
            showPaginationSwitch: true,
            togglePagination: false,
            striped: true,
            exportDataType: 'basic',              //'basic', 'all', 'selected'  //$('#toolbar .form-control').val()
            columns: [{
                field: 'id',
                title: 'ID',
                align: 'center',
                sortable: true,
                filter: {
                    type: "input"
                }
            },{
                field: 'openid',
                title: 'openID',
                align: 'center',
                sortable: true,
                filter: {
                    type: "input"
                }
            }, {
                field: 'code',
                title: '券码',
                align: 'center',
                sortable: true,
                filter: {
                    type: "input"
                }
            }, {
                field: 'source',
                title: '渠道',
                align: 'center',
                sortable: true,
                filter: {
                    type: "select",
                    data: ['wechat','ofo']
                }
            }, {
                field: 'time',
                title: '时间',
                align: 'center',
                sortable: true,
                filter: {
                    type: "date"
                }
            }, ],
            filter: true,
        };
        var TableInit = function () {
            var oTableInit = new Object();
            //初始化Table
            oTableInit.Init = function () {
                $('#table_get').bootstrapTable(config);
            };

            return oTableInit;
        };

        var ButtonInit = function () {
            var oInit = new Object();
//            var postdata = {};
            oInit.Init = function () {
                //初始化页面上面的按钮事件
            };
            return oInit;
        };

        $('#toolbar').find('select').change(function () {
            //config.exportDataType = $(this).val();
            //console.log(config.exportDataType);
            config.pageSize = $(this).val();
            $('#table_get').bootstrapTable('destroy').bootstrapTable(config);
        });

    </script>
</body>
</html>

然后就是访问量了,直接用百度的Echarts即可,上面也有很多案例。
效果:http://demo.laji.blog/data_backend/data_view.html
数据格式

{
  "success":1,
  "data":{
    "wechat":[
        444,
        999,
        666,
        555,
        444
    ],
    "ofo":[
        333,
        111,
        555,
        222,
        1212
    ],
    "total":[
        777,
        1110,
        1221,
        777,
        1656
    ],
    "x_date":[
        "2017-3-11",
        "2017-3-12",
        "2017-3-13",
        "2017-3-14",
        "2017-3-15"
    ]
  }
}