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 = $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>
时间: 2024-10-22 21:49:31

JSON对象配合jquery.tmpl.min.js插件,手动攒出一个table的相关文章

jquery.form.min.js插件的使用实例

因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件,查找资料后得知: .serialize()序列化表单,提交按钮的值不会被序列化.另外,如果想要一个表单元素的值被序列化成字符串,这个元素必须含有 name 属性.此外,复选框(checkbox)和单选按钮(radio)(input类型为 "radio" 或 "checkbox&q

jquery.imgpreload.min.js插件实现页面图片预加载

页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAORk2_fotM4RbzRvtcaiQu2y_BU3Gpj0rYRy_EWrgXEuFeja0q 页面分享地址:http://www.jb51.net/article/21987.htm Javascript , Jquery 实现页面图片预加载百分比展现 如果需要在页面初始加载时显示加载进度.主要是

jquery.nicescroll.min.js滚动条插件的用法

1.jquery.nicescroll.min.js源码 /* jquery.nicescroll 3.6.8 InuYaksa*2015 MIT http://nicescroll.areaaperta.com */(function(f){"function"===typeof define&&define.amd?define(["jquery"],f):"object"===typeof exports?module.ex

前端生成二维码插件jquery.qrcode.min.js

1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq.能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 闲话少说,看demo吧!(haha...) 2.快速使用demo 简单介绍:这是一款快速应用案例,没有太特殊的需求的话够用了.鉴于需求,本例是把二维码生成了图片,可以保存到手机,然后发送给好友,直接识别二维码. 1 <!DOCTYPE html> 2 <html> 3 &

jquery.serializejson.min.js的妙用

关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件. 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交. 而在处理复杂的表单时,需要一个一个区手动判断处理字段值,显得非常麻烦.接下来介绍的插件将解决这个问题. 关于serializeJSON 使用jquery.serializeJSON,可以在基于jQuery或者Zepto的页面中,调用 .serializeJ

图片延迟插件 Jquery.lazyload.min.js

当一个页面打开的图片太多,我们可以用jquery的一个延迟加载插件.名为:jquery.lazyload.min.js 使用非常简单,下面我就把示例代码帖出来. 1 <div style="height:700px;"> 2 <img src="img/grey.gif" data-original="http://www.ziyou.com.cn/ziyou/uploadImg/bberfq.jpg" width="

jquery.qrcode.min.js(支持中文转化二维码)

详情请看: http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/jqueryqrcodeminjs/ 今天还是要讲一下关于二维码的知识,前几篇讲解中有讲到我使用的可以生成二维码的js是qrcode.js,然后结合Cordovad的插件$cordovaBarcodeScanner插件可以扫描二维码,这样就基本完成了简单的扫一扫功能.后来在项目进行,开始要调用后台数据和传参数到接口的时候发现qrcode.js它只能解析英文或者数字,并且

多语言切换jquery.i18n.min.js

项目需求,切换多语言,采用 jQuery.i18n.min.js文件内容如下 ------------------------------------------------- /*! * jquery i18n Plugin v1.0.0 * https://github.com/ZOMAKE/jquery.i18n * * Copyright 2017 ZOMAKE,Inc. * Released under the Apache Licence 2.0 */ (function($) { 

jquery.qrcode.min.js生成二维码

jquery.qrcode.min.js是一款可以生成二维码的插件,使用前提是先引入jquery,因为jquery.qrcode.min.js依赖jquery. 基本用法 1.引入js <script src="js/jquery-3.1.1.min.js"></script> <script src="js/jquery.qrcode.min.js"></script> 2.构建容器 <div class=&q