因需求,表格的表头是要根据后台数据自动生成的,并且在初始化表格的同时填入数据。现在只给出前台js代码,因为后台数据格式是自己根据需求定的,我就不粘贴出来了,但是数据大多是需要转json的。
$(function(){ var columns = []; $.ajax({ url: '<e:url value='initTable.e'/>', type: 'POST', dataType: 'json', success: function (data) { var len1 = (data[0].length + data[1].length + 2) * 3; var len2 = (data[2].length + data[3].length + 2) * 3; var colData1 = [];//表头第一行 var colData2 = [];//表头第二行 var colData3 = [];//表头第三行 //表头第一行 //固定列:第一列 colData1[0] = {'field': 'AREANAME', 'title': '地域', 'rowspan': 3,'align': 'center', 'width': 60}; colData1[1] = {'field': 'itemid', 'title': 'RSRP', 'colspan': len1, 'align': 'center', 'width': 60*len1}; colData1[2] = { 'field': 'itemid', 'title': 'CQI', 'colspan': len2, 'align': 'center', 'width': 60*len2 }; columns.push(colData1); colData2[0] = {'field': 'itemid','title':'高速公路覆盖率','colspan': 3, 'align': 'center', 'width': 180}; //动态加载RSRP高速列表 var i = 1; if(data[1].length!=0){ var j = 0; for(var n=0;n<data[1].length;n++){ colData2[i] = {'field': 'itemid', 'title':data[1][j].ROADNAME,'colspan': 3, 'width': 180}; i++; j++ } } colData2[i] = {'field': 'itemid','title':'国道覆盖率','colspan': 3, 'align': 'center', 'width': 180}; i++; if(data[0].length!=0){ var w = 0; for(var n = 0;n<data[0].length;n++){ colData2[i] = {'field': 'itemid', 'title':data[0][0].ROADNAME,'colspan': 3, 'width': 180}; w++; i++; } } //动态加载CQI列表 colData2[i] = {'field': 'itemid','title':'高速公路覆盖率','colspan': 3, 'align': 'center', 'width': 180}; i++; if(data[3].length!=0){ var j = 0; for(var n =0;n<data[3].length;n++){ colData2[i] = {'field': 'itemid', 'title':data[3][j].ROADNAME,'colspan': 3, 'width': 180}; j++; i++; } } colData2[i] = {'field': 'itemid','title':'国道覆盖率','colspan': 3, 'align': 'center', 'width': 180}; i++; if(data[2].length!=0){ var j = 0; for(var n=0;n<data[2].length;n++){ colData2[i] = {'field': 'itemid', 'title':data[2][j].ROADNAME,'colspan': 3, 'width': 180}; j++; i++; } } var index = 1; var colum = 0; colData3[0] = {'field': 'tal1','title':'总里程', 'align': 'center', 'width': 60}; colData3[1] = {'field': 'tal2','title':'覆盖里程', 'align': 'center', 'width': 60}; colData3[2] = {'field': 'tal3','title':'覆盖率', 'align': 'center', 'width': 60}; for(var n=0;n<data[1].length;n++){ colData3[colData3.length] = {'field': data[1][n].b, 'title':'总里程', 'width': 60}; colData3[colData3.length] = {'field': data[1][n].bb, 'title':'覆盖里程', 'width': 60}; colData3[colData3.length] = {'field': data[1][n].bbb, 'title':'覆盖率', 'width': 60}; index++; } colData3[colData3.length] = {'field': 'tal4','title':'总里程', 'align': 'center', 'width': 60}; colData3[colData3.length] = {'field': 'tal5','title':'覆盖里程', 'align': 'center', 'width': 60}; colData3[colData3.length] = {'field': 'tal6','title':'覆盖率', 'align': 'center', 'width': 60}; for(var n=0;n<data[0].length;n++){ colData3[colData3.length] = {'field': data[0][n].a, 'title':'总里程', 'width': 60}; colData3[colData3.length] = {'field': data[0][n].aa, 'title':'覆盖里程', 'width': 60}; colData3[colData3.length] = {'field': data[0][n].aaa, 'title':'覆盖率', 'width': 60}; index++; } colData3[colData3.length] = {'field': 'tal7','title':'总里程', 'align': 'center', 'width': 60}; colData3[colData3.length] = {'field': 'tal8','title':'覆盖里程', 'align': 'center', 'width': 60}; colData3[colData3.length] = {'field': 'tal9','title':'覆盖率', 'align': 'center', 'width': 60}; for(var n=0;n<data[3].length;n++){ colData3[colData3.length] = {'field': data[3][n].d, 'title':'总里程', 'width': 60}; colData3[colData3.length] = {'field': data[3][n].dd, 'title':'覆盖里程', 'width': 60}; colData3[colData3.length] = {'field': data[3][n].ddd, 'title':'覆盖率', 'width': 60}; index++; } colData3[colData3.length] = {'field': 'tal10','title':'总里程', 'align': 'center', 'width': 60}; colData3[colData3.length] = {'field': 'tal11','title':'覆盖里程', 'align': 'center', 'width': 60}; colData3[colData3.length] = {'field': 'tal12','title':'覆盖率', 'align': 'center', 'width': 60}; for(var n=0;n<data[2].length;n++){ colData3[colData3.length] = {'field': data[2][n].c, 'title':'总里程', 'width': 60}; colData3[colData3.length] = {'field': data[2][n].cc, 'title':'覆盖里程', 'width': 60}; colData3[colData3.length] = {'field': data[2][n].ccc, 'title':'覆盖率', 'width': 60}; index++; } colData4 = colData3; columns.push(colData2); columns.push(colData3);//这一步不能省,个人理解这是要组成json格式的数据传递给datagrid,其他类型的数据貌似会出bug。 /*alert(columns[0][0]);*/ $("#month_report").datagrid({ url:'<e:url value='initTableData.e'/>', title: '列表', width:1200, rownumbers: true, collapsible: true, pagination:true, columns:columns }); //$("#month_report").datagrid("loadData",data.rows); } });