動態加載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,但是只要數據符合下圖即可.