首頁 > web前端 > js教程 > 主體

Jquery 模板資料綁定外掛程式的使用方法詳解_jquery

WBOY
發布: 2016-05-16 17:29:38
原創
1630 人瀏覽過
1 綁定後台資料到指定範本(無嵌套,內容均為後台資料原始訊息,前台綁定)
以通話記錄頁為例:
先指定目標容器:
複製程式碼 程式碼如下:

 

   


   

5 bold do 🎜>   

來電者號


   

起始時間

金額($)
   

長度


   

CDR ID


   


  


其次指定範本資料:


複製程式碼
程式碼如下:
🎜>



${CalledStationId}
${ CallingStationId.substr(CallingStationId.indexOf("*") 1)}
${StartTime}
${CSSCommonJS.ChangeDecimal(Revenue,3)}
SvonForm (RevenueTime)}
${Location}
${CdrId}











後台進行綁定:
 
function RenderTemplatefunction(container, template, data) {

    $(template).tmpl(data).appendTo(container); //原始方法
};
 CSSCommonJS.RenderTemplatefunction($(t.panelID).find("#gvRecCalls"), $(t.panelID).find("#RecCallsTemplate"), result.CdrData);

2 指定模板中無通配符,後台填充數據(許願牆實現)

前台:


複製代碼
程式碼如下:

 

                  
              

 



後台進行取得資料綁定,綁定事件等。 🎜>複製程式碼


程式碼如下:

    //取得許願牆資料
    $.get("control/controler.ashx?t=" new Date(), { type: 'heartwall', date: new Date() }, function (data) {
        var jsonData = eval("(" data ")");
        //alert(jsonData.table[1].title);        $("#ItemList").children("dd").each(function (index) {
  var selectedItem = $.tmplItem(this);
            var tmp_title = $(tTr).find("#item_title");
   ).find("#item_title");
 son");
            var tmp_date = $(tTr).find("#item_date");
              var bgNumber = "it" Math.floor(Math .random() * 10 9) ".jpg"; //1-10的隨機數
            var bg = $(tTr).find(".bg"); image', "url('img/bg/" bgNumber "')");
            var getRandomColor = function () {                    return (c ? ment.callee(m, s, c - 1) : '#')
                            })(數學, '0123456789abcdef', 5)
            }
            var Color = getRandom   ', Color.toString());
            // 綁定資料
            tmp_title.html(selectedItem.data.title);
          mp_date.html(selectedItem.data.addDate.toString().split(' ') [0].replaceAll('/', '-').toString());
            btnTitle.click(function () {
                if (selectedItem.data.beginDate .toString() == selectedItem.data.endDate.toString()) {
                    heart_date = selectedItem.data.m.Date.    heart_date = selectedItem.data.m.Date. );
                }
              _date = selectedItem.data.beginDate.toString().split(' ')[0].replaceAll('/', '-') " 至"
selectedItem.data.endDate.toString().split(' ')[0].replaceAll('/', '-');
                }
                $("#heart_title").html(selectedItem.data.title);
    🎜>                $("#heart_date") .html(heart_date);
                $("#heart_person").html(selectedItem.data.participator html(selectedItem.data.contact);
                $ ("#heatr_puber").html(selectedItem.data.pubName);
                //ShowBox
                  $(this).addClass("heartInfo_inline");
                $("#heartInfo_content").show();
           });
        });
    });



3 嵌套綁定(目標資料來源中含有多個數組,分別綁定到對應的子模板)
帳單頁為例:
前台:


複製程式碼
程式碼如下:

目標容器


              border_none_special_top">
                            fl "
                               class="width_level_9 fl">

               
                            BillTransactions) "#BillingDetailDateTemplate"}}
                        pl(RebateInstances) "#BillingDetailDateTemplate"}}  固定,第一個參數為資料來源中的第二個批次,第二個為使用的子範本
                            >                                     >


   

${(typeof(Name) == "未定義" ? 類型:名稱) ":"}
子模板是三個資料來源的公共模板,屬性的名稱可能會有所不同,需要判斷

    ${CSSCommonJS.ChangeDecimal((typeof(InitialAmount) == "未定義" ?
 金額:初始金額), 2)}

    ${}描述




後台綁定




複製程式碼


複製碼>

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();
            }
        });
  });

嵌套绑定是模板自动完成的。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板