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. 单线程模型中Message、Handler、Message Queue、Looper之间的关系

    1. Android进程 在了解Android线程之前得先了解一下Android的进程.当一个程序第一次启动的时候,Android会启动一个LINUX进程和一个主线程.默认的情况下,所有该程序的组件都 ...

  2. leetcode 题解:Remove Duplicates from Sorted Array II(已排序数组去三次及以上重复元素)

    题目: Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For ex ...

  3. Freebsd 编译内核

    # cd /usr/src/sys/i386/conf # cp GENERIC GENERIC.20060812# ee GENERIC 如果要加入ipf防火墙的话则加入options        ...

  4. 【转】同一台机器部署两个jboss方法

    更改jboss的端口信息 1) 更改webservic的端口信息D:\jboss-new\server\default\conf\jboss-service.xml文件 <mbean code= ...

  5. 【转】 关于data factory的介绍——即如何快速生成大批量数据

    上次在我的博客中讲述了quest公司的spotlight系列软件,这次来扯淡一下quest公司的另一测试辅助软件 datafactory(数据工厂),顾名思义,数据工厂是生产数据的,主要应用领域是性能 ...

  6. Dijkstra最短路径算法

    #include <iostream> #include <vector> #include <cstring> #include <cstdio> # ...

  7. freeCodeCamp:Search and Replace

    使用给定的参数对句子执行一次查找和替换,然后返回新句子. 第一个参数是将要对其执行查找和替换的句子. 第二个参数是将被替换掉的单词(替换前的单词). 第三个参数用于替换第二个参数(替换后的单词). 注 ...

  8. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

  9. Android之聊天室设计与开发

    我们要设计和实现一个有聊天室功能的APP,需要服务器不断读取来自客户端的信息,并即时地将信息发送给每个连接到本服务器上的客户端,每个客户端可以向服务器发送消息,并不断地接收来自服务器的消息,并将消息显 ...

  10. WordPress 去除图片img标签的高度与宽度

    要求 如,在桌面设备上,图片使用的是以下的HTML代码:  代码如下 复制代码 1  <img src="abc.png" alt="abc" width ...