本来双休的今天计算一大早起来去图书馆的,但是由于昨天第一次使用tmpl模版有一点点小问题没有解决,所以计划临时变更。大约九点多到公司、第一件事打卡,不是为了4个小时才给的10元加班费。只是不想让自己白白浪费这一天。
其实不使用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.tmpl.min.js" type="text/javascript"></script> 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");
嗯,大致就这些吧、图书馆我来了。。。