动态加载DataGrid表头及数据

初始化表头

js生成前端

/*初始化表头*/
function initDataGridTitle(id) {
    $.ajax({
        url: '/${appName}/report/***/***',  //根据id获取后台对应的所有类型
        type: 'POST',
        sync: false,  //同步,为了先生成表头再加载数据
        data: {
            id: id
        },
        success: function(data) {  //data后台的传过来的表字段数组
                            /*data格式为
                            [{
                                "subParameter": 0,   //这个是类型编码
                                "subParameterName": "免费"   //这个是类型名称
                            }, {
                                "subParameter": 52,
                                "subParameterName": "支付宝"
                            }, {
                                "subParameter": 53,
                                "subParameterName": "微信"
                            }, {
                                "subParameter": 56,
                                "subParameterName": "现金"
                            }]*/

            var columns = new Array();  //多行表头字段数组[[{行一第一列},{行一第二列}][行二{},{}]]
            var colData1 = [];  //第一行表头,这里只有一行
            colData1.push({    //第一列为固定的表头
                field: 'parkingName',  //列的field属性
                title: '***名称',   //列的title属性
                'align': 'center',   //列的align属性
                width: fixWidth(0.2)
            });
            var jsonData = $.parseJSON(data); //将json字符串转换为json，尽量不要用eval('('+value+')')会执行字符串中的表达式
            $.each(jsonData,function(index, value) {  //遍历JsonData
                var fieldVal = 'subParameter' + value.subParameter;   //动态生成列的field属性(由类型+类型编码构成)
                var titleVal = value.subParameterName;   //动态生成列的title属性(为类型名称)
                colData1.push({      //动态生成的列放入行中
                    field: fieldVal,
                    title: titleVal,
                    width: fixWidth(0.1)
                });
            });

            colData1.push({   //放入行的末位列
                field: 'hz_date',
                title: '汇总日期',
                'align': 'center',
                width: fixWidth(0.2)
            });
            columns.push(colData1);   //将所有行放入columns中去

            $('#dataGrid').datagrid({  //初始化grid
                fit: true,
                singleSelect: true,
                toolbar: '#toolBar',
                columns: columns,   //初始化动态生成的columns
                async: false,
                dataType: 'json',
                url: ''
            });
        }
    });
}

后台

SELECT DISTINCT
    subParameter,  -- 类型编码
    subParameterName  -- 类型名称
FROM
    `platformtype`   -- 类型表
WHERE
    AND bus_subjoinplatform.parkingID = ?  -- 根据id不同获取不同的参数,前端生成不同的表头

动态加载数据

js动态加载前端数据

