js动态编写easyuidatagrid表格
2018-01-31 10:25
531 查看
因需求,表格的表头是要根据后台数据自动生成的,并且在初始化表格的同时填入数据。现在只给出前台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] .b, 'title':'总里程', 'width': 60}; colData3[colData3.length] = {'field': data[1] .bb, 'title':'覆盖里程', 'width': 60}; colData3[colData3.length] = {'field': data[1] .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] .a, 'title':'总里程', 'width': 60}; colData3[colData3.length] = {'field': data[0] .aa, 'title':'覆盖里程', 'width': 60}; colData3[colData3.length] = {'field': data[0] .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] .d, 'title':'总里程', 'width': 60}; colData3[colData3.length] = {'field': data[3] .dd, 'title':'覆盖里程', 'width': 60}; colData3[colData3.length] = {'field': data[3] .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] .c, 'title':'总里程', 'width': 60}; colData3[colData3.length] = {'field': data[2] .cc, 'title':'覆盖里程', 'width': 60}; colData3[colData3.length] = {'field': data[2] .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); } });
相关文章推荐
- 转 -- MVC+EF easyui dataGrid 动态加载分页表格
- easyui tree datagrid动态添加表头和表格数据,动态弹出框,修改和删除按钮
- easyui datagrid remoteSort的实现 Controllers编写动态的Lambda表达式 IQueryable OrderBy扩展
- 如何用easyui+JAVA 实现动态拼凑datagrid表格
- EasyUI datagrid 动态加载表格数据的方式
- 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)
- datagrid-detailview.js easyui表格嵌套
- js-模拟easyui-datagrid表格各行选中事件-实现逻辑
- easyui datagrid 表格动态隐藏部分列的展示
- 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)
- 如何用easyui+JAVA 实现动态拼凑datagrid表格
- js循环生成多个easyui datagrid数据网格时,初始化表格
- JS动态给EasyUI的datagrid添加列
- 完整的easyui datagrid 动态生成列
- 用Js实现的动态增加表格示例自己写的
- [转载]easyui datagrid 时间格化(JS 日期时间本地化显示)
- 用JS实现动态删除表格行、列、双击编辑的代码
- 动态静态网页EasyUI DataGrid 动态新增 Toolbar
- JS实现动态生成表格并提交表格数据向后端
- JS动态添加table表格元素