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

论坛 期权论坛     
niminba   2021-5-15 20:54   104   0
<strong>1 绑定后台数据到指定模板(无嵌套,内容均为后台数据原始信息,前台绑定)<br></strong>以通话记录页为例:<br>首先指定目标容器:<br><div class="codetitle"><span><a class="copybut" data="95377" id="copybut95377"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code95377"><br>&nbsp;&lt;dl class="box_pannel_content_filled_border none" id="gvRecCalls"&gt;<br>&nbsp;&nbsp; &lt;dd class="bg_blue"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;p class="width_level_half_2 fl nopitch"&gt;&lt;/p&gt;<br>&nbsp;&nbsp;&nbsp; &lt;p class="width_level_half_5 bold fl"&gt;被叫号码&lt;/p&gt;<br>&nbsp;&nbsp;&nbsp; &lt;p class="width_level_half_5 bold fl"&gt;主叫号码&lt;/p&gt;<br>&nbsp;&nbsp;&nbsp; &lt;p class="width_level_half_6 bold fl"&gt;起始时间&lt;/p&gt;<br>&nbsp;&nbsp;&nbsp; &lt;p class="width_level_half_4 bold fl" id="pAmount"&gt;金额($)&lt;/p&gt;<br>&nbsp;&nbsp;&nbsp; &lt;p class="width_level_half_4 bold fl"&gt;时长&lt;/p&gt;<br>&nbsp;&nbsp;&nbsp; &lt;p class="width_level_half_10 bold fl"&gt;区域&lt;/p&gt;<br>&nbsp;&nbsp;&nbsp; &lt;p class="width_level_half_4 bold fl nopitch" name="pCDRHeader"&gt;CDR ID&lt;/p&gt;<br>&nbsp;&nbsp;&nbsp; &lt;p class="width_level_half_2 fl none" name="pSelectCbHeader"&gt;&lt;/p&gt;<br>&nbsp;&nbsp;&nbsp; &lt;p class="width_level_half_2 fr none" name="pDeleteCbHeader"&gt;&lt;/p&gt;<br>&nbsp;&nbsp; &lt;/dd&gt;<br>&lt;/dl&gt;<br></div><br>其次指定模板数据:<br><div class="codetitle"><span><a class="copybut" data="87091" id="copybut87091"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code87091"><br>&lt;dl id="RecCallsTemplate" &gt;<br>&lt;dd &gt;<br>&lt;p class="center width_level_half_2 fl nopitch"&gt;<br>&lt;b class="${CallMode == 1 ? 'icon_call_in' : 'icon_call_out'}" &gt;&lt;/b&gt;<br>&lt;/p&gt;<br>&lt;span class="width_level_half_5 fl"&gt;&lt;span style="color:#FF0000;"&gt;${CalledStationId}&lt;/span&gt;&lt;/span&gt;<br>&lt;span class="width_level_half_5 fl"&gt;${CallingStationId.substr(CallingStationId.indexOf("*") + 1)}&lt;/span&gt;<br>&lt;span class="width_level_half_6 fl"&nbsp; id="Start_time" &gt;${StartTime}&lt;/span&gt;<br>&lt;span class="width_level_half_4 fl"&gt;${CSSCommonJS.ChangeDecimal(Revenue,3)}&lt;/span&gt;<br>&lt;span class="width_level_half_4 fl"&gt;&lt;span style="color:#FF0000;"&gt;${CSSCommonJS.GetTimeFormatString(RevenueTime)}&lt;/span&gt;&lt;/span&gt;<br>&lt;span class="width_level_half_10 fl"&gt;${Location} &lt;/span&gt;<br>&lt;span class="width_level_half_4 fl nopitch" name="pCDRHeader" &gt;${CdrId}&lt;/span&gt;<br>&lt;p class="right width_level_half_2 fr none" name="pSelectCbHeader"&gt;<br>&lt;input&nbsp; type="checkbox" name="cbSelect" class="label" /&gt;&lt;/p&gt;<br>&lt;span class="fl none" name="pDeleteCbHeader"&gt;<br>&lt;button class="crm_btn norm" id="btDelete"&gt;&lt;b&gt;删除&lt;/b&gt;&lt;/button&gt;<br>&lt;/span&gt;<br>&lt;/dd&gt;<br><br>&lt;/dl&gt;<br></div><br>后台进行绑定:<br>&nbsp;&lt;script src="Scripts/jquery.tmpl.js" type="text/javascript"&gt;&lt;/script&gt;<br>function RenderTemplatefunction(container, template, data) {<br>&nbsp;&nbsp;&nbsp; $(template).tmpl(data).appendTo(container); //原始方法<br>};<br>&nbsp;CSSCommonJS.RenderTemplatefunction($(t.panelID).find("#gvRecCalls"), $(t.panelID).find("#RecCallsTemplate"), result.CdrData);<br><strong>2 指定模板中无通配符,后台填充数据(许愿墙实现)<br></strong>前台:<br><div class="codetitle"><span><a class="copybut" data="65065" id="copybut65065"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code65065"><br>&nbsp;&lt;div id="content"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- 模板数据--&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="ItemList"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- 模板数据end--&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&lt;div id="ItemTemplate" style="display: none;"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;dd&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="items"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="bg"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="info"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#" id="btnTitle"&gt;&lt;span id="item_title"&gt;&lt;/span&gt;&lt;/a&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="k"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:1060120
帖子:212021
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP