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. Swift中if let name = optionName {}解释

    在Swift语法的if语句中,是不能出现这种情况的: let optionName = "Swift" if let name = optionName { print(" ...

  2. Oracle 基础 —SQL语句优化的途径

    一:SQL语句的优化途径 1.选择合适的Oracle优化器 (1).RBO 基于规则进行优化的优化器   --Oracle 10G 后被抛掉 (2).CBO基于成本(CPU 和 内存的占用率)优化的优 ...

  3. freeCodeCamp:Where art thou

    写一个 function,它遍历一个对象数组(第一个参数)并返回一个包含相匹配的属性-值对(第二个参数)的所有对象的数组.如果返回的数组中包含 source 对象的属性-值对,那么此对象的每一个属性- ...

  4. 关于HTML中浮动与清除的思考

    布局时需要利用浮动(float)的属性,同时我们需要一个清除浮动(clear)与之配合才能达到预期的目标. w3s上关于float和clear的定义分别为:float:float 属性定义元素在哪个方 ...

  5. 深入浅出ExtJS 第六章 布局

       6.1 布局的用途 6.1 布局的用途 //决定把什么东西放到什么位置; var vieport = new Ext.Viewport({ layout:'border', //使用Border ...

  6. Android使用JNI(从java调用本地函数)

    当编写一个混合有本地C代码和Java的应用程序时,需要使用Java本地接口(JNI)作为连接桥梁.JNI作为一个软件层和API,允许使用本地代码调用Java对象的方法,同时也允许在Java方法中调用本 ...

  7. Game start

    今天开始有计划的码代码吧!!我可是以后要进微软或者google的男人.初步计划先学习编程之美吧,每天码一到题的解法,每天每天每天..然后是ACM竞赛基础,每天一节同上.最后..不对,冷静冷静,我已经没 ...

  8. Wim技术之Wim文件的制作

    背景:操作的镜像文件为win8.1 update的ISO里的Wim文件 1.使用如下命令将支持WimBoot的instal.Wim文件转换成可以支持wimboot启动的映像文件 Dism /Expor ...

  9. Cocos移植到Android的一些问题-中文乱码问题

    Android平台版本和设备碎片化很严重,因此从Win32平台移植到Android平台会有很多问题,下面是我们归纳的从Win32平台移植到Android平台遇到的一些问题.在Android平台中文乱码 ...

  10. 【学习笔记】【C语言】标识符

    1. 什么是标识符 标识符就是在程序中自定义的一些符号和名称.要跟关键字区分开来:关键字是C语言默认提供的符号,标识符是程序员自定义的 2. 标识符的作用 1) 标识符,从字面上理解就是用来标识某些东 ...