Jquery 模板數(shù)據(jù)綁定插件的使用方法詳解
更新時間:2013年07月08日 11:36:07 作者:
本篇文章是對在Jquery中模板數(shù)據(jù)綁定插件的使用方法進行了詳細的分析介紹,需要的朋友參考下
1 綁定后臺數(shù)據(jù)到指定模板(無嵌套,內(nèi)容均為后臺數(shù)據(jù)原始信息,前臺綁定)
以通話記錄頁為例:
首先指定目標容器:
<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">區(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ù):
<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 指定模板中無通配符,后臺填充數(shù)據(jù)(許愿墻實現(xiàn))
前臺:
<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>
后臺進行取數(shù)據(jù)綁定,綁事件等。
//獲取許愿墻數(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的隨機數(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 嵌套綁定 (目標數(shù)據(jù)源中含有多個數(shù)組,分別綁定到對應的子模板)
賬單頁面為例:
前臺:
目標容器
<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> 固定寫法,第一個參數(shù)為數(shù)據(jù)源中的第二個數(shù)組,第二個為使用的子模板
{{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;">
子模板是三個數(shù)據(jù)源的公共模板,可能屬性的名稱會有不同,需要判斷</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();
}
});
});
嵌套綁定是模板自動完成的。
以通話記錄頁為例:
首先指定目標容器:
復制代碼 代碼如下:
<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">區(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ù):
復制代碼 代碼如下:
<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 指定模板中無通配符,后臺填充數(shù)據(jù)(許愿墻實現(xiàn))
前臺:
復制代碼 代碼如下:
<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>
后臺進行取數(shù)據(jù)綁定,綁事件等。
復制代碼 代碼如下:
//獲取許愿墻數(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的隨機數(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 嵌套綁定 (目標數(shù)據(jù)源中含有多個數(shù)組,分別綁定到對應的子模板)
賬單頁面為例:
前臺:
復制代碼 代碼如下:
目標容器
<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> 固定寫法,第一個參數(shù)為數(shù)據(jù)源中的第二個數(shù)組,第二個為使用的子模板
{{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;">
子模板是三個數(shù)據(jù)源的公共模板,可能屬性的名稱會有不同,需要判斷</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();
}
});
});
嵌套綁定是模板自動完成的。
您可能感興趣的文章:
- Json2Template.js 基于jquery的插件 綁定JavaScript對象到Html模板中
- 一個可綁定數(shù)據(jù)源的jQuery數(shù)據(jù)表格插件
- Angular指令封裝jQuery日期時間插件datetimepicker實現(xiàn)雙向綁定示例
- jquery彈窗插件colorbox綁定動態(tài)生成元素的方法
- Vue.js列表渲染綁定jQuery插件的正確姿勢
- jQuery給動態(tài)添加的元素綁定事件的方法
- jquery移除、綁定、觸發(fā)元素事件使用示例詳解
- JQuery中綁定事件(bind())和移除事件(unbind())
- jQuery事件的綁定、觸發(fā)、及監(jiān)聽方法簡單說明
- jQuery事件綁定和委托實例
- jQuery事件綁定on()、bind()與delegate() 方法詳解
- jquery 插件重新綁定的處理方法分析
相關文章
jQuery增加和刪除表格項目及實現(xiàn)表格項目排序的方法
jQuery對表格的操作是老生常談的問題了,各種插件也到處都是,這里我們還是來從技術著手jQuery增加和刪除表格項目及實現(xiàn)表格項目排序的方法:2016-05-05JQUERY 實現(xiàn)窗口滾動搜索框??啃Ч?類似滾動停靠)
由于分頁的效果卻又是非常令人厭惡的。滾動條無疑是一種簡單而又高效的一種方式。而這里,處于對用戶體驗的考慮,我使用Jquery實現(xiàn)了一種類似滾動??康男Ч?,感興趣的朋友可以參考下哈2013-03-03jquery.mousewheel實現(xiàn)整屏翻屏效果
jQuery Mousewheel 用于添加跨瀏覽器的鼠標滾輪支持。 mousewheel事件的處理函數(shù)有一點小小的變化,它除了第一個參數(shù)event 外,還接收到第二個參數(shù)delta。通過參數(shù)delta可以獲取鼠標滾輪的方向和速度。2015-08-08