找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

帖子
uid:83710 日志

JQuery中tmpl模版

已有 2706 次閱讀2015-6-25 17:02

       本來雙休的今天計算一大早起來去圖書館的,但是由于昨天第一次使用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、下載并導(dǎo)入【tmpl】【Jquery】文件
        2、編寫【tmpl】模版
        3、異步獲取數(shù)據(jù)并綁定數(shù)據(jù)源
        4、美化、隔行換色(JQuery實現(xiàn)) 

        具體實現(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ù)字段
        <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、設(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("提示:篩選時間不能為空!");
                        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ù)器通訊失敗、請檢測網(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",    // 后臺處理文件
                    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ù)器通訊失敗、請檢測網(wǎng)絡(luò)環(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"); 
         
        嗯,大致就這些吧、圖書館我來了。。。 

路過

雞蛋

鮮花

握手

雷人

評論 (0 個評論)

小黑屋|51黑電子論壇 |51黑電子論壇6群 QQ 管理員QQ:125739409;技術(shù)交流QQ群281945664

Powered by 單片機教程網(wǎng)

返回頂部