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>

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

  1. web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo

    背景:webform或者mvc下实现插件快速分页 ps:我这里用的mvc开发的,数据库连接.用的ADO.NET实体数据模型 此案例下载地址(内含需要用到的一个插件与数据库):http://downlo ...

  2. 通过jquery.transit.min.js插件,实现图片的移动

    首先给出插件:jquery.transit.min.js (function(t,e){if(typeof define==="function"&&define. ...

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

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

  4. 生成二维码(jquery.qrcode.min.js插件)

    生成二维码:参看GitHub资源https://github.com/jeromeetienne/jquery-qrcode 直接上代码:(都需要引入jQuery.js  1.引入(jquery.qr ...

  5. jquery.fly.min.js 拋物插件

    插件官方: https://github.com/amibug/fly, 官方例子: http://codepen.io/hzxs1990225/full/ogLaVp 首先加载jQuery.js和j ...

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

    1.jquery.nicescroll.min.js源码 /* jquery.nicescroll 3.6.8 InuYaksa*2015 MIT http://nicescroll.areaaper ...

  7. jquery.serializejson.min.js的妙用

    关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件. 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需 ...

  8. 异步提交表单插件jquery.form.min.js的使用实例

    因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件, ...

  9. ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决

    之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...

随机推荐

  1. 【Android Studio使用教程2】Android Studio创建项目

    创建项目 首先,先指出Android Studio中的两个概念. Project 和 Module .在Android Studio中, Project 的真实含义是工作空间, Module 为一个具 ...

  2. uva 10054 The Necklace 拼项链 欧拉回路基础应用

    昨天做了道水题,今天这题是比较水的应用. 给出n个项链的珠子,珠子的两端有两种颜色,项链上相邻的珠子要颜色匹配,判断能不能拼凑成一天项链. 是挺水的,但是一开始我把整个项链看成一个点,然后用dfs去找 ...

  3. ASP.NET调用word出错

    检索COM 类工厂中CLSID 为{000209FF-0000-0000-C000-000000000046} 的组件时失败,原因是出现以下错误: 80070005. 开始——控制面板——管理工具—— ...

  4. asp.net oracle 存储过程

    ORACLE代码 CREATE OR REPLACE PROCEDURE gd_CURSOR(MYCS1 OUT SYS_REFCURSOR,MYCS2 OUT SYS_REFCURSOR,a out ...

  5. yum中baserul路径中的空格

    配置yum源时,比如指定本地挂载的光盘时,路径中包含空格.在不使用链接的情况下,用"\"进行转义不行,把路径加单.双引号也不可行.正确做法是把空格用%20代替.同理,其他不可识别的 ...

  6. cxGrid使用汇总1

    这些都不是原创,只是平时收集到资料然后整理的,有些可能百度一下到处都是而且还大同小异也有些不是很好找,现在贴出来希望给那些用到cxGrid的人会有所帮助 1. 去掉cxGrid中台头的Box 解决:在 ...

  7. hust 1017 DLX

    #include<set> #include<cmath> #include<queue> #include<cstdio> #include<v ...

  8. itunes connect提交app教程

    .打开itunes connect登陆之后,选择Manage Your Apps,再选Add New App: .填写项目相关信息,不知道怎么填的点击问号查看: Bundle ID Suffix需要和 ...

  9. javascript触摸事件touch使用

    详细内容请点击 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距.最近一个W3C工作组正合力制定这一触摸事件规范.        在本文深入研究iOS和 ...

  10. Part 18 Indexes in sql server

    Indexes in sql server Clustered and nonclustered indexes in sql server Unique and Non Unique Indexes ...