日志
JQuery中tmpl模版
本來雙休的今天計(jì)算一大早起來去圖書館的，但是由于昨天第一次使用tmpl模版有一點(diǎn)點(diǎn)小問題沒有解決，所以計(jì)劃臨時(shí)變更。大約九點(diǎn)多到公司、第一件事打卡，不是為了4個(gè)小時(shí)才給的10元加班費(fèi)。只是不想讓自己白白浪費(fèi)這一天。
其實(shí)不使用tmpl模版也可以實(shí)現(xiàn)我想要的效果，只是相對(duì)麻煩一些并且后臺(tái)維護(hù)比較困難。再者就是如果不去挑戰(zhàn)困難那還有什么意義那？一個(gè)程序員要善于利用工具、Google、百度這些搜索引擎永遠(yuǎn)都是我們的利器！
先簡(jiǎn)述一下我想要的效果：
一個(gè)頁面上有一個(gè)【查詢】按鈕、一個(gè)【時(shí)間控件】根據(jù)不同的條件從數(shù)據(jù)庫中檢索數(shù)據(jù)并以【table】的方式展示到前臺(tái)。當(dāng)然，為了更好的用戶體驗(yàn) （PS：不對(duì)、我懂用戶體驗(yàn)嗎？？？算了這個(gè)主題不是糾結(jié)這個(gè)問題。。。）需要使用Ajax異步刷新。聽上去有沒有很高尚大。。。后臺(tái)的數(shù)據(jù)源是用 MSSQL 函數(shù)寫的，返回值為一個(gè)【DataTable】。
tmpl大致實(shí)現(xiàn)流程：
1、下載并導(dǎo)入【tmpl】【Jquery】文件
2、編寫【tmpl】模版
3、異步獲取數(shù)據(jù)并綁定數(shù)據(jù)源
4、美化、隔行換色(JQuery實(shí)現(xiàn))
具體實(shí)現(xiàn)：
1、下載導(dǎo)入【tmpl】、【My97 DatePicker】與【Jquery】文件
其實(shí)不使用tmpl模版也可以實(shí)現(xiàn)我想要的效果，只是相對(duì)麻煩一些并且后臺(tái)維護(hù)比較困難。再者就是如果不去挑戰(zhàn)困難那還有什么意義那？一個(gè)程序員要善于利用工具、Google、百度這些搜索引擎永遠(yuǎn)都是我們的利器！
先簡(jiǎn)述一下我想要的效果：
一個(gè)頁面上有一個(gè)【查詢】按鈕、一個(gè)【時(shí)間控件】根據(jù)不同的條件從數(shù)據(jù)庫中檢索數(shù)據(jù)并以【table】的方式展示到前臺(tái)。當(dāng)然，為了更好的用戶體驗(yàn) （PS：不對(duì)、我懂用戶體驗(yàn)嗎？？？算了這個(gè)主題不是糾結(jié)這個(gè)問題。。。）需要使用Ajax異步刷新。聽上去有沒有很高尚大。。。后臺(tái)的數(shù)據(jù)源是用 MSSQL 函數(shù)寫的，返回值為一個(gè)【DataTable】。
tmpl大致實(shí)現(xiàn)流程：
1、下載并導(dǎo)入【tmpl】【Jquery】文件
2、編寫【tmpl】模版
3、異步獲取數(shù)據(jù)并綁定數(shù)據(jù)源
4、美化、隔行換色(JQuery實(shí)現(xiàn))
具體實(shí)現(xiàn)：
1、下載導(dǎo)入【tmpl】、【My97 DatePicker】與【Jquery】文件
<script src="../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../Plugs/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script src="../Scripts/jquery.tmpl.min.js" type="text/javascript"></script>
2、 編寫模版并設(shè)置綁定數(shù)據(jù)字段
注：其中紅色標(biāo)出的則是綁定數(shù)據(jù)源時(shí)的字段名稱，最后兩個(gè)綁定是綁定多個(gè)值的計(jì)算結(jié)果，開始的時(shí)候迷惑了。后來想了想【{{ }}】只是綁定字段的格式，而里面的【AllNumber】才是真正的數(shù)值，所以多值計(jì)算的時(shí)候只需要把【AllNumber】、【EndNumber】加減后用【{{ }}】包裹起來就可以了。原來走了很多的彎路。。。
3、設(shè)置HTML控件的JQuery事件了，直接粘貼出全部的JS代碼
4、Ajax異步刷新數(shù)據(jù)（3中的代碼已經(jīng)包括，這里只是摘取部分）
注： 前面進(jìn)行的都很順利，但是在模版綁定數(shù)據(jù)時(shí)候出新了問題，并且浪費(fèi)了我大部分的時(shí)間。這里需要感謝一下深圳碼農(nóng)——昔陌初莧 前輩以及.NET開源框架（232286138）群中的群友門 ，幫我一起研究了很久。數(shù)據(jù)源為DataTable類型，而tmpl需要的是一個(gè)Json對(duì)象，所以我在后臺(tái)把DataTable拼接成一個(gè)二維數(shù)組字符串格式，例如：[{key1:"value1",key2:"value2"},{key1:"value1",key2:"value2"}]這種格式。那么問題來了，后臺(tái)傳給前臺(tái)JS后他識(shí)別為string字符串而傳入tmpl模版中不能正常綁定數(shù)據(jù)源，后來 昔陌初莧 前輩提供了一種方法【var e = eval('(' + data + ')');】再把【e】傳給tmpl就可以了，這個(gè)樣子tmpl已經(jīng)可以正常顯示數(shù)據(jù)了。見下圖：
5、 主體功能已經(jīng)實(shí)現(xiàn)了，簡(jiǎn)單的美化下。table隔行換色在JQuery中一句話就可以搞定了。
$("#t_Content tr:even").css("background-color", "White");
嗯，大致就這些吧、圖書館我來了。。。
2、 編寫模版并設(shè)置綁定數(shù)據(jù)字段
<script id="tmpl_Content" type="text/x-jquery-tmpl">
<tr>
<td><label id="{{= CustomerId}}">{{= CustomerName}}</label></td> // 客戶
<td><label id="{{= ProductId}}">{{= ProductName}}</label></td> // 產(chǎn)品
<td><label>{{= UnitPrice}}</label></td> // 單價(jià)
<td><label>{{= SingleWeight}}</label></td> // 重量
<td><label id="{{= TransportId}}">{{= AllNumber}}</label></td> // 總數(shù)
<td><label>{{= AllPrice}}</label></td> // 總金額
<td><label>{{= AllWeight}}</label></td> // 總重量
<td><input type="text" style="width: 50px;" id="text_Number" value="{{= EndNumber}}" /></td> // 結(jié)賬數(shù)
<td><label>{{= AllNumber-EndNumber}}</label></td> // 差異數(shù)
<td><label>{{= (AllNumber-EndNumber)*UnitPrice}}</label></td> // 差異金額
</tr>
</script>注：其中紅色標(biāo)出的則是綁定數(shù)據(jù)源時(shí)的字段名稱，最后兩個(gè)綁定是綁定多個(gè)值的計(jì)算結(jié)果，開始的時(shí)候迷惑了。后來想了想【{{ }}】只是綁定字段的格式，而里面的【AllNumber】才是真正的數(shù)值，所以多值計(jì)算的時(shí)候只需要把【AllNumber】、【EndNumber】加減后用【{{ }}】包裹起來就可以了。原來走了很多的彎路。。。
3、設(shè)置HTML控件的JQuery事件了，直接粘貼出全部的JS代碼
<script type="text/javascript">
$(document).ready(function () {
var dT = {
dateFmt: 'yyyy-MM-dd'
};
$("#select_SelectType").bind("change", function () {
var v = $("#select_SelectType").val();
if (v == '0') {
dT.dateFmt = "yyyy-MM-dd";
}
if (v == '1') {
dT.dateFmt = "yyyy-MM";
}
$("#text_Date").val("");
});
$("#text_Date").click(function () {
WdatePicker(dT);
});
$("#btn_Query").bind("click", function () {
if ($("#text_Date").val() == "") {
alert("提示：篩選時(shí)間不能為空！");
return;
}
// 遮罩層
$("#div_MARKS").show();
$("#t_Content").html("");
$.ajax({
type: "POST",
url: "../PMS/AjaxSaleReport.ashx",
data: { dQueryDate: $("#text_Date").val(), nQueryType: $("#select_SelectType").val() },
async: true,
success: function (data) {
if (data == "-1") {
alert("提示：根據(jù)查詢條件未獲取到數(shù)據(jù)！");
} else {
var e = eval('(' + data + ')');
$("#tmpl_Content").tmpl(e).appendTo($("#t_Content"));
// 隔行換色
$("#t_Content tr:even").css("background-color", "White");
}
$("#div_MARKS").hide();
},
error: function () {
alert("Error：與服務(wù)器通訊失敗、請(qǐng)檢測(cè)網(wǎng)絡(luò)環(huán)境！");
$("#div_MARKS").hide();
}
});
});
});
function Calculation(num1, num2) {
return (Number(num1) - Number(num2));
}
</script> 4、Ajax異步刷新數(shù)據(jù)（3中的代碼已經(jīng)包括，這里只是摘取部分）
$.ajax({
type: "POST", // 傳輸方式
url: "../PMS/AjaxSaleReport.ashx", // 后臺(tái)處理文件
data: { dQueryDate: $("#text_Date").val(), nQueryType: $("#select_SelectType").val() }, // 發(fā)送給后臺(tái)的參數(shù)
async: true, // 是異步處理
success: function (data) { // 異步刷新成功后的回調(diào)函數(shù)
if (data == "-1") {
alert("提示：根據(jù)查詢條件未獲取到數(shù)據(jù)！");
} else {
var e = eval('(' + data + ')');
$("#tmpl_Content").tmpl(e).appendTo($("#t_Content")); // 綁定tmpl數(shù)據(jù)源
// 隔行換色
$("#t_Content tr:even").css("background-color", "White");
}
$("#div_MARKS").hide();
},
error: function () { // 通訊失敗時(shí)執(zhí)行的回調(diào)函數(shù)
alert("Error：與服務(wù)器通訊失敗、請(qǐng)檢測(cè)網(wǎng)絡(luò)環(huán)境！");
$("#div_MARKS").hide();
}
}); 注： 前面進(jìn)行的都很順利，但是在模版綁定數(shù)據(jù)時(shí)候出新了問題，并且浪費(fèi)了我大部分的時(shí)間。這里需要感謝一下深圳碼農(nóng)——昔陌初莧 前輩以及.NET開源框架（232286138）群中的群友門 ，幫我一起研究了很久。數(shù)據(jù)源為DataTable類型，而tmpl需要的是一個(gè)Json對(duì)象，所以我在后臺(tái)把DataTable拼接成一個(gè)二維數(shù)組字符串格式，例如：[{key1:"value1",key2:"value2"},{key1:"value1",key2:"value2"}]這種格式。那么問題來了，后臺(tái)傳給前臺(tái)JS后他識(shí)別為string字符串而傳入tmpl模版中不能正常綁定數(shù)據(jù)源，后來 昔陌初莧 前輩提供了一種方法【var e = eval('(' + data + ')');】再把【e】傳給tmpl就可以了，這個(gè)樣子tmpl已經(jīng)可以正常顯示數(shù)據(jù)了。見下圖：
5、 主體功能已經(jīng)實(shí)現(xiàn)了，簡(jiǎn)單的美化下。table隔行換色在JQuery中一句話就可以搞定了。
$("#t_Content tr:even").css("background-color", "White");
嗯，大致就這些吧、圖書館我來了。。。
