JSON对象配合jquery.tmpl.min.js插件，手动攒出一个table

浏览数：40 / 时间：2015年06月09日

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 = $j("#<%=Hid_DDMX.ClientID %>").val();//将Json对象在pageload时给隐藏域赋值
                data = eval(data);//注意这点：将json解析
                $j.each(data, function (i, item) {
　　　　　　　　　　　　//TemplateDDMX这里用到了刚才那个script脚本，
　　　　　　　　　　　　//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>