您的位置:首页 > 产品设计 > UI/UE

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);
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: