首页 > 代码库 > 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