jTemplates模板绑定事件初探

最新推荐文章于 2025-06-16 16:59:59 发布

最新推荐文章于 2025-06-16 16:59:59 发布 · 281 阅读

文章标签：

#jTemplates #jquery #ViewUI

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用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>标签的顺序绑定相对应的事件。