jquery模板外掛jTemplates代替拼html

weixin_34377065發表於2013-01-09
jQueryHTML

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='編輯' onclick='EditItem("" + data[i].Id + "");'><img src='images/edit-page-purple.gif' class='marLeft20' /></a>";
            strHtml += "<a href='#' title='刪除' onclick='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)' onclick='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 onclick='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="編輯" onclick="EditItem('{$T.record.Id}');">
                    <img src="images/edit-page-purple.gif" class="marLeft20"></a>
                    <a href="#" title="刪除" onclick="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)" onclick="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 onclick="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",                    
        });	             
    });

 

相關文章