jTemplates模板 绑定事件 初探
jTemplates模板可以很方便的用于大批量的数据展示，但是在数据展示过程中往往需要对相关的数据进行操作。以下就是相应的绑定时间的代码。
<table class="datalist fixwidth" id="articlelist">
<thead>
<tr>
<th><input class="radio" type="checkbox" name="total_file" id='total_file' ></th>
<th>标题</th>
<th>栏目</th>
<th>类型</th>
<th>发布状态</th>
<th>发布时间</th>
<th>删除</th>
<th>编辑</th>
<th>复制链接</th>
<th>查看</th>
<th>发布</th>
</tr>
</thead>
<tbody id="articels">
<!--最后从服务器取到的数据就是扔在这里了-->
</tbody>
</table>
<!-- 这里是 jTemplates 嵌入模版的方法 -->
<p style="display:none"><textarea id="datas-templates" rows="0" cols="0">
<!--
{#foreach $T as record}
<tr>
<td class="option">
<input class="radio" type="checkbox" value="{$T.record.url}" name="current_file" >
</td>
<td><a href="{$T.record['url']}" target="_blank">{$T.record['title']}</a></td>
<td>{$T.record['cataloglist']}</td>
<td>{#if $T.record['type'] == 0}
新文章
{#elseif $T.record['type'] == 2}
组图
{#else}
URL
{#/if}</td>
<td>
{#if $T.record['status'] == 0}
<span style="color:red; ">未发布</span>
{#elseif $T.record['status'] == 1}
已编辑
{#elseif $T.record['status'] == 2}
<span style="color:green; ">已发布</span>
{#else}
{$T.record['status']}
{#/if}
</td>
<td>{$T.record['pub_time']}</td>
<td><a href='javascript:void(0)' ids='{$T.record.id}' names='{$T.record.title}'>删除</a></td>
<td>编辑</td>
<td><a href='javascript:void(0)' url='{$T.record.url}'>复制链接</a></td>
<td><a href="{$T.record['url']}" target="_blank">查看</a></td>
<td><a href='javascript:void(0)' url='{$T.record.url}'>发布</a></td>
</tr>
{#/for}
-->
</textarea>
</p>
在jTemplates模板中后半部分表单中的<a>标签里写入了自定义的参数并使用从后台传递过来的值进行赋值。
//文章列表
var articlelist = function(pages)
{
var pdata = {};
pdata['page'] = pages;
var p = JSON.stringify(pdata);
$.ajax(
{
url: "/api/index.php",
cache: false,
dataType: "jsonp",
data: { "m": "articles", "a": "ArticleList" ,"p":p},
success:callBackFn
});
}
var callBackFn = function(backjsondata)
{
if(backjsondata["result"] == 1)
{
var data = backjsondata["data"]["article"];
//使用模板
$("#articels").setTemplateElement("datas-templates").processTemplate(data);
$("#articels tr").each(function(){
//这里的eq()是从0开始的，之所以从1开始是因为前面有一个正常的<a>标签
//绑定删除事件
$(this).find('a').eq(1).unbind("click");
$(this).find('a').eq(1).bind("click", function(e){
//调用要操作的函数
del_article($(this).attr("ids"),$(this).attr("names"));
});
//绑定复制链接
$(this).find('a').eq(2).unbind("click");
$(this).find('a').eq(2).bind("click", function(e){
copyToClipboard($(this).attr("url"));
});
//绑定发布
$(this).find('a').eq(4).unbind("click");
$(this).find('a').eq(4).bind("click", function(e){
batch_release($(this).attr("url"));
});
//绑定多选
$("#total_file").unbind("click");
$("#total_file").click( function(){
if($('#total_file').attr('checked') == true)
{
$('input:checkbox[name="current_file"]').each(function(i) {
$(this).attr('checked',true);
});
}
else
{
$('input:checkbox[name="current_file"]').each(function(i) {
$(this).attr('checked',false);
});
}
});
});
}
}
这里的代码虽然长，但是基本的思想很简单，根据当前的<tr>标签里的<a>标签的顺序绑定相对应的事件。