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>标签的顺序绑定相对应的事件。