初始化表头
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属性 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, fixWidth(0.1) }); }); colData1.push({ //放入行的末位列 field: 'hz_date', title: '汇总日期', 'align': 'center', 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,但是只要数据符合下图即可.
