动态创建表格

来源:互联网 发布:武汉长江大数据交易所 编辑:程序博客网 时间:2024/06/05 19:23

项目中有表中的一些字段都是自动生成的,需要使用js创建表格,请教了公司同事最后完成了,坑爹!
首先 :

后台返回的json数据

{    "customerCapitalTrialList": [        {            "amount": 48144243.33,            "customerCapitalTrialId": 1815475,            "daliyCutDate": "2016-12-04",            "itemName": "存放活期款项",            "itemType": "资产类",            "trialBalanceResultId": 777873        },        {            "amount": 2025592.2,            "customerCapitalTrialId": 1815477,            "daliyCutDate": "2016-12-04",            "itemName": "待结转手续费",            "itemType": "资产类",            "trialBalanceResultId": 777873        },        {            "amount": 22311688,            "customerCapitalTrialId": 1815479,            "daliyCutDate": "2016-12-04",            "itemName": "待结转利息",            "itemType": "负债类",            "trialBalanceResultId": 777873        },        {            "amount": 9000,            "customerCapitalTrialId": 1815481,            "daliyCutDate": "2016-12-04",            "itemName": "交易担保金",            "itemType": "负债类",            "trialBalanceResultId": 777873        },        {            "amount": -19994665.99,            "customerCapitalTrialId": 1815489,            "daliyCutDate": "2016-12-04",            "itemName": "在途资金",            "itemType": "资产类",            "trialBalanceResultId": 777873        },        {            "amount": 6826328.54,            "customerCapitalTrialId": 1815493,            "daliyCutDate": "2016-12-04",            "itemName": "未确认款项",            "itemType": "负债类",            "trialBalanceResultId": 777873        },        {            "amount": 12384154240198.645,            "customerCapitalTrialId": 1815495,            "daliyCutDate": "2016-12-04",            "itemName": "会员账户存款",            "itemType": "负债类",            "trialBalanceResultId": 777873        }    ],    "trialBlannceResultList": {        "assets": 71110191.87,        "daliycutdate": "2016-12-04",        "diffamount": -12384116578666.805,        "equity": 0,        "liabilities": 12384187688858.676,        "status": "有效"    }}

说明下后台大哥给的json真是坑爹,2个list,跟之前遇到的标准json完全不一样。香菇。customerCapitalTrialList中需要的字段itemName,amount。trialBlannceResultList需要的字段assets,diffamount,liabilities,而且前台需要根据customerCapitalTrialList中的itemType判断哪个是负债类,哪个是资产类,最终将对应的值赋给不同的表格。

HTML代码:
表头是写死的,省略了easyui的一些样式代码,防止出现冲突,导致表头显示不出来。

<table class="tablei Balance" align="center" width="100%">        <tr>            <td colspan="7" >资金试算平衡表</td>        </tr>        <tr>            <td colspan="3">资产类</td>            <td colspan="3">负债类</td>            <td colspan="1">差异</td>        </tr></table>

Javascript代码:

     $(function(){        var curr_time=new Date();        $("#queryDate").datebox("setValue",dateformatter(curr_time));    });    function loadRemote(){        var queryDate =$("#queryDate").datebox('getValue');        var _url = [];        _url.url = "/daliy/daliyMainc/fundTrailBalance";        _url.dataType = "json";        _url.type = "post";        _url.data = {            "queryDate" : queryDate,        };        _url.callback = function (data){            var data = globalHtmlCharDecode(data);            if(data.result == "success"){                var row = eval("(" +data.rows+")" );                $('.Balance').html('<tr><td colspan="7" >资金试算平衡表</td></tr><tr><td colspan="3">资产类</td><td colspan="3">负债类</td><td colspan="1">差异</td></tr>')                console.log(row);                list(row);            }else{                alert(data.msg);            }        };        _url.errorCallback = function(data){            var msg=JSON.stringify(data);        };        getEasyUiJson(_url);    }    function list (data){        var a = data.customerCapitalTrialList;        var t = data.trialBlannceResultList;        var list1=[];        var list2=[];        var zc=1,fz= 1,b=0;        for(var i=0;i< a.length;i++){            if(a[i].itemType =="资产类") {                zc++;                list1.push(a[i]);            } else if(a[i].itemType =="负债类"){                fz++;                list2.push(a[i]);            }        }        if(zc>fz){            b=zc;            for(var i=fz-1;i<b;i++) {                list2.push({amount:'',itemName:''});            }        } else if(zc<fz){            b=fz;            for(var i=zc-1;i<b;i++) {                list1.push({amount:'',itemName:''});            }        }else{ b=zc;}        for(var i=0;i<b;i++){            if(i==0){                $('.Balance').append('<tr>'+                        '<td rowspan="'+b+'">银行存款</td>'+                        '<td>'+list1[i].itemName+'</td>'+                        '<td>'+list1[i].amount+'</td>'+                        '<td rowspan="'+b+'">会员账户余额</td>'+                        '<td>'+list2[i].itemName+'</td>'+                        '<td>'+list2[i].amount+'</td>'+                        '<td rowspan="'+b+'" class="cy">'+ t.diffamount+'</td>'                );            } else if(i==b-1){                $('.Balance').append('<tr>'+                        '<td>账面合计余额</td>'+                        '<td>'+t.assets+'</td>'+                        '<td>账面合计余额</td>'+                        '<td>'+t.liabilities+'</td>'                );            } else{                $('.Balance').append('<tr>'+                        '<td>'+list1[i].itemName+'</td>'+                        '<td>'+list1[i].amount+'</td>'+                        '<td>'+list2[i].itemName+'</td>'+                        '<td>'+list2[i].amount+'</td>'                );            }        }        console.log(list1,list2,b);    }

eval(“(” +data.rows+”)” )是将返回的json数据转化为json格式。
这里写图片描述

变量b是定义其中一个表格rolspan的值,并且做判断如果负债类>资产类要把当前行变成空。

界面效果展示:
这里写图片描述

注意 :easyui解决不了复杂表格的布局,就应该使用自定义表格,不能再一棵树上吊死。

0 0