/*动态加载数据*/
function searchInfo() {
    //根据id获取对应的所有类型,从而动态加载表头
    initDataGridTitle($("#id").val());
    //获取数据
    $.ajax({
        url: '/${appName}/report/***/getList',
        type: 'POST',
        sync: false,
        data: {
            time: $('#time').datebox('getValue'),
            id: $("# id").val()
        },
        success: function(data) { //data后台的传过来的表字段数组
              /*data返回的数据类型
              {
                            "rows": [{
                                "hz_date": "2018-11-19",
                                "parkingId": "cd292667-3110-40ec-8088-c70c336cb38c",
                                "parkingName": "**",
                                "subParameterName": "支付宝",
                                "zjmoney": "2200",
                                "zjtype": "52"
                            }, {
                                "hz_date": "2018-11-19",
                                "parkingId": "cd292667-3110-40ec-8088-c70c336cb38c",
                                "parkingName": "***",
                                "zjmoney": "2500",
                                "subParameterName": "IC",
                                "zjtype": "51"
                            }, {
                                "hz_date": "2018-11-19",
                                "parkingId": "cd292667-3110-40ec-8088-c70c336cb38c",
                                "parkingName": "***",
                                "subParameterName": "微信",
                                "zjmoney": "1100",
                                "zjtype": "53"
                            }],
                            "currentTime": "2018-11-19"
                        }
              */
            var jsonResult = new Array();  //最终结果
            var jsonData = $.parseJSON(data); //将返回的data转换为json
            var rows = jsonData.rows;

            /*将返回的list转换成以id分类的type组合成数组的一条记录[{id,name,[type1,type2,type3]}]*/
            var map = {},  //map的作用是标志位,判断此id是否已经存在
            //以停车场为单位的map
            dest = [];   //最终输出
            $.each(rows,function(index,row) {  //遍历每一行
                if (!map[row.id]) { //如果map中不存在
                    dest.push({   //直接将数据拼接成一个{id,name,[type1]}
                        id: row.id,  //根据id和name分类
                        parkingName: row.parkingName,
                        hz_date: row.hz_date,
                        data: [row.zjtype + ',' + row.zjmoney],  //多个type,将每条记录的type和money拼接成一个元素放入data数组中
                    });
                    map[row.id] = row.id; //将未加入map的key放入,下次再判断则说明dest中已经有此id的数据
                } else { //如果已经存在
                    for (var j = 0; j < dest.length; j++) {  //遍历所有dest
                        var temp = dest[j];
                        if (temp.id = row.id) {  //找到当前row的id已经存在于dest中的元素
                            temp.data.push(row.zjtype + ',' + row.zjmoney);  //获取dest中的这个元素的data数组,并放入新的type类型{id,name,[type1,type2]}
                            break; //跳出循环，优化代码,已经找到了,没必要继续
                        }
                    }
                }
            });  //循环结束
            /*到此dest生成的数据为,data为zjtype和zjmoney的组合
                [{
                                parkingId: "1111",
                                parkingName: "***",
                                hz_date: "2018-11-19",
                                data: ["52,2200", "51,2500", "53,1100"]
                            },{
                                parkingId: "33333",
                                parkingName: "***",
                                hz_date: "2018-12-19",
                                data: ["43,2200", "44,2500", "45,1100"]
                            }]
            */

            //将[{id,name,[type1,type2,type3]},{id2,name2,[type11,type22,type33]}]转换为list
            $.each(dest,function(index, val) {  //遍历每个id的记录
                var typefields = '';  //
                for (var i = 0; i < val.data.length; i++) {  //遍历type和money组成的data数组
                    var temp = val.data[i];   //type和money的元素
                    var typeAndMoney = temp.split(',');  //分割为type和money两个元素
                    typefields += ",\"subParameter" + typeAndMoney[0] + "\":\"" + parseInt(typeAndMoney[1]) / 100 + "\"";  //将type的code和固定字符串拼接成field,将money作为field的值
                }
                var row = "{\"hz_date\":\"" + val.hz_date + "\",\" id\":\"" + val.id + "\",\"parkingName\":\"" + val.parkingName + "\"" + typefields + "}";  //其他的数据和type集合拼接成一行记录数据{field1:val1,feild2:val2}
                var fieldJson = $.parseJSON(row);  //将这拼接的一行json字符串转换为json记录
                jsonResult.push(fieldJson);  //将json记录放入数组中去
            });
            /*jsonResult的数据格式为
                [{
                                hz_date: "2018-11-19",
                                parkingId: "cd292667",
                                parkingName: "**",
                                subParameter12: "22",
                                subParameter13: "25",
                            },{
                                hz_date: "2018-11-19",
                                parkingId: "c70c336cb38c",
                                parkingName: "***",
                                subParameter23: "22",
                                subParameter24: "25",
                            }]
            */
            //console.info(jsonResult);  //打印json
            $('#dataGrid').datagrid('loadData', {  //将生成的json数据加载到datagrid中去
                "total": jsonResult.length,
                "rows": jsonResult
            });
        },
        onLoadSuccess: function(data) {
            $(this).datagrid("fixRowHeight");
        }
    });
}

后台

SELECT
    tcc.parkingId,-- id
    tcc.zjtype,-- 类型
    tcc.zjmoney as zjmoney,-- 金额
    tcc.hz_date -- 日期

FROM
    hz_tcczj_date tcc -- 记录表,记录id,typecode和money
    where tcc.parkingId IN ( 'cd292667-3110' ) 

简写版，事实需要关联其他表，根据需求group by,但是只要数据符合下图即可.