jquery模板插件jTemplates代替拼html

最新推荐文章于 2018-12-04 21:43:00 发布

gdjlc

最新推荐文章于 2018-12-04 21:43:00 发布

阅读量9.1k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/gdjlc/article/details/8479073

版权

jQuery 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了jQuery的模板插件jTemplates，通过提供更灵活的模板定义方式，替代传统的手动拼接HTML代码。利用jTemplates，可以在`foreach`操作符中访问特定迭代变量，如元素索引、ID、是否为第一项等。示例展示了如何判断并处理非第一行的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery的jTemplates插件允许定义一个显示模板，在展现数据时根据选择的模板来动态生成。

jQuery的jTemplates官方网站：http://jtemplates.tpython.com/

原先的拼html代码如下：

$("#Content").html("");
    $.getJSON("ajax/item.ashx", { action: 'list', action2: 'getPerPageData', type: $("#hidType").val(), ym: $("#hidYM").val(), showType: $("#sShowType").val(), searchVal: $("#txtSearch").val(), pagesize: $("#sPageSize").val(), index: index, t: Math.random() }, function(data) {
        $.each(data, function(i) {
            var strHtml = "<table id='tbItemId" + data[i].Id + "' class='mytable' style='table-layout:fixed' cellspacing='0'>";
            strHtml += "<tr><td class='alt'>";
            strHtml += "<input type='hidden' id='hidsType" + data[i].Id + "' value='" + data[i].TypeId + "' />";
            strHtml += "<span id='spTitle" + data[i].Id + "'>" + data[i].Title + "</span>";
            strHtml += "<span class='right'>";
            strHtml += "<a href='#' title='编辑' οnclick='EditItem("" + data[i].Id + "");'><img src='images/edit-page-purple.gif' class='marLeft20' /></a>";
            strHtml += "<a href='#' title='删除' οnclick='DelItem("" + data[i].Id + "");'><img src='images/delete-page-purple.gif' class='marLeft20' /></a>";
            strHtml += "<a id='aText" + data[i].Id + "' class='markSelectBox marLeft20' href='javascript:void(0)' οnclick='javascript:SetId("" + data[i].Id + "");'>" + data[i].TypeName + "<img src='images/arrow.gif' style='margin:1px 0pt 0pt 4px;' align='absmiddle' /></a>";
            strHtml += "</span></td></tr>";
            strHtml += "<tr><td>创建时间：" + data[i].CreateOn + "<span class='right'>最后修改时间：" + data[i].ModifiedOn + "</span></td></tr>";
            strHtml += "<tr><td id='tdBody" + data[i].Id + "' style='word-break:break-all;word-wrap:break-word;'><div id='divIntro" + data[i].Id + "'>" + data[i].Intro + "</div><div style='display:none;' id='divBody" + data[i].Id + "'>" + data[i].Body + "</div><a οnclick='javascript:Show("" + data[i].Id + "")' href='javascript:void()'>详细...</a></td></tr>";
            strHtml += "</table>";
            $("#Content").append(strHtml);
        })
        $(".markSelectBox").powerFloat({
            width: 85,
            eventType: "click",
            target: ".qmpanel_shadow",                    
        });	             
});

有了jTemplates，可以更灵活的定义一个模板：

<div id="Content">
</div>            
<textarea id="template" style="display:none">
{#foreach $T as record}
<table id="tbItemId{$T.record.Id}" class="mytable" style="table-layout: fixed" cellspacing="0">
    <tbody>
        <tr>
            <td class="alt">
                <input id="hidsType{$T.record.Id}" value="{$T.record.TypeId}" type="hidden" />
                    <span id="spTitle{$T.record.Id}">{$T.record.Title}</span>
                    <span class="right"><a href="#" title="编辑" οnclick="EditItem('{$T.record.Id}');">
                    <img src="images/edit-page-purple.gif" class="marLeft20"></a>
                    <a href="#" title="删除" οnclick="DelItem('{$T.record.Id}');">
                    <img src="images/delete-page-purple.gif" class="marLeft20"></a>
                    <a id="aText{$T.record.Id}" class="markSelectBox marLeft20" href="javascript:void(0)" οnclick="javascript:SetId('{$T.record.Id}');">备忘录
                    <img src="images/arrow.gif" style="margin: 1px 0pt 0pt 4px;" align="absmiddle"></a></span>
            </td>
        </tr>
        <tr>
            <td>
                创建时间：{$T.record.CreateOn}<span class="right">最后修改时间：{$T.record.ModifiedOn}</span>
            </td>
        </tr>
        <tr>
            <td id="tdBody{$T.record.Id}" style="word-break: break-all; word-wrap: break-word;">
                <div id="divIntro{$T.record.Id}">
                    {$T.record.Intro}
                </div>
                <div style="display: none;" id="divBody{$T.record.Id}">
                    {$T.record.Body}
                </div>
                <a οnclick="javascript:Show('{$T.record.Id}')" href="javascript:void()">
                    详细...</a>
            </td>
        </tr>
    </tbody>
</table>
{#/for}
</textarea>

调用：

    $("#Content").html("");
    $.getJSON("ajax/item.ashx", { action: 'list', action2: 'getPerPageData', type: $("#hidType").val(), ym: $("#hidYM").val(), showType: $("#sShowType").val(), searchVal: $("#txtSearch").val(), pagesize: $("#sPageSize").val(), index: index, t: Math.random() }, function(data) {
        $("#Content").setTemplateElement("template", null, {filter_data: false});
        $("#Content").processTemplate(data); 
        $(".markSelectBox").powerFloat({
            width: 85,
            eventType: "click",
            target: ".qmpanel_shadow",                    
        });	             
    });

在“foreach”操作符中，还可以定义以下的变量(参考这里)：

$index - index of the element in the table
$iteration - ID of the iteration (the next number begins from 0)
$first - is this the first iteration?
$last - is this the last iteration?
$total - the total number of iterations

使用例子：
{#foreach $T.rows as record}
        {$T.record$index}
        {$T.record$iteration}
{$T.record$first}
        {$T.record$last}
        {$T.record$total}
{#/for}

结果为：
0 0 true false 5
1 1 false false 5
2 2 false false 5
3 3 false false 5
4 4 false true 5

判断是否第一行：
{#if $T.record$first == false}
不是第一行
{#/if}