初始化表头
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,但是只要数据符合下图即可.
来源：https://www.cnblogs.com/aeolian/p/10313332.html