js动态编写easyuidatagrid表格

因需求,表格的表头是要根据后台数据自动生成的,并且在初始化表格的同时填入数据。现在只给出前台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);
        }
    });

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值