有时我们希望 Repeater 中显示的信息是根据字段的内容来确定的, 而不是直接显示字段本身的值, 今天将为大家说明如何通过字段表达式来处理绑定的字段.
由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:
http://code.google.com/p/zsharedcode/wiki/AjaxReturnJSON
如果, 有不明白的问题, 请先阅读 30 分钟掌握无刷新 Repeater.
请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码
本文中所包含的内容如下:
* 准备
* 使用范围
* 简单绑定
* 转换绑定
* 格式化日期字段
* 使用 jQuery 代替$
* 根据字段设置样式
示例图片:
准备
请参照 http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc 中的准备.
使用范围
可以在 ItemTemplate/UpdatedItemTemplate/InsertedItemTemplate/RemovedItemTemplate/EditItemTemplate 模板中绑定字段.
可以将字段绑定在标签的属性中或者作为标签的内容.
简单绑定
可以使用 #{<字段名>} 来绑定字段, 比如:
<ItemTemplate>
<td>
#{bookname}
td>
<td>
<strong>评价:strong> <span class&＃61;"rank rank#{rank}">span>
td>
ItemTemplate>
上面的例子中, 将字段 bookname 绑定为标签的内容, 将 rank 字段绑定在标签的属性 class 中.
转换绑定
使用 #{<字段名>[,<字段表达式>]} 来转换字段中的值, 然后输出, 比如:
<ItemTemplate>
<td>
<strong>折扣:strong>
#{discount,Math.floor(# * 100) / 10} 折
#{discount,convertDiscount(#)}
td>
ItemTemplate>
在字段表达式中, 使用 # 号来表示被绑定的字段. 上面代码中的 discount 字段分别通过一个 Javascript 表达式和一个函数来转换了字段的值并输出, Javascript 函数如下:
<script type&＃61;"text/Javascript">
function convertDiscount(discount) {
return discount >&＃61;0.7?&＃39;清仓啦&＃39; : &＃39;减价啦&＃39;;
}
script>
格式化日期字段
对于采用默认参数返回的 JSON, 日期格式的字段的返回值可能类似于 "\/Date(xxxxxxxxxx)\/" 的字符串, 可以通过 jQuery.panzer.formatDate 函数来格式化日期, 或者使用 jQuery.panzer.convertToDate 将 "\/Date(xxxxxxxxxx)\/" 格式的字符串转化为日期类型, 例如:
<ItemTemplate>
<td>
<strong>出版日期:strong>
<span class&＃61;"publishdate">
#{publishdate,jQuery.panzer.formatDate(#,&＃39;yyyy年M月d号&＃39;)}
span>
td>
ItemTemplate>
函数 jQuery.panzer.formatDate 的第一个参数为 Date 类型的 Javascript 变量或者格式为 "\/Date(xxxxxxxxxx)\/" 的字符串. 第二个参数为用于格式化的字符串, 这类似于 .NET 中的 DateTime 类型的 ToString 方法, 例如:
<script type&＃61;"text/Javascript">
var date &＃61;new Date(2011, 0, 1, 20, 1, 3);
// 2011 年 1 月 1 号, 20 时 1 分 3 秒
$.panzer.formatDate(date,&＃39;y年&＃39;); // 1年
$.panzer.formatDate(date,&＃39;yy年&＃39;); // 11年
$.panzer.formatDate(date,&＃39;yyyy&＃39;); // 2011
$.panzer.formatDate(date,&＃39;M月&＃39;); // 1月
$.panzer.formatDate(date,&＃39;MM月&＃39;); // 01月
$.panzer.formatDate(date,&＃39;yyyy-MM&＃39;);
// 2011-01
$.panzer.formatDate(date,&＃39;d号&＃39;); // 1号
$.panzer.formatDate(date,&＃39;dd号&＃39;); // 01号
$.panzer.formatDate(date,&＃39;yyyy-MM-dd&＃39;);
// 2011-01-01
$.panzer.formatDate(date,&＃39;H时&＃39;); // 20时
$.panzer.formatDate(date,&＃39;HH时&＃39;); // 20时
$.panzer.formatDate(date,&＃39;yyyy-MM-dd HH&＃39;);
// 2011-01-01 20
$.panzer.formatDate(date,&＃39;h时&＃39;); // 8时
$.panzer.formatDate(date,&＃39;hh时&＃39;); // 08时
$.panzer.formatDate(date,&＃39;yyyy-MM-dd hh&＃39;);
// 2011-01-01 08
$.panzer.formatDate(date,&＃39;m分&＃39;); // 1分
$.panzer.formatDate(date,&＃39;mm分&＃39;); // 01分
$.panzer.formatDate(date,&＃39;yyyy-MM-dd hh:mm&＃39;);
// 2011-01-01 08:01
$.panzer.formatDate(date,&＃39;s秒&＃39;); // 3秒
$.panzer.formatDate(date,&＃39;ss秒&＃39;); // 03秒
$.panzer.formatDate(date,&＃39;yyyy-MM-dd hh:mm:ss&＃39;);
// 2011-01-01 08:01:03
script>
使用 jQuery 代替 $
在字段表达式中应该使用 jQuery 来代替 $, 以防止由于压缩脚本而产生的问题.
根据字段设置样式
如果需要根据字段的值来显示不同的样式, 可以将字段绑定在 class 属性中, 比如:
<ItemTemplate>
<td>
<strong>评价:strong>
#{rank}
<span class&＃61;"rank rank#{rank}">span>
td>
ItemTemplate>
在页面开始处定义了一些 rank 的样式:
<style type&＃61;"text/css">
.rank
{
background-color: #cc0000;
height: 15px;
display: inline-block;
}
.rank1
{
width: 10px;
}
.rank2
{
width: 30px;
}
.rank3
{
width: 50px;
}
.rank4
{
width: 70px;
}
.rank5
{
width: 90px;
}
style>
示例中 rank 字段中可能会是 1 到 5, 因此样式也定义了 rank1 到 rank5.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
示例代码下载: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar.
实际过程演示: http://www.tudou.com/programs/view/rwruM87J20s/, 建议全屏观看.
京公网安备 11010802041100号