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. VA中修改函数注释

    在VA中修改对应的函数和文件注释,可以使用VA自动产生函数和文件头注释 //************************************************************** ...

  2. 使用手机模拟器与android操作系统

    创建手机模拟器: 1. 点击Eclipse中新增的按钮,打开"Android Virtual Device Manager"(不同版本的ADT可能打开路径不同),如下图: 2. 点 ...

  3. C#生成DBF文件

    C# 生成DBF,无需注册Microsoft.Jet.OLEDB. namespace ConsoleApplication { class Program { static void Main(st ...

  4. VMware系统运维(十六)部署虚拟化桌面 Horizon View Manager 5.2 配置池

    1.点击"添加",打开添加池界面,选择"自动池",点击"下一步" 2.选择"专用,启动自动分配",点击"下一步 ...

  5. HDU 2845 Beans (DP)

    Beans Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  6. Bootstrap,导航栏点击效果修复(补)

    前言: 昨天晚上休息,忘记发博客了.对于学习这件是,还是需要坚持的.想想自建一个Jekyll博客模版还是很兴奋的,话不多说,看正文吧! 关于开发:  先看个Demo吧,点这里.你会发现,点击是没有效果 ...

  7. hive操作语句使用详解

    #创建表人信息表  person(String name,int age) hive> create table person(name STRING,age INT)ROW FORMAT DE ...

  8. Java之组合数组1

    我们先说"数组",数组是有序数据的集合,数组中的每个元素具有相同的数组名和下标来唯一地确定数组中的元素. 一.一维数组的定义 type arrayName[]; 其中类型(type ...

  9. 转:C#写的WEB服务器

    转:http://www.cnblogs.com/x369/articles/79245.html 这只是一个简单的用C#写的WEB服务器,只实现了get方式的对html文件的请求,有兴趣的朋友可以在 ...

  10. Memcached解决单台服务器故障问题

    <beitmemcached> <add key="name1" value="server1:port" /> <add key ...