欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery 模板數(shù)據(jù)綁定插件的使用方法詳解

 更新時(shí)間：2013年07月08日 11:36:07   作者：  
本篇文章是對(duì)在Jquery中模板數(shù)據(jù)綁定插件的使用方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
1 綁定后臺(tái)數(shù)據(jù)到指定模板（無(wú)嵌套，內(nèi)容均為后臺(tái)數(shù)據(jù)原始信息，前臺(tái)綁定）
以通話記錄頁(yè)為例：
首先指定目標(biāo)容器：
復(fù)制代碼 代碼如下:

 <dl class="box_pannel_content_filled_border none" id="gvRecCalls">
   <dd class="bg_blue">
    <p class="width_level_half_2 fl nopitch"></p>
    <p class="width_level_half_5 bold fl">被叫號(hào)碼</p>
    <p class="width_level_half_5 bold fl">主叫號(hào)碼</p>
    <p class="width_level_half_6 bold fl">起始時(shí)間</p>
    <p class="width_level_half_4 bold fl" id="pAmount">金額($)</p>
    <p class="width_level_half_4 bold fl">時(shí)長(zhǎng)</p>
    <p class="width_level_half_10 bold fl">區(qū)域</p>
    <p class="width_level_half_4 bold fl nopitch" name="pCDRHeader">CDR ID</p>
    <p class="width_level_half_2 fl none" name="pSelectCbHeader"></p>
    <p class="width_level_half_2 fr none" name="pDeleteCbHeader"></p>
   </dd>
</dl>

其次指定模板數(shù)據(jù)：
復(fù)制代碼 代碼如下:

<dl id="RecCallsTemplate" >
<dd >
<p class="center width_level_half_2 fl nopitch">
<b class="${CallMode == 1 ? 'icon_call_in' : 'icon_call_out'}" ></b>
</p>
<span class="width_level_half_5 fl"><span style="color:#FF0000;">${CalledStationId}</span></span>
<span class="width_level_half_5 fl">${CallingStationId.substr(CallingStationId.indexOf("*") + 1)}</span>
<span class="width_level_half_6 fl"  id="Start_time" >${StartTime}</span>
<span class="width_level_half_4 fl">${CSSCommonJS.ChangeDecimal(Revenue,3)}</span>
<span class="width_level_half_4 fl"><span style="color:#FF0000;">${CSSCommonJS.GetTimeFormatString(RevenueTime)}</span></span>
<span class="width_level_half_10 fl">${Location} </span>
<span class="width_level_half_4 fl nopitch" name="pCDRHeader" >${CdrId}</span>
<p class="right width_level_half_2 fr none" name="pSelectCbHeader">
<input  type="checkbox" name="cbSelect" class="label" /></p>
<span class="fl none" name="pDeleteCbHeader">
<button class="crm_btn norm" id="btDelete"><b>刪除</b></button>
</span>
</dd>

</dl>

后臺(tái)進(jìn)行綁定：
 <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
function RenderTemplatefunction(container, template, data) {
    $(template).tmpl(data).appendTo(container); //原始方法
};
 CSSCommonJS.RenderTemplatefunction($(t.panelID).find("#gvRecCalls"), $(t.panelID).find("#RecCallsTemplate"), result.CdrData);
2 指定模板中無(wú)通配符，后臺(tái)填充數(shù)據(jù)（許愿墻實(shí)現(xiàn)）
前臺(tái)：
復(fù)制代碼 代碼如下:

 <div id="content">
                    <!-- 模板數(shù)據(jù)-->
                    <div id="ItemList">
                    </div>
                    <!-- 模板數(shù)據(jù)end-->
                </div>
 <div id="ItemTemplate" style="display: none;">
        <dd>
            <div class="items">
                <div class="bg">
                    <div class="info">
                        <a href="#" id="btnTitle"><span id="item_title"></span></a>
                    </div>
                    <div class="k">
                    </div>
                    <div class="person" id="item_person">
                    </div>
                    <div class="date" id="item_date">
                    </div>
                </div>
            </div>
        </dd>
    </div>

后臺(tái)進(jìn)行取數(shù)據(jù)綁定，綁事件等。
復(fù)制代碼 代碼如下:

    //獲取許愿墻數(shù)據(jù)
    $.get("control/controler.ashx?t=" + new Date(), { type: 'heartwall', date: new Date() }, function (data) {
        var jsonData = eval("(" + data + ")");
        //alert(jsonData.table[1].title);
        RenderTemplatefunction($("#ItemList"), $("#ItemTemplate"), jsonData.table);
        $("#ItemList").children("dd").each(function (index) {
            var tTr = this;
            var selectedItem = $.tmplItem(this);
            var tmp_title = $(tTr).find("#item_title");
            var tmp_person = $(tTr).find("#item_person");
            var tmp_date = $(tTr).find("#item_date");
            var btnTitle = $(tTr).find("#btnTitle");
            var bgNumber = "it" + Math.floor(Math.random() * 10 + 9) + ".jpg"; //1-10的隨機(jī)數(shù)
            var bg = $(tTr).find(".bg");
            bg.css('background-image', "url('img/bg/" + bgNumber + "')");
            var getRandomColor = function () {
                return (function (m, s, c) {
                    return (c ? arguments.callee(m, s, c - 1) : '#') +
                        s[m.floor(m.random() * 16)]
                })(Math, '0123456789abcdef', 5)
            }
            var Color = getRandomColor();
            $(tTr).find("#item_title").css('color', Color.toString());
            //綁定數(shù)據(jù)
            tmp_title.html(selectedItem.data.title);
            tmp_person.html(selectedItem.data.pubName);
            tmp_date.html(selectedItem.data.addDate.toString().split(' ')[0].replaceAll('/', '-').toString());
            btnTitle.click(function () {
                var heart_date = "";
                if (selectedItem.data.beginDate.toString() == selectedItem.data.endDate.toString()) {
                    heart_date = selectedItem.data.beginDate.toString().split(' ')[0].replaceAll('/', '-');
                }
                else {
                    heart_date = selectedItem.data.beginDate.toString().split(' ')[0].replaceAll('/', '-') + " 至 " +
selectedItem.data.endDate.toString().split(' ')[0].replaceAll('/', '-');
                }
                $("#heart_title").html(selectedItem.data.title);
                $("#heart_content").html(selectedItem.data.content);
                $("#heart_date").html(heart_date);
                $("#heart_person").html(selectedItem.data.participator);
                $("#heart_contact").html(selectedItem.data.contact);
                $("#heatr_puber").html(selectedItem.data.pubName);
                //ShowBox
                this.href = "#heartInfo_content";
                $(this).addClass("heartInfo_inline");
                $("#heartInfo_content").show();
                showDialog();
            });
        });
    });

3 嵌套綁定 （目標(biāo)數(shù)據(jù)源中含有多個(gè)數(shù)組，分別綁定到對(duì)應(yīng)的子模板）
賬單頁(yè)面為例：
前臺(tái)：
復(fù)制代碼 代碼如下:

目標(biāo)容器
<span class="width_level_0 fl nopitch" id="ProductBilling">

                                    </span>
外層模板
<div id="ProductBillingTemplate" class="none">
<dl class="box_pannel_content_filled_special">
                                         <dd class="border_none_special_top">
                                             <p class="width_level_half_3 fl"></p>
                                                <span class="width_level_9 fl"><b class="bold" id="bComboName"></b> <b id="bTel"></b></span>
                                            </dd>
                                         {{tmpl(BillTransactions) "#BillingDetailDateTemplate"}}
                                         <span style="color:#FF0000;">   {{tmpl(RebateInstances) "#BillingDetailDateTemplate"}}</span>  固定寫(xiě)法，第一個(gè)參數(shù)為數(shù)據(jù)源中的第二個(gè)數(shù)組，第二個(gè)為使用的子模板
                                            {{tmpl(TopUpDetails) "#BillingDetailDateTemplate"}}
                                        </dl>
</div>
子模板
<div id="BillingDetailDateTemplate" class="none">
<dd class="border_none_special">
    <p class="width_level_half_3 fl"></p>
    <p class="width_level_half_12 fl">${(<span style="color:#FF0000;">typeof(Name) == "undefined" ? Type : Name</span>) + ":"}</p> <span style="color:#FF0000;">
子模板是三個(gè)數(shù)據(jù)源的公共模板，可能屬性的名稱會(huì)有不同，需要判斷</span>
    <span class="width_level_1 fl" id="spamount" title = "{{= CreateDate }}">${CSSCommonJS.ChangeDecimal((typeof(InitialAmount) == "undefined" ?
&nbsp;Amount : InitialAmount), 2)}</span>
    <span class="width_level_5 fl" id="spdescription">${Description}</span>
</dd>
</div>

后臺(tái)綁定
復(fù)制代碼 代碼如下:

CSSCommonJS.RenderTemplatefunction($(t.panelID).find("#ProductBilling"), $(t.panelID).find("#ProductBillingTemplate"), billingDetail);
    //
    $(t.panelID).find("#ProductBilling").children("dl").each(function (index) {
        var tTr = this;
        var selectedItem = $.tmplItem(this);
        var bComboName = $(tTr).find("#bComboName");
        var bTel = $(tTr).find("#bTel");
        var n = selectedItem.data;
        var curAcct = CSSCommonJS.GetCurrentUser(t.masterUser, n.AccountId); // n.BusinessAccountId);
        var curpstn = "";
        if (curAcct.AccountType == CSSAccountType.BB) {
            if (curAcct.DID) {
                if (curAcct.CountryCode == "1") {
                    curpstn = "(Tel:" + CSSCommonJS.FormatUSCAPhone(curAcct.DID) + ")";
                }
                else {
                    curpstn = "(Tel:" + curAcct.DID + ")";
                }
            }
            else if (curAcct.BBNumber) {
                curpstn = "(" + curAcct.BBNumber + ")";
            }
        }
        else if (curAcct.AccountType == CSSAccountType.HY) {
            curpstn = "(" + curAcct.HYNumber + ")";
        }
        else if (curAcct.AccountType == CSSAccountType.DSL) {
            curpstn = "(" + curAcct.DSLNumber + ")";
        }
        bComboName.html(curAcct.ComboName);
        bTel.html(curpstn);
        if ((n.BillTransactions.length + n.RebateInstances.length + n.TopUpDetails.length) == 0) {
            $(tTr).hide();
        }
        $(tTr).find(".border_none_special").each(function (spindex) {
            var tdd = this;
            var selectedItem = $.tmplItem(this);
            var spamount = $(tdd).find("#spamount");
            var spdescription = $(tdd).find("#spdescription");
            if (t.currentAdmin.Valid) {
                spamount.attr("title", spamount.attr("title").formatDate(t.masterUser, ""));
            }
            else {
                spdescription.hide();
            }
        });
  });

嵌套綁定是模板自動(dòng)完成的。

相關(guān)文章

  • jQuery增加和刪除表格項(xiàng)目及實(shí)現(xiàn)表格項(xiàng)目排序的方法

    jQuery增加和刪除表格項(xiàng)目及實(shí)現(xiàn)表格項(xiàng)目排序的方法

    jQuery對(duì)表格的操作是老生常談的問(wèn)題了,各種插件也到處都是,這里我們還是來(lái)從技術(shù)著手jQuery增加和刪除表格項(xiàng)目及實(shí)現(xiàn)表格項(xiàng)目排序的方法:
    2016-05-05
  • jQuery Mobile彈出窗、彈出層知識(shí)匯總

    jQuery Mobile彈出窗、彈出層知識(shí)匯總

    本文給大家介紹jquery mobile彈出窗、彈出層知識(shí)匯總，涉及到j(luò)query mobile彈出相關(guān)知識(shí)，本文寫(xiě)的非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
    2016-01-01
  • jquery圖形密碼實(shí)現(xiàn)方法

    jquery圖形密碼實(shí)現(xiàn)方法

    這篇文章主要介紹了jquery圖形密碼實(shí)現(xiàn)方法,涉及jQuery操作圖形特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-03-03
  • jquery 經(jīng)典動(dòng)畫(huà)菜單效果代碼

    jquery 經(jīng)典動(dòng)畫(huà)菜單效果代碼

    JS·經(jīng)典·炫彩菜單(動(dòng)畫(huà)效果) for jquery
    2010-01-01
  • jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例

    jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例

    這篇文章主要介紹了jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件,結(jié)合實(shí)例形式詳細(xì)分析了jQuery基于移動(dòng)端的圖片縮放功能組件實(shí)現(xiàn)原理、步驟、核心代碼及使用技巧,需要的朋友可以參考下
    2020-05-05
  • Jquery讀取URL參數(shù)小例子

    Jquery讀取URL參數(shù)小例子

    讀取URL參數(shù)的方法各種各樣不過(guò)大同小異，下面本文使用jquery來(lái)實(shí)現(xiàn)讀取URL參數(shù)示例，感興趣的朋友可以練練手哦
    2013-08-08
  • jQuery animate easing使用方法圖文詳解

    jQuery animate easing使用方法圖文詳解

    這篇文章主要介紹了jQuery animate easing使用方法詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2016-06-06
  • jqueryMobile使用示例分享

    jqueryMobile使用示例分享

    這里是本人學(xué)習(xí)jQuery Mobile的過(guò)程，現(xiàn)在將學(xué)習(xí)過(guò)程中的實(shí)例一一展現(xiàn)出來(lái)，希望能幫到更多的新手。本系列中實(shí)例都經(jīng)過(guò)了本人的親自測(cè)試。
    2016-01-01
  • JQUERY 實(shí)現(xiàn)窗口滾動(dòng)搜索框?？啃Ч?類(lèi)似滾動(dòng)停靠)

    JQUERY 實(shí)現(xiàn)窗口滾動(dòng)搜索框?？啃Ч?類(lèi)似滾動(dòng)停靠)

    由于分頁(yè)的效果卻又是非常令人厭惡的。滾動(dòng)條無(wú)疑是一種簡(jiǎn)單而又高效的一種方式。而這里，處于對(duì)用戶體驗(yàn)的考慮，我使用Jquery實(shí)現(xiàn)了一種類(lèi)似滾動(dòng)停靠的效果，感興趣的朋友可以參考下哈
    2013-03-03
  • jquery.mousewheel實(shí)現(xiàn)整屏翻屏效果

    jquery.mousewheel實(shí)現(xiàn)整屏翻屏效果

    jQuery Mousewheel 用于添加跨瀏覽器的鼠標(biāo)滾輪支持。 mousewheel事件的處理函數(shù)有一點(diǎn)小小的變化，它除了第一個(gè)參數(shù)event 外，還接收到第二個(gè)參數(shù)delta。通過(guò)參數(shù)delta可以獲取鼠標(biāo)滾輪的方向和速度。
    2015-08-08

最新評(píng)論