首页 > 代码库 > JSON对象配合jquery.tmpl.min.js插件,手动攒出一个table
JSON对象配合jquery.tmpl.min.js插件,手动攒出一个table
jquery.tmpl.min.js 首先下载这个插件
1.绑定json那头的键
//TemplateDDMX 这个是这段JS的ID,这个必须写!!!!!!
//${}为json的键的值,必须要填写正确,和<%#Eval()%>这个作用一样
<script id="TemplateDDMX" type="text/x-jquery-tmpl"> <tr> <td style=‘font-size:16px;display:none;‘>${ID}</td> <td style=‘font-size:16px;‘>${BELN}</td> <td style=‘font-size:16px;‘>${OSNR}</td> <td style=‘font-size:16px;‘>${NVOICE}</td> <td style=‘font-size:16px;‘>${NV_ITM_NO}</td> <td style=‘font-size:16px;display:none;‘>${A_NO}</td> <td style=‘font-size:16px;‘>${UKRS}</td> <td style=‘font-size:16px;‘>${UTXT}</td> <td style=‘font-size:16px;‘>${RDAT}</td> <td style=‘font-size:16px;‘>${ELNR}</td> <td style=‘font-size:16px;‘>${UNNR}</td> <td style=‘font-size:16px;‘>${AME1}</td> <td style=‘font-size:16px;‘>${ZIRK}</td> <td style=‘font-size:16px;‘>${ATNR}</td> <td style=‘font-size:16px;‘>${AKTX}</td> <td style=‘font-size:16px;‘>${AT_CAT}</td> <td style=‘font-size:16px;‘>${DPPU}</td> <td style=‘font-size:16px;‘>${KIMG}</td> <td style=‘font-size:16px;‘>${RKME}</td> <td style=‘font-size:16px;‘>${VPPU}</td> <td style=‘font-size:16px;‘>${ETWR}</td> <td style=‘font-size:16px;‘>${T_PCURR}</td> <td style=‘font-size:16px;‘>${T_RCURR}</td> <td style=‘font-size:16px;‘>${TWEG}</td> <td style=‘font-size:16px;‘>${LG_PDP}</td> <td style=‘font-size:16px;‘>${DP_DDAT}</td> <td style=‘font-size:16px;‘>${KJE}</td> <td style=‘font-size:16px;‘>${KSL}</td> <td style=‘font-size:16px;‘>${GZJE}</td> </tr> </script>
2.将json填充到空的table中
<script> var data = http://www.mamicode.com/$j("#<%=Hid_DDMX.ClientID %>").val();//将Json对象在pageload时给隐藏域赋值 data = http://www.mamicode.com/eval(data);//注意这点:将json解析> //Tbody1这个是table名字 $j("#TemplateDDMX").tmpl(item).appendTo("#Tbody1"); });</script>
3.创建一个空table
<table border="0" cellspacing="0" cellpadding="0" id="tb_detail" style="border-collapse: collapse;" class="subTable_"> <thead> <tr style="font-weight: bolder; text-align: center; font-size: 16px;"> <th scope="col" style="width: 100px; display: none;"> ID </th> <th scope="col" style="width: 100px; font-size: 16px;"> 开票凭证 </th> <th scope="col" style="width: 120px; font-size: 16px;"> 出具发票项目 </th> <th scope="col" style="width: 100px; font-size: 16px;"> 金税发票号 </th> <th scope="col" style="width: 180px; font-size: 16px;"> 金税发票行项目 </th> <th scope="col" style="width: 200px; font-size: 16px; display: none;"> OA端凭证号 </th> <th scope="col" style="width: 100px; font-size: 16px;"> 公司代码 </th> <th scope="col" style="width: 400px; font-size: 16px;"> 公司名称 </th> <th scope="col" style="width: 180px; font-size: 16px;"> 记录的创建日期 </th> <th scope="col" style="width: 160px; font-size: 16px;"> 会计凭证编号 </th> <th scope="col" style="width: 160px; font-size: 16px;"> 客户编号 </th> <th scope="col" style="width: 180px; font-size: 16px;"> 名称 </th> <th scope="col" style="width: 100px; font-size: 16px;"> 销售地区 </th> <th scope="col" style="width: 200px; font-size: 16px;"> 物料号 </th> <th scope="col" style="width: 200px; font-size: 16px;"> 产品名称 </th> <th scope="col" style="width: 200px; font-size: 16px;"> 规格 </th> <th scope="col" style="width: 160px; font-size: 16px;"> 发货单价 </th> <th scope="col" style="width: 200px; font-size: 16px;"> 实际已开票数量 </th> <th scope="col" style="width: 100px; font-size: 16px;"> 销售单位 </th> <th scope="col" style="width: 100px; font-size: 16px;"> 发票单价 </th> <th scope="col" style="width: 200px; font-size: 16px;"> 凭证货币计量的净价值 </th> <th scope="col" style="width: 200px; font-size: 16px;"> 应收款余额 </th> <th scope="col" style="width: 200px; font-size: 16px;"> 已回款金额 </th> <th scope="col" style="width: 200px; font-size: 16px;"> 分销渠道 </th> <th scope="col" style="width: 200px; font-size: 16px;"> 是否铺底货 </th> <th scope="col" style="width: 200px; font-size: 16px;"> 铺底货到期日 </th> <th scope="col" style="width: 200px; font-size: 16px;"> 回款金额 </th> <th scope="col" style="width: 200px; font-size: 16px;"> 回款数量 </th> <th scope="col" style="width: 200px; font-size: 16px;"> 未过账金额 </th> </tr> </thead> <tbody id="Tbody1"> </tbody> </table>
JSON对象配合jquery.tmpl.min.js插件,手动攒出一个table
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。