jquery tmpl 详解
动态请求数据来更新页面是现在非常常用的方法，比如博客评论的分页动态加载，微博的滚动加载和定时请求加载等。
这些情况下，动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML，总之不在端拼数据就在服务器端拼数据。不过，从传输量方面来看，返回 HTML 不划算，而在 web 传输方面，现在更多的是使用 JSON 而不是 XML。
浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是，结构不复杂的时候还好，结构一复杂，就想死了，需要很小心很小心地写出几乎无法维护的 Script 代码。
因此一些用模版生成HTML的的框架相继出现jquery.tmpl 就是其中的一种，下面我们来详细介绍下jquery.tmpl的用法
jquery.tmpl的几种常用标签分别有：
${}, {{each}}, {{if}}, {{else}}, {{html}}
不常用标签
&{{=}},{{tmpl}} and {{wrap}}.
${}等同与{{=}}是输出变量 ${}里面还可以放表达式 （=和变量之间一定要有空格，否则无效）
&p id=&p_demo&&
&script id=&demo& type=&text/x-jquery-tmpl&&
& & &p style=&margin-bottom:10&&
& & 　　&span&${ID}&/span&
& & 　　&span style=&margin-left:10&&{{= Name}}&/span&
& & 　　&span style=&margin-left:10&&${Number(Num)+1}&/span&
& & 　　&span style=&margin-left:10&&${Status}&/span&
&script type=&text/javascript&&
　　var users = [{ ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 }, { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'}];
　　$(&#demo&).tmpl(users).appendTo('#p_demo');
{{each}} 提供循环逻辑，$value访问迭代变量 也可以自定义迭代变量(i,value)
&p id=&p_each&&
&script id=&each& type=&text/x-jquery-tmpl&&&
& & &h3&users&/h3&
& & {{each(i,user) users}}
& & & & &p&${i+1}:{{= user.name}}&/p&
& & & & {{if i==0}}
& & & & & & &h4&group&/h4&
& & & & & & {{each(j,group) groups}}
& & & & & & & & &p&${group.name}&/p&
& & & & & & {{/each}}
& & & & {{/if}}
& & {{/each}}
& & &h3&depart&/h3&
& & {{each departs}}
& & & & &p&{{= $value.name}}&/p&
& & {{/each}}
&/script&&
&script type=&text/javascript&&
　　var eachData = { users: [{ name: 'jerry' }, { name: 'john'}], groups: [{ name: 'mingdao' }, { name: 'meihua' }, { name: 'test'}], departs: [{ name: 'IT'}] };
　　$(&#each&).tmpl(eachData).appendTo('#p_each');
{{if }} {{else}}提供了分支逻辑 {{else}} 相当于else if
&p id=&p_ifelse&&&/p&
&script id=&ifelse& type=&text/x-jquery-tmpl&&&
& & &p style=&margin-bottom:10&&&span&${ID}&/span&&span style=&margin-left:10&&{{= Name}}&/span&
& & & & {{if Status}}
& & & & & & &span&Status${Status}&/span&
& & & & {{else App}}
& & & & & & &span&App${App}&/span&
& & & & {{else}}
& & & & & & &span&None&/span&
& & & & {{/if}}
&/script&&
&script type=&text/javascript&&
　　var users = [{ ID: 'think8848', Name: 'Joseph Chan', Status: 1, App: 0 }, { ID: 'aCloud', Name: 'Mary Cheung', App: 1 }, { ID: 'bMingdao', Name: 'Jerry Jin'}];
& & $(&#ifelse&).tmpl(users).appendTo('#p_ifelse');
{{html}} 输出变量html,但是没有html编码，适合输出html代码
&p id=&p_html&&&/p&
&script id=&html& type=&text/x-jquery-tmpl&&&
& & &p style=&margin-bottom:10&&
　　　　&span&${ID}&/span&
　　　　&span style=&margin-left:10&&{{= Name}}&/span&
& & 　　${html}
& & 　　{{html html}}
&/script&&
&script type=&text/javascript&&
　　var user = { ID: 'think8848', Name: 'Joseph Chan', html: '&button&html&/button&' };
& 　$(&#html&).tmpl(user).appendTo('#p_html');
{{tmpl}} 嵌套模版
&p id=&tmpl&&&/p&
&script id=&tmpl1& type=&text/x-jquery-tmpl&&
& & &p style=&margin-bottom:10&&
& & 　　&span&${ID}&/span&
& & 　　&span style=&margin-left:10&&{{tmpl($data) '#tmpl2'}}&/span&
& & &/p& & &&
&script id=&tmpl2& type=&type/x-jquery-tmpl&&
& & {{each Name}}${$value} &{{/each}} &&
&script type=&text/javascript&&
　　var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
& &$(&#tmpl1&).tmpl(users).appendTo('#tmpl');
{{wrap}},包装器
&p id=&wrapDemo&&
&script id=&myTmpl& type=&text/x-jquery-tmpl&&
& & The following wraps and reorders some HTML content:
& & {{wrap &#tableWrapper&}}
& & & & &h3&One&/h3&
& & & & &p&
& & & & & & First &b&content&/b&
& & & & &/p&
& & & & &h3&Two&/h3&
& & & & &p&
& & & & & & And &em&more&/em& &b&content&/b&...
& & & & &/p&
& & {{/wrap}}
& & &/script&
&script id=&tableWrapper& type=&text/x-jquery-tmpl&&
& & &table cellspacing=&0& cellpadding=&3& border=&1&&&tbody&
& & & & &tr&
& & & & & & {{each $item.html(&h3&, true)}}
& & & & & & & & &td&
& & & & & & & & & & ${$value}
& & & & & & & & &/td&
& & & & & & {{/each}}
& & & & &/tr&
& & & & &tr&
& & & & & & {{each $item.html(&p&)}}
& & & & & & & & &td&
& & & & & & & & & & {{html $value}}
& & & & & & & & &/td&
& & & & & & {{/each}}
& & & & &/tr&
& & &/tbody&&/table&
& & &/script&
&&script type=&text/javascript&&
& & & & $(function () {
& & & & & & $('#myTmpl').tmpl().appendTo('#wrapDemo');
& & & & });
& & &/script&
$data $item $item代表当前的模板；$data代表当前的数据。
&p id=&p_item_data&&&/p&
&script id=&item_data& type=&text/x-jquery-tmpl&&&
& & &&p style=&margin-bottom:10&&
　　　　&span&${$data.ID}&/span&
　　　　&span style=&margin-left:10&&${$item.getName(& &)}&/span&
　　　&/p&
&/script&&
&script type=&text/javascript&&
&　　var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
& & &$(&#item_data&).tmpl(users,
& & & & & & & & {
& & & & & & & & getName: function (spr) {
& & & & & & & & & &return this.data.Name.join(spr);
& & & & & & & & }
& & & & & & & & }).appendTo('#p_item_data');
&$.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item
&script type=&text/javascript&&
　　$('#demo').delegate('p', 'click', function () {
& & & & & & & & var item = $.tmplItem(this);
& & & & & & & & alert(item.data.Name);
& & & & & & });jQuery .tmpl(), .template()学习资料小结
字体：[ ] 类型：转载 时间：
昨晚无意中发现一个有趣的jQuery插件.tmpl()，其文档在这里。
昨晚无意中发现一个有趣的jQuery插件.tmpl()，其文档在。官方解释对该插件的说明：将匹配的第一个元素作为模板，render指定的数据，签名如下:
.tmpl([data,][options])
其中参数data的用途很明显：用于render的数据，可以是任意js类型，包括数组和对象。options一般情况下都是选项了，官方指出，此处的options是一个用户自定义的键值对的map，继承自tmplItem数据结构，适用于模板render动作期间。
在可以下载到最新的tmpl插件，值的一提的是，官方同时也说明了，tmpl目前是beta版，使用需谨慎..
好吧，先来一个最直观的例子： 代码如下: &%@ Page Language="C#" AutoEventWireup="true" %& &!DOCTYPE html& &html& &head& &title&jquery template demo&/title& &link rel="stylesheet" href="content/site.css" type="text/css" /& &link rel="stylesheet" href="content/jquery.ui.css" type="text/css" /& &script type="text/javascript" src="scripts/jquery.js"&&/script& &script type="text/javascript" src="scripts/jquery.ui.js"&&/script& &script type="text/javascript" src="scripts/jquery.tmpl.js"&&/script& &script id="myTemplate" type="text/x-jquery-tmpl"& &tr&&td&${ID}&/td&&td&${Name}&/td&&/tr& &/script& &script type="text/javascript"& $(function () { var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}]; $('#myTemplate').tmpl(users).appendTo('#rows'); }); &/script& &style type="text/css"& body { padding: 10 } table { border-collapse: } &/style& &/head& &body& &table cellspacing="0" cellpadding="3" border="1"& &tbody id="rows"& &/tbody& &/table& &/body& &/html&
例子虽然很小也很简单，但我觉得这个已经很有用了。
当然，.tmpl()还可以使用来自远端的数据，比如说服务: 代码如下: public ActionResult SampleData() { var json = new JsonResult(); json.Data = new[] { new { ID = "remote1", Name = "abcd" }, new { ID = "remote2", Name = "efg" } }; json.JsonRequestBehavior = JsonRequestBehavior.AllowG
这是一个MVC的Action，我把它当做是一个提供数据的服务，然后js代码如下:
代码如下: $('#btnAjax').click(function () { $.getJSON('@Url.Action("SampleData", "Home")', function (json) { $('#rows').empty(); $('#myTemplate').tmpl(json).appendTo('#rows'); }); });
定义模板时，推荐的方式为定义使用
&script id='templateName'& type='text/x-jquery-tmpl'&&/script&
做为模板的包装器，但定义方式并不只有这一种，你可以使用
&div id="template" style="display:"& &/div&
的方式来定义，但是官方文档中说，这种方法可能会产生浏览器无法解析的HTML，因此不推荐使用，不过我试了下，倒没有出什么意外：
HTML: 代码如下: &div id="container"& &/div& &div id="inline" style="display: none"& &label& ${ID}&/label& &label& ${Name}&/label&&br /& &/div&
Javascript:
代码如下: var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}]; $('#inline').tmpl(users).appendTo('#container');
编译缓存模板，在jQuery .tmpl()中，还可以将模板事先编译并缓存起来，然后在合适的时侯再使用，这对于一些数据嵌套是很有用的，如:Html 代码如下: &table cellspacing="0" cellpadding="3" border="1"& &tbody id="compileRows"& &/tbody& &/table&
Javascript
代码如下: &script id="compile1" type="text/x-jquery-tmpl"& {{tmpl 'cached'}} &tr&&td&${ID}&/td&&td&${Name}&/td&&/tr& &/script& &script id="compile2" type="type/x-jquery-tmpl"& &tr&&td colspan="2"&${Group}&/td&&/tr& &/script& &script type="text/javascript"& $(function () { var groupUsers = [{ ID: 'think8848', Name: 'Joseph Chan', Group: 'Administrators' }, { ID: 'aCloud', Name: 'Mary Cheung', Group: 'Users'}]; $('#compile2').template('cached'); $('#compile1').tmpl(groupUsers).appendTo('#compileRows'); }); &/script&
$.template()方法，将一段Html编译为模板，示例:
Javascript 代码如下: var markup = '&tr&&td&${ID}&/td&&td&${Name}&/td&&/tr&'; $.template('template', markup); $.tmpl('template', users).appendTo('#templateRows');
这样就可以将markup中定义的模板应用于templateRows对象。 jQuery .tmpl()的标签，表达式，属性： ${}:从前面的例子来看，这个标签的作用很明显了，相当于是占位符，但是它还有另一种写法{{= field}}如:
代码如下: &script id="myTemplate" type="text/x-jquery-tmpl"& &tr&&td&{{= ID}}&/td&&td&{{= Name}}&/td&&/tr& &/script&
必须要注意的是，"="号后必须跟一个空格，不然是没有效果的。 另外，${}中还可以放表达式，这个牛x吧，如: Html
代码如下: &table cellspacing="0" cellpadding="3" border="1"& &tbody id="expressionRows"& &/tbody& &/table&
Javascript
代码如下: &script type="text/javascript"& $(function () { var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}]; $('#expression').tmpl(userLangs).appendTo('#expressionRows'); }); &/script&
jQuery .tmpl()有两个比较有用的属性:$item、$data:
$item代表当前的模板；$data代表当前的数据。
Html 代码如下: &table cellspacing="0" cellpadding="3" border="1"& &tbody id="propertyRows"& &/tbody& &/table&
Javascript
代码如下: &script id="property" type="text/x-jquery-tmpl"& &tr&&td&${ID}&/td&&td&${$data.Name}&/td&&td&${$item.getLangs('; ')}&/td&&/tr& &/script& &script type="text/javascript"& $(function () { var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}]; $('#property').tmpl(userLangs, { getLangs: function (separator) { return this.data.Langs.join(separator); } }) .appendTo('#propertyRows'); }); &/script&
{{each}}这个标签一看就知道是做循环用的了，用法如下：
Html 代码如下: &ul id="eachList"& &/ul&
Javascript
代码如下: &script id="each" type="text/x-jquery-tmpl"& &li&ID: ${ID}; Name: ${Name};&br /&Langs:&ul&{{each Langs}}&li&${$index + 1}: &label&${$value}. &/label&&/li&{{/each}}&ul&&/li& &/script& &script type="text/javascript"& $(function () { var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}]; $('#each').tmpl(userLangs).appendTo('#eachList'); });
{{each}}还有另一种写法:
Javascript
&script id="each2" type="text/x-jquery-tmpl"&&
&&&&&&&li&ID: ${ID}; Name: ${Name};&br /&Langs:&ul&&STRONG&{{each(i,lang) Langs}}&li&${i + 1}: &label&${lang}. &/label&&/li&{{/each}}&/STRONG&&/ul&&/li&
作用和前一种是一样的。
{{if}}和{{else}}，这两个标签应该一看就知道作用了，直接上示例:
Javascript
&script id="ifelse" type="text/x-jquery-tmpl"&&
&&&&&&&tr&&td&${ID}&/td&&td&${Name}&/td&&td&{{if Langs.length & 1}}${Langs.join('; ')}{{else}}${Langs}{{/if}}&/td&&/tr&&
如果Langs数组元素超过1个，则用'; '连接起来，否则就直接显示Langs，效果:
{{html}}，直接将对象属性值作为HTML代码替换占位符：
Javascript
&script id="html" type="text/x-jquery-tmpl"&&
&&&&&&&tr&&td&${ID}&/td&&td&${Name}&/td&&td&{{html Ctrl}}&/td&&/tr&&
&script type="text/javascript"&
&&&&$(function () {
&&&&&&&&var ctrls = [{ ID: 'think8848', Name: 'Joseph Chan', Ctrl: '&input type="button" value="Demo" /&' }, { ID: 'aCloud', Name: 'Mary Cheung', Ctrl: '&input type="text" value="Demo" /&'}];
&&&&&&&&$('#html').tmpl(ctrls).appendTo('#htmlRows');
{{tmpl}}，前面已经提过该标签了，这里再给一个使用参数的例子:
Javascript
&script id="tmpl1" type="text/x-jquery-tmpl"&
&&&&&tr&&td&${ID}&/td&&td&${Name}&/td&&td& {{tmpl($data) '#tmpl2'}}&/td&&/tr&&&&&&&&
&script id="tmpl2" type="type/x-jquery-tmpl"&
&&&&{{each Langs}}${$value} &{{/each}}&&&
&script type="text/javascript"&
&&&&$(function () {
&&&&&&&&var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}];
&&&&&&&&$('#tmpl1').tmpl(userLangs).appendTo('#tmplRows');
{{wrap}},包装器，这回不需要指定对哪一个元素使用模板了，直接生成模板的包装器，示例:
&div id="wrapDemo"&
Javascript
&script id="myTmpl" type="text/x-jquery-tmpl"&
The following wraps and reorders some HTML content:
{{wrap "#tableWrapper"}}
&&&&&h3&One&/h3&
&&&&&&&&First &b&content&/b&
&&&&&/div&
&&&&&h3&Two&/h3&
&&&&&&&&And &em&more&/em& &b&content&/b&...
&&&&&/div&
&script id="tableWrapper" type="text/x-jquery-tmpl"&
&table cellspacing="0" cellpadding="3" border="1"&&tbody&
&&&&&&&&{{each $item.html("h3", true)}}
&&&&&&&&&&&&&td&
&&&&&&&&&&&&&&&&${$value}
&&&&&&&&&&&&&/td&
&&&&&&&&{{/each}}
&&&&&&&&{{each $item.html("div")}}
&&&&&&&&&&&&&td&
&&&&&&&&&&&&&&&&{{html $value}}
&&&&&&&&&&&&&/td&
&&&&&&&&{{/each}}
&/tbody&&/table&
&script type="text/javascript"&
&&&&$(function () {
&&&&&&&&$('#myTmpl').tmpl().appendTo('#wrapDemo');
$.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item，示例:
$('tbody').delegate('tr', 'click', function () {
&&&&var item = $.tmplItem(this);
&&&&alert(item.data.Name);
至此，官方的API中介绍的内容就完了，我的E文水平不高，对于某些细节难免理解不周，如有谬误之处，敬请指正，谢谢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jquery tmpl下加载函数的使用方法_懒人程序
支付宝赞助帐号：
jquery tmpl下加载函数的使用方法
jquery tmpl下加载函数的使用方法
&script&id=&movieTemplate&&type=&text/x-jquery-tmpl&&&&
&&&&{{tmpl($item.data,&$item)&&#titleTemplate&}}&
&&&&&tr&class=&detail&&&td&Director:&${$item.embolden(Director)}&/td&&/tr&&
&/script&&
&script&id=&titleTemplate&&type=&text/x-jquery-tmpl&&&&
&&&&&tr&class=&title&&&td&${$item.embolden($item.data.Name)}&/td&&/tr&&
&/script&&
&table&&tbody&id=&movieList&&&/tbody&&/table&&
var&formatHelpers&=&{&&
&&&&embolden:&function(i)&{&
&&&&&&&&return&&*&&+&i&+&&*&;&
var&movies&=&[&
&&&&{&Name:&&The&Red&Violin&,&Director:&&Fran&ois&Girard&&},&
&&&&{&Name:&&Eyes&Wide&Shut&,&Director:&&Stanley&Kubrick&&},&
&&&&{&Name:&&The&Inheritance&,&Director:&&Mauro&Bolognini&&}&
$(&&#movieTemplate&).tmpl(movies,&formatHelpers).appendTo(&#movieList&);&
支持键盘 ←　→jquery.tmpl.js 模板引擎的使用方法_Javascript教程-织梦者
当前位置:&>&&>& > jquery.tmpl.js 模板引擎的使用方法
jquery.tmpl.js 模板引擎的使用方法
本文将为关注织梦者的朋友提供的是的jquery.tmpl.js 模板引擎用法相关教程，具体实例代码请看下文:
&script src=&/js/jquery.tmpl.min.js&&&/script&
&script type=&text/x-jquery-tmpl& id=&tmpl&&
&h5&&a href=&/news/Detail/${NewsId}&&${Title}&/a&&/h5&
&p&&a href=&/news/Detail/${NewsId}&&${Introduce}&/a&&/p&
&em&${PTime}&/em&&span&${ReadTimes}&/span&
&ul class=&news_ul& id=&NewContent&&&/ul&
//使用模板render html,生成标签
var divImgs = $(&#tmpl&).tmpl(jsonObj);//ps: jsonObj为ajax异步返回的对象字符串,如 mvc里 Json(List&& ...);
//把标签加入父元素
$(&#NewContent&).append(divImgs);
一个简单的例子就完成了.
这个是早就知道的.今天写这个是因为一个不常用的方法:
如果json结果里有新闻细节:类似 &p&&h3&我是新闻细节&/h3&&/p&.
模板里用 ${...}的语法是渲染出来的是字符串,'&p&&h3&我是新闻细节&/h3&&/p&',而不是 为h3的标题.
那么,就要使用第二种语法:
&script type=&text/x-jquery-tmpl& id=&tmpl&&
&h5&${Title}&/h5&
{{html Details}}
这么写,得到的结果才是 为h3的 '我是新闻细节'.类似 asp.net mvc中的 @Html.Raw(str);
通过本文的学习希望对您了解和学习jQuery编程的相关知识有一些好的帮助.感谢关注织梦者.我们将为您收集更多更好的jQuery教程.
这些内容可能对你也有帮助
更多可查看Javascript教程列表页。
猜您也会喜欢这些文章JQuery中tmpl模版 - hongniu的日志 单片机论坛
JQuery中tmpl模版
已有 441 次阅读 17:02
& & & &本来双休的今天计算一大早起来去图书馆的，但是由于昨天第一次使用tmpl模版有一点点小问题没有解决，所以计划临时变更。大约九点多到公司、第一件事打卡，不是为了4个小时才给的10元加班费。只是不想让自己白白浪费这一天。& & & & 其实不使用tmpl模版也可以实现我想要的效果，只是相对麻烦一些并且后台维护比较困难。再者就是如果不去挑战困难那还有什么意义那？一个程序员要善于利用工具、Google、百度这些搜索引擎永远都是我们的利器！& & & &&先简述一下我想要的效果：&&&&&& & & &&&&&&&
一个页面上有一个【查询】按钮、一个【时间控件】根据不同的条件从数据库中检索数据并以【table】的方式展示到前台。当然，为了更好的用户体验
（PS：不对、我懂用户体验吗？？？算了这个主题不是纠结这个问题。。。）需要使用Ajax异步刷新。听上去有没有很高尚大。。。后台的数据源是用
MSSQL 函数写的，返回值为一个【DataTable】。&&&&&& & tmpl大致实现流程：&&&&& & &&&&&&&&1、下载并导入【tmpl】【Jquery】文件&&&&& & 2、编写【tmpl】模版&&&&& & 3、异步获取数据并绑定数据源&&&&& & 4、美化、隔行换色(JQuery实现)&&&&&& & 具体实现：&&&&& & 1、下载导入【tmpl】、【My97&DatePicker】与【Jquery】文件& & & & &&script src="../Scripts/jquery-1.9.1.min.js" type="text/javascript"&&/script&& && & & &script src="../Plugs/My97DatePicker/WdatePicker.js" type="text/javascript"&&/script&&&&&&& & &script src="../Scripts/jquery.tmpl.min.js" type="text/javascript"&&/script&&&&&& & 2、&编写模版并设置绑定数据字段&&&&&&&&&script id="tmpl_Content" type="text/x-jquery-tmpl"&& & & & &&&&&&&&&tr&& & & & &&&&&&&&&td&&label id="{{= CustomerId}}"&{{= CustomerName}}&/label&&/td& & // 客户& & & & &&&&&&&&&td&&label id="{{= ProductId}}"&{{= ProductName}}&/label&&/td& & &// 产品& & & & &&&&&&&&&td&&label&{{= UnitPrice}}&/label&&/td& & & &// 单价& & & & &&&&&&&&&td&&label&{{= SingleWeight}}&/label&&/td& & // 重量& & & & &&&&&&&&&td&&label id="{{= TransportId}}"&{{= AllNumber}}&/label&&/td& & & &// 总数& & & &&&&&&&&& &td&&label&{{= AllPrice}}&/label&&/td& & & & // 总金额& & & &&&&&&&&& &td&&label&{{= AllWeight}}&/label&&/td& & & &// 总重量& & & &&&&&&&&& &td&&input type="text" style="width: 50" id="text_Number" value="{{= EndNumber}}" /&&/td& // 结账数& & & &&&&&&&&& &td&&label&{{= AllNumber-EndNumber}}&/label&&/td& & // 差异数& & &&&&&&&&& & &td&&label&{{= (AllNumber-EndNumber)*UnitPrice}}&/label&&/td& &// 差异金额& & & &&&&&&&&& &/tr&& &&&&&&&&& &/script&& & & & 注：其中红色标出的则是绑定数据源时的字段名称，最后两个绑定是绑定多个值的计算结果，开始的时候迷惑了。后来想了想【{{ }}】只是绑定字段的格式，而里面的【AllNumber】才是真正的数值，所以多值计算的时候只需要把【AllNumber】、【EndNumber】加减后用【{{ }}】包裹起来就可以了。原来走了很多的弯路。。。&&&&&&& & 3、设置HTML控件的JQuery事件了，直接粘贴出全部的JS代码&&&&&&&& &script type="text/javascript"&& & & &&&&& $(document).ready(function () {& & & & &&&&& & var dT = {& & & & & & &&&&& & dateFmt: 'yyyy-MM-dd'& & & & & &&&&& };& & & & & &&&&& $("#select_SelectType").bind("change", function () {& & & & & & &&&&& & var v = $("#select_SelectType").val();& & & & & & &&&&& & if (v == '0') {& & & & & & &&&&& & & & dT.dateFmt = "yyyy-MM-dd";& & & & & &&&&& & & }& & & & &&&&& & & & if (v == '1') {& & & & & & & &&&&& & & dT.dateFmt = "yyyy-MM";& & & & & & &&&&& & }& & & & & & & &&&&& $("#text_Date").val("");& & & &&&&& & & });& & & & & &&&&& $("#text_Date").click(function () {& & & & & & & &&&&& WdatePicker(dT);& & & & & &&&&& });& & &&&&& & & & $("#btn_Query").bind("click", function () {& & & & & &&&&& & & if ($("#text_Date").val() == "") {& & & & & & & &&&&& & & alert("提示：筛选时间不能为空！");& & & & & & & &&&&& & && & & & & & &&&&& & }& & & & & & & &&&&& // 遮罩层& & & & & & & &&&&& $("#div_MARKS").show();& & & & & & & &&&&& $("#t_Content").html("");& & & & & & &&&&& & $.ajax({& & & & & & & & &&&&& & type: "POST",& & & & & & & & &&&&& & url: "../PMS/AjaxSaleReport.ashx",& & & & & & & & &&&&& & data: { dQueryDate: $("#text_Date").val(), nQueryType: $("#select_SelectType").val() },& & & & & & & & &&&&& & async: true,& & & & & & & & &&&&& & success: function (data) {& & & & & & & & & & & &&&&& if (data == "-1") {& & & & & & & & & & & & & &&&&& alert("提示：根据查询条件未获取到数据！");& & & & & & & & & & &&&&& & } else {& & & & & & & & & & & & &&&&& & var e = eval('(' + data + ')');& & & & & & & & & & & & & &&&&& $("#tmpl_Content").tmpl(e).appendTo($("#t_Content"));& & & & & & & & & & & & & &&&&& // 隔行换色& & & & & & & & & & & & & &&&&& $("#t_Content tr:even").css("background-color", "White");& & & & & & & & & & & & &&&&}& & & & & & & & & & & &&&&& $("#div_MARKS").hide();& & & & & & & & & &&&&& },& & & & & & & & & & &&&&error: function () {& & & & & & & & & & & &&&&& alert("Error：与服务器通讯失败、请检测网络环境！");& & & & & & & & & & & &&&&& $("#div_MARKS").hide();& & & & & & & & & &&&&& }& & & & & & & & &&&&});& & & & & & &&&&});& & & &&&&& });& & & &&&&& function Calculation(num1, num2) {& & & & & &&&&& return (Number(num1) - Number(num2));& & & &&&&& }& &&&&& &/script&&&&&&& & 4、Ajax异步刷新数据（3中的代码已经包括，这里只是摘取部分）&&&&&&&&&&&&$.ajax({&&&&&&&&&&&&&&&&&&&&type: "POST",&&&&& & // 传输方式& & & & & & & & & & url: "../PMS/AjaxSaleReport.ashx",& & // 后台处理文件& & & & & & & & & & data: { dQueryDate: $("#text_Date").val(), nQueryType: $("#select_SelectType").val() },& & // 发送给后台的参数& & & & & & & & & & async: true,& & // 是异步处理& & & & & & & & & & success: function (data) {& & // 异步刷新成功后的回调函数& & & & & & & & & & & & if (data == "-1") {& & & & & & & & & & & & & & alert("提示：根据查询条件未获取到数据！");& & & & & & & & & & & & } else {& & & & & & & & & & & & & & var e = eval('(' + data + ')');& & & & & & & & & & & & & & $("#tmpl_Content").tmpl(e).appendTo($("#t_Content"));& & // 绑定tmpl数据源& & & & & & & & & & & & & & // 隔行换色& & & & & & & & & & & & & & $("#t_Content tr:even").css("background-color", "White");& & & & & & & & & & & & }& & & & & & & & & & & & $("#div_MARKS").hide();& & & & & & & & & & },& & & & & & & & & & error: function () {& & // 通讯失败时执行的回调函数& & & & & & & & & & & & alert("Error：与服务器通讯失败、请检测网络环境！");& & & & & & & & & & & & $("#div_MARKS").hide();& & & & & & & & & & }& & & & & & & & });&&&&&& & 注：&前面进行的都很顺利，但是在模版绑定数据时候出新了问题，并且浪费了我大部分的时间。这里需要感谢一下深圳码农——昔陌初苋 前辈以及.NET开源框架（）群中的群友门&，帮我一起研究了很久。数据源为DataTable类型，而tmpl需要的是一个Json对象，所以我在后台把DataTable拼接成一个二维数组字符串格式，例如：[{key1:"value1",key2:"value2"},{key1:"value1",key2:"value2"}]这种格式。那么问题来了，后台传给前台JS后他识别为string字符串而传入tmpl模版中不能正常绑定数据源，后来&昔陌初苋 前辈提供了一种方法【var e = eval('(' + data + ')');】再把【e】传给tmpl就可以了，这个样子tmpl已经可以正常显示数据了。见下图：&&&&& & 5、&主体功能已经实现了，简单的美化下。table隔行换色在JQuery中一句话就可以搞定了。&&&&&&&&&&&&$("#t_Content tr:even").css("background-color", "White");&& &&&&&&&&&&&&&&&嗯，大致就这些吧、图书馆我来了。。。&
作者的其他最新日志
评论 ( 个评论)
Powered by