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').each(function(i) { $(this).attr('checked',true); }); } else { $('input:checkbox').each(function(i) { $(this).attr('checked',false); }); } }); }); } } 这里的代码虽然长，但是基本的思想很简单，根据当前的<tr>标签里的<a>标签的顺序绑定相对应的事件。
页:
[1]