动态创建表格
来源:互联网 发布:武汉长江大数据交易所 编辑:程序博客网 时间: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
- js动态创建表格
- javascript 动态创建表格
- javascript 动态创建表格
- javascript 动态创建表格
- 动态创建表格c#
- js动态创建表格
- js动态创建表格
- MecGrid 动态创建表格
- JS动态创建表格
- 动态表格创建
- JQuery动态创建表格
- JS动态创建表格
- JS 动态创建表格
- javascript 动态创建表格
- Android动态创建表格
- javascript动态创建表格
- js 动态创建表格
- Android动态创建表格 .
- erlang 最简单的安装方法
- 如何在O(n)的时间复杂度内找出数组中
- 工厂方法模式笔记
- Android内存优化之OOM
- 算法 第一天
- 动态创建表格
- Git 常用命令
- 面试题之指针函数与函数指针的区别
- LeetCode30. Substring with Concatenation of All Words
- java轻量级IOC框架Guice
- 《第一行代码》第一章 : Android初识
- 函数调用过程中的寄存器状态分析
- python-csv
- [加密]--PHP 使用非对称加密算法(RSA)