日志
JQuery中tmpl模版
本来双休的今天计算一大早起来去图书馆的，但是由于昨天第一次使用tmpl模版有一点点小问题没有解决，所以计划临时变更。大约九点多到公司、第一件事打卡，不是为了4个小时才给的10元加班费。只是不想让自己白白浪费这一天。
其实不使用tmpl模版也可以实现我想要的效果，只是相对麻烦一些并且后台维护比较困难。再者就是如果不去挑战困难那还有什么意义那？一个程序员要善于利用工具、Google、百度这些搜索引擎永远都是我们的利器！
先简述一下我想要的效果：
一个页面上有一个【查询】按钮、一个【时间控件】根据不同的条件从数据库中检索数据并以【table】的方式展示到前台。当然，为了更好的用户体验 （PS：不对、我懂用户体验吗？？？算了这个主题不是纠结这个问题。。。）需要使用Ajax异步刷新。听上去有没有很高尚大。。。后台的数据源是用 MSSQL 函数写的，返回值为一个【DataTable】。
tmpl大致实现流程：
1、下载并导入【tmpl】【Jquery】文件
2、编写【tmpl】模版
3、异步获取数据并绑定数据源
4、美化、隔行换色(JQuery实现)
具体实现：
1、下载导入【tmpl】、【My97 DatePicker】与【Jquery】文件
其实不使用tmpl模版也可以实现我想要的效果，只是相对麻烦一些并且后台维护比较困难。再者就是如果不去挑战困难那还有什么意义那？一个程序员要善于利用工具、Google、百度这些搜索引擎永远都是我们的利器！
先简述一下我想要的效果：
一个页面上有一个【查询】按钮、一个【时间控件】根据不同的条件从数据库中检索数据并以【table】的方式展示到前台。当然，为了更好的用户体验 （PS：不对、我懂用户体验吗？？？算了这个主题不是纠结这个问题。。。）需要使用Ajax异步刷新。听上去有没有很高尚大。。。后台的数据源是用 MSSQL 函数写的，返回值为一个【DataTable】。
tmpl大致实现流程：
1、下载并导入【tmpl】【Jquery】文件
2、编写【tmpl】模版
3、异步获取数据并绑定数据源
4、美化、隔行换色(JQuery实现)
具体实现：
1、下载导入【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、 编写模版并设置绑定数据字段
注：其中红色标出的则是绑定数据源时的字段名称，最后两个绑定是绑定多个值的计算结果，开始的时候迷惑了。后来想了想【{{ }}】只是绑定字段的格式，而里面的【AllNumber】才是真正的数值，所以多值计算的时候只需要把【AllNumber】、【EndNumber】加减后用【{{ }}】包裹起来就可以了。原来走了很多的弯路。。。
3、设置HTML控件的JQuery事件了，直接粘贴出全部的JS代码
4、Ajax异步刷新数据（3中的代码已经包括，这里只是摘取部分）
注： 前面进行的都很顺利，但是在模版绑定数据时候出新了问题，并且浪费了我大部分的时间。这里需要感谢一下深圳码农——昔陌初苋 前辈以及.NET开源框架（232286138）群中的群友门 ，帮我一起研究了很久。数据源为DataTable类型，而tmpl需要的是一个Json对象，所以我在后台把DataTable拼接成一个二维数组字符串格式，例如：[{key1:"value1",key2:"value2"},{key1:"value1",key2:"value2"}]这种格式。那么问题来了，后台传给前台JS后他识别为string字符串而传入tmpl模版中不能正常绑定数据源，后来 昔陌初苋 前辈提供了一种方法【var e = eval('(' + data + ')');】再把【e】传给tmpl就可以了，这个样子tmpl已经可以正常显示数据了。见下图：
5、 主体功能已经实现了，简单的美化下。table隔行换色在JQuery中一句话就可以搞定了。
$("#t_Content tr:even").css("background-color", "White");
嗯，大致就这些吧、图书馆我来了。。。
2、 编写模版并设置绑定数据字段
<script id="tmpl_Content" type="text/x-jquery-tmpl">
<tr>
<td><label id="{{= CustomerId}}">{{= CustomerName}}</label></td> // 客户
<td><label id="{{= ProductId}}">{{= ProductName}}</label></td> // 产品
<td><label>{{= UnitPrice}}</label></td> // 单价
<td><label>{{= SingleWeight}}</label></td> // 重量
<td><label id="{{= TransportId}}">{{= AllNumber}}</label></td> // 总数
<td><label>{{= AllPrice}}</label></td> // 总金额
<td><label>{{= AllWeight}}</label></td> // 总重量
<td><input type="text" style="width: 50px;" id="text_Number" value="{{= EndNumber}}" /></td> // 结账数
<td><label>{{= AllNumber-EndNumber}}</label></td> // 差异数
<td><label>{{= (AllNumber-EndNumber)*UnitPrice}}</label></td> // 差异金额
</tr>
</script>注：其中红色标出的则是绑定数据源时的字段名称，最后两个绑定是绑定多个值的计算结果，开始的时候迷惑了。后来想了想【{{ }}】只是绑定字段的格式，而里面的【AllNumber】才是真正的数值，所以多值计算的时候只需要把【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("提示：根据查询条件未获取到数据！");
} 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：与服务器通讯失败、请检测网络环境！");
$("#div_MARKS").hide();
}
});
});
});
function Calculation(num1, num2) {
return (Number(num1) - Number(num2));
}
</script> 4、Ajax异步刷新数据（3中的代码已经包括，这里只是摘取部分）
$.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("提示：根据查询条件未获取到数据！");
} else {
var e = eval('(' + data + ')');
$("#tmpl_Content").tmpl(e).appendTo($("#t_Content")); // 绑定tmpl数据源
// 隔行换色
$("#t_Content tr:even").css("background-color", "White");
}
$("#div_MARKS").hide();
},
error: function () { // 通讯失败时执行的回调函数
alert("Error：与服务器通讯失败、请检测网络环境！");
$("#div_MARKS").hide();
}
}); 注： 前面进行的都很顺利，但是在模版绑定数据时候出新了问题，并且浪费了我大部分的时间。这里需要感谢一下深圳码农——昔陌初苋 前辈以及.NET开源框架（232286138）群中的群友门 ，帮我一起研究了很久。数据源为DataTable类型，而tmpl需要的是一个Json对象，所以我在后台把DataTable拼接成一个二维数组字符串格式，例如：[{key1:"value1",key2:"value2"},{key1:"value1",key2:"value2"}]这种格式。那么问题来了，后台传给前台JS后他识别为string字符串而传入tmpl模版中不能正常绑定数据源，后来 昔陌初苋 前辈提供了一种方法【var e = eval('(' + data + ')');】再把【e】传给tmpl就可以了，这个样子tmpl已经可以正常显示数据了。见下图：
5、 主体功能已经实现了，简单的美化下。table隔行换色在JQuery中一句话就可以搞定了。
$("#t_Content tr:even").css("background-color", "White");
嗯，大致就这些吧、图书馆我来了。。。
