知识大全 Jquery 模板数据绑定插件的使用方法详解

Posted 2022-07-20 知

篇首语：知识的领域是无限的,我们的学习也是无限期的。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 Jquery 模板数据绑定插件的使用方法详解相关的知识，希望对你有一定的参考价值。

Jquery 模板数据绑定插件的使用方法详解 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

本篇文章是对在Jquery中模板数据绑定插件的使用方法进行了详细的分析介绍需要的朋友参考下

　　 绑定后台数据到指定模板（无嵌套内容均为后台数据原始信息前台绑定） 以通话记录页为例首先指定目标容器

复制代码代码如下: <dl id="gvRecCalls"> <dd > <p ></p> <p >被叫号码</p> <p >主叫号码</p> <p >起始时间</p> <p id="pAmount">金额($)</p> <p >时长</p> <p >区域</p> <p name=pCDRHeader>CDR ID</p> <p name=pSelectCbHeader></p> <p name=pDeleteCbHeader></p> </dd> </dl>

　　其次指定模板数据

复制代码代码如下: <dl id="RecCallsTemplate" > <dd > <p > <b ></b> </p> <span ><span >$CalledStationId</span></span> <span >$CallingStationId substr(CallingStationId indexOf("*") + )</span> <span id="Start_time" >$StartTime</span> <span >$CSSCommonJS ChangeDecimal(Revenue )</span> <span ><span >$CSSCommonJS GetTimeFormatString(RevenueTime)</span></span> <span >$Location </span> <span name=pCDRHeader >$CdrId</span> <p name=pSelectCbHeader> <input type=checkbox name=cbSelect /></p> <span name=pDeleteCbHeader> <button id="btDelete"><b>删除</b></button> </span> </dd> </dl>

　　后台进行绑定 <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); 指定模板中无通配符后台填充数据（许愿墙实现） 前台

复制代码代码如下: <div id="content"> <! 模板数据 > <div id="ItemList"> </div> <! 模板数据end > </div> <div id="ItemTemplate" > <dd> <div > <div > <div > <a href="#" id="btnTitle"><span id="item_title"></span></a> </div> <div > </div> <div id="item_person"> </div> <div id="item_date"> </div> </div> </div> </dd> </div>

　　后台进行取数据绑定绑事件等

复制代码代码如下: //获取许愿墙数据 $ get("control/controler ashx?t=" + new Date() type: hearall date: new Date() function (data) var jsonData = eval("(" + data + ")"); //alert(jsonData table[ ] 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() * + ) + " jpg"; // 的随机数 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 ) : # ) + s[m floor(m random() * )] )(Math abcdef ) var Color = getRandomColor(); $(tTr) find("#item_title") css( color Color toString()); //绑定数据 tmp_title (selectedItem data title); tmp_person (selectedItem data pubName); tmp_date (selectedItem data addDate toString() split( )[ ] replaceAll( / ) toString()); btnTitle click(function () var heart_date = ""; if (selectedItem data beginDate toString() == selectedItem data endDate toString()) heart_date = selectedItem data beginDate toString() split( )[ ] replaceAll( / ); else heart_date = selectedItem data beginDate toString() split( )[ ] replaceAll( / ) + " 至 " + selectedItem data endDate toString() split( )[ ] replaceAll( / ); $("#heart_title") (selectedItem data title); $("#heart_content") (selectedItem data content); $("#heart_date") (heart_date); $("#heart_person") (selectedItem data participator); $("#heart_contact") (selectedItem data contact); $("#heatr_puber") (selectedItem data pubName); //ShowBox this href = "#heartInfo_content"; $(this) addClass("heartInfo_inline"); $("#heartInfo_content") show(); showDialog(); ); ); );

　　 嵌套绑定（目标数据源中含有多个数组分别绑定到对应的子模板） 账单页面为例前台

复制代码代码如下: 目标容器 <span id="ProductBilling"> </span> 外层模板 <div id="ProductBillingTemplate" > <dl > <dd > <p ></p> <span ><b id="bComboName"></b> <b id="bTel"></b></span> </dd> tmpl(BillTransactions) "#BillingDetailDateTemplate" <span > tmpl(RebateInstances) "#BillingDetailDateTemplate"</span> 固定写法第一个参数为数据源中的第二个数组第二个为使用的子模板 tmpl(TopUpDetails) "#BillingDetailDateTemplate" </dl> </div> 子模板 <div id="BillingDetailDateTemplate" > <dd > <p ></p> <p >$(<span >typeof(Name) == "undefined" ? Type : Name</span>) + ":"</p> <span > 子模板是三个数据源的公共模板可能属性的名称会有不同需要判断</span> <span id="spamount" title = "=CreateDate ">$CSSCommonJS ChangeDecimal((typeof(InitialAmount) == "undefined" ? Amount : InitialAmount) )</span> <span id="spdescription">$Description</span> </dd> </div>

　　后台绑定

复制代码代码如下: 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 == " ") 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 (curAcct ComboName); bTel (curpstn); if ((n BillTransactions length + n RebateInstances length + n TopUpDetails length) == ) $(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(); ); ); cha138/Article/program/Java/JSP/201311/20069