本來雙休的今天計算一大早起來去圖書館的，但是由于昨天第一次使用tmpl模版有一點點小問題沒有解決，所以計劃臨時變更。大約九點多到公司、第一件事打卡，不是為了4個小時才給的10元加班費。只是不想讓自己白白浪費這一天。
其實不使用tmpl模版也可以實現(xiàn)我想要的效果，只是相對麻煩一些并且后臺維護比較困難。再者就是如果不去挑戰(zhàn)困難那還有什么意義那？一個程序員要善于利用工具、Google、百度這些搜索引擎永遠都是我們的利器！
先簡述一下我想要的效果：
一個頁面上有一個【查詢】按鈕、一個【時間控件】根據(jù)不同的條件從數(shù)據(jù)庫中檢索數(shù)據(jù)并以【table】的方式展示到前臺。當然，為了更好的用戶體驗
（PS：不對、我懂用戶體驗嗎？？？算了這個主題不是糾結(jié)這個問題。。。）需要使用Ajax異步刷新。聽上去有沒有很高尚大。。。后臺的數(shù)據(jù)源是用
MSSQL 函數(shù)寫的，返回值為一個【DataTable】。
tmpl大致實現(xiàn)流程：
1、下載并導入【tmpl】【Jquery】文件
2、編寫【tmpl】模版
3、異步獲取數(shù)據(jù)并綁定數(shù)據(jù)源
4、美化、隔行換色(JQuery實現(xiàn))
具體實現(xiàn)：
1、下載導入【tmpl】、【My97 DatePicker】與【Jquery】文件
<script src="../Scripts/jquery.tmpl.min.js" type="text/javascript"></script> 2、 編寫模版并設置綁定數(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> // 單價
<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>
注：其中紅色標出的則是綁定數(shù)據(jù)源時的字段名稱，最后兩個綁定是綁定多個值的計算結(jié)果，開始的時候迷惑了。后來想了想【{{ }}】只是綁定字段的格式，而里面的【AllNumber】才是真正的數(shù)值，所以多值計算的時候只需要把【AllNumber】、【EndNumber】加減后用【{{ }}】包裹起來就可以了。原來走了很多的彎路。。。 3、設置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("提示：篩選時間不能為空！");
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ǎng)絡環(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", // 后臺處理文件
data: { dQueryDate: $("#text_Date").val(), nQueryType: $("#select_SelectType").val() }, // 發(fā)送給后臺的參數(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 () { // 通訊失敗時執(zhí)行的回調(diào)函數(shù)
alert("Error：與服務器通訊失敗、請檢測網(wǎng)絡環(huán)境！");
$("#div_MARKS").hide();
}
});
注： 前面進行的都很順利，但是在模版綁定數(shù)據(jù)時候出新了問題，并且浪費了我大部分的時間。這里需要感謝一下深圳碼農(nóng)——昔陌初莧 前輩以及.NET開源框架（232286138）群中的群友門 ，幫我一起研究了很久。數(shù)據(jù)源為DataTable類型，而tmpl需要的是一個Json對象，所以我在后臺把DataTable拼接成一個二維數(shù)組字符串格式，例如：[{key1:"value1",key2:"value2"},{key1:"value1",key2:"value2"}]這種格式。那么問題來了，后臺傳給前臺JS后他識別為string字符串而傳入tmpl模版中不能正常綁定數(shù)據(jù)源，后來 昔陌初莧 前輩提供了一種方法【var e = eval('(' + data + ')');】再把【e】傳給tmpl就可以了，這個樣子tmpl已經(jīng)可以正常顯示數(shù)據(jù)了。見下圖： 5、 主體功能已經(jīng)實現(xiàn)了，簡單的美化下。table隔行換色在JQuery中一句話就可以搞定了。
$("#t_Content tr:even").css("background-color", "White");
嗯，大致就這些吧、圖書館我來了。。。 
