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

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


代码如下:

<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">被叫号码</p>
    <p class="width_level_half_5 bold fl">主叫号码</p>
    <p class="width_level_half_6 bold fl">起始时间</p>
    <p class="width_level_half_4 bold fl" id="pAmount">金额($)</p>
    <p class="width_level_half_4 bold fl">时长</p>
    <p class="width_level_half_10 bold fl">区域</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>

其次指定模板数据:


代码如下:

<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>

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


代码如下:

<div id="content">
                    <!-- 模板数据-->
                    <div id="ItemList">
                    </div>
                    <!-- 模板数据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>

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


代码如下:

//获取许愿墙数据
    $.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的随机数
            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());
            //绑定数据
            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 嵌套绑定 (目标数据源中含有多个数组,分别绑定到对应的子模板)
账单页面为例:
前台:


代码如下:

目标容器
<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>  固定写法,第一个参数为数据源中的第二个数组,第二个为使用的子模板
                                            {{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;">
子模板是三个数据源的公共模板,可能属性的名称会有不同,需要判断</span>
    <span class="width_level_1 fl" id="spamount" title = "{{= CreateDate }}">${CSSCommonJS.ChangeDecimal((typeof(InitialAmount) == "undefined" ?
 Amount : InitialAmount), 2)}</span>
    <span class="width_level_5 fl" 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 == "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();
            }
        });
  });

嵌套绑定是模板自动完成的。

(0)

相关推荐

  • jQuery jcrop插件截图使用方法

    在后台来进行图片切割.头像截取的原理:在前台使用jcrop获取切面的x轴坐标.y轴坐标.切面高度.切面宽度,然后将这四个值传给后台.在后台要进行放大处理:将切面放大N倍,N=原图/前台展示的头像.即X = X*原图宽/前图宽,Y = Y*原图高/前图高,W = W*原图宽/前图宽,H = H*原图高/前图高.实例:JSP: 复制代码 代码如下: <div id="cutImage" style="display: none;"> <div clas

  • jQuery 3.0 的变化及使用方法

    jQuery ,是迄今为止世界上最流行的 JavaScript 库,一直是我们这些 Web 开发者的神器.自从它在 2006 年发布最初版本直到如今,已经有非常多的 Web 开发者在项目中引入了这个优秀的库来使开发工作变得更轻松. 时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本.有两个版本 jQuery compat 3.0 和 jQuery 3.0. •jQuery compat 3.0 对应之前的 1.x, 兼容更多的浏览器,对于IE支持到 8.0 版本 •jQuer

  • jquery UI Datepicker时间控件的使用方法(终结版)

    近期项目中用到日期控件,感觉不错,写出来分享给大家看看,我限制的开始时间和结束时间跨度不超过三天,并配置有清空时间,重选时间等功能,分享给大家: 先给大家看两张效果图 在例子中我控制的开始时间和结束时间为三天,也就是开始时间和结束时间的跨度不能超过三天. 具体是怎么实现的,代码中会附有很详细的解释,请大家继续往下看: 第一步,引入控件js,这里有两个,一个是jquery.js,一个是jquery-ui-datepicker.js,当然还有引入样式文件: <script type="text

  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)

    特点: 1.不依赖与jquery 2.而且,好看些吧..支持很多实例,上传成功后.会有一个回调函数.比如缩略图地址显示出来 用法: 复制代码 代码如下: <link href="http://fineuploader.com/source/fineuploader-3.9.1.min.css" rel="stylesheet" /><script src="http://fineuploader.com/source/fineupload

  • jQuery filter函数使用方法

    利用filter函数可以从wrapper set中过滤符合条件的DOM元素. 如果我们有一个内容如下的html文件,要获取类为external的<a>元素,使用filter可以很easy地搞定. 复制代码 代码如下: <a href="#" class="external">link</a> <a href="#" class="external">link</a>

  • jQuery 1.9使用$.support替代$.browser的使用方法

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9. 如果要全面支持 IE,并混合使用 jQuery 1.9 和 2.0, 官方的解决方案是: <!--[if lt IE 9]> <script src='jquery-1.9.0.js'></script

  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法

    最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 复制代码 代码如下: //载入JavaScript 文件<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></sc

  • jquery数组封装使用方法分享(jquery数组遍历)

    $.each(array, [callback]) 遍历 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 使用方法如下: 复制代码 代码如

  • jquery indexOf使用方法

    indexOf() 和 lastIndexOf() 是js的用法,与jquery是无关的,所有直接用原生js就可以了. indexOf() 和 lastIndexOf() 方法返回的都是指定的子串在另一个字符串中的位置,如果没有找不到子串,则返回 -1. 这两个方法的不同之处在于,indexOf() 方法是从字符串的开头(位置 0)开始检索字符串,而 lastIndexOf() 方法则是从字符串的结尾开始检索子串. strObj.indexOf(subString[, startIndex])

  • jquery插件lazyload.js延迟加载图片的使用方法

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代

  • jQuery.holdReady()使用方法

    复制代码 代码如下: holdReady: function( hold ) { if ( hold ) { jQuery.readyWait++; // readyWait就是一个计数器,表示还有多少个条目就绪事件才能执行 } else { jQuery.ready( true ); } } 使用方法如下: jQuery.holdReady( hold ) 作用:暂停或恢复.ready() 事件的执行 参数:hold为boolean值,指示是否暂停或恢复被请求的ready事件 jQuery.h

  • jquery showModelDialog的使用方法示例详解

    前两天接到这样一个任务:在用户上传附件,需要校验用户上传附件中身份证信息,如果存在错误信息需要将所有的错误信息展示出来.这个需求我一开始考虑得就是使用jQuery Dialog.但是看到这个项目没有使用而是使用showModelDialog,所以为了统一,也需要使用showModelDialog. window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性.使用方法:varretur

  • jquery each的几种常用的使用方法示例

    jQuery源码里自己也有很多用到each方法.其实jQuery里的each方法是通过js里的call方法来实现的.下面简单介绍一下call方法. call这个方法很奇妙,其实官方的说明是:"调用一个对象的一个方法,以另一个对象替换当前对象."网上更多的解释是变换上下文环境,也有说是改变上下文this指针. 复制代码 代码如下: call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 参数 thisObj  可选项.将被用作当前对象的对象.arg1,

随机推荐