JQuery構(gòu)建客戶/服務(wù)分離的鏈接模型中Table分頁(yè)代碼效率初探！注：如果你所在公司的開發(fā)環(huán)境或者項(xiàng)目的開發(fā)環(huán)境處于單一語言的開發(fā)環(huán)境之中，框架不適用，因?yàn)榭蚣艿氖褂梅秶痪褪轻槍?duì)一個(gè)項(xiàng)目中存在多個(gè)語言開發(fā)的業(yè)務(wù)模塊，而新項(xiàng)目都需要這些模塊的功能，按照以前的習(xí)慣，肯定是重新開發(fā)，至少也是將其他的語言開發(fā)的業(yè)務(wù)功能變成webservice接口供新代碼調(diào)用，在這種情況下，本文討論的框架就可以派上用場(chǎng)并且還能在客戶端消除語言差異，只使用純javascript和html靜態(tài)代碼進(jìn)行開發(fā)。
當(dāng)然即使在單一的語言環(huán)境下，仍然可以使用該模型進(jìn)行開發(fā)，不過開發(fā)人員就無法享受到各種優(yōu)秀的服務(wù)端控件(Asp.net控件，專門為java開發(fā)的控件等等）,只能使用純javascript控件，這會(huì)對(duì)開發(fā)人員造成不方便（特別是依賴服務(wù)端控件的開發(fā)人員尤其如此）。
經(jīng)過以上兩篇博文的談?wù)?，我們發(fā)現(xiàn)這種模型是完全有用武之地的，它將服務(wù)端的語言徹底和客戶端分離，開發(fā)客戶端的人員（在理論條件下）可以完全忽略服務(wù)端的語言種類，只進(jìn)行純Javascript開發(fā)，利用JQUERY中提供的AJAX方法同服務(wù)端方法通信。 開篇博文：（http://www.cnblogs.com/AflutterFeather/archive/2010/01/07/1641315.html）
從上面的整體架構(gòu)圖，我們看出：其客戶端都是WebService接口來獲取數(shù)據(jù)和傳送數(shù)據(jù)的，而服務(wù)端業(yè)務(wù)模型是什么語言開發(fā)的，完全不需要關(guān)注（當(dāng)然在現(xiàn)實(shí)情況下，一般WebService接口最好同服務(wù)端業(yè)務(wù)模型是一個(gè)語言開發(fā)的）。
這個(gè)時(shí)候可以會(huì)首先想到效率的問題： 眾所周知，WebService接口的效率較慢，那么這樣搞是不是會(huì)讓采用這種結(jié)構(gòu)模型開發(fā)的網(wǎng)站速度變慢，與其這樣，還不如采用常規(guī)的方法開發(fā)，不僅熟悉而且速度也不錯(cuò)呢？
先看下面幾個(gè)推論： 1）WebService接口的效率慢 <---> 異步獲取數(shù)據(jù) ，兩者互相能夠抵消嗎？ 2）客戶端采用Post的方式，可以減少數(shù)據(jù)的量，能部分抵消WebService接口的效率慢嗎？ 以上兩個(gè)推論，雖然我們沒完全做過對(duì)比，但可以肯定的說，它們是有對(duì)沖效率的，WebService慢，反映在頁(yè)面端無怪乎就是頁(yè)面等待長(zhǎng)時(shí)間不出來，造成用戶體驗(yàn)下降，但因?yàn)椴捎卯惒将@取的方式，這種情況還會(huì)出現(xiàn)嗎？應(yīng)該不會(huì)。 在傳送過程中，采用Post方式，數(shù)據(jù)量大大減少，又采用了異步方式，實(shí)際運(yùn)行效果應(yīng)該是相當(dāng)不錯(cuò)的。
但對(duì)于某些特殊情況并且有很普遍的問題，比如Table表格的分頁(yè)情況，我們又該怎么處理呢？ Table表格數(shù)據(jù)填充和分頁(yè) 這個(gè)在頁(yè)面上非常普遍的問題確對(duì)以上的推論造成了威脅，究其原因就是因?yàn)橐话愕姆猪?yè)代碼都是把數(shù)據(jù)返回到客戶端內(nèi)存中，然后進(jìn)行分頁(yè)，因此大量的數(shù)據(jù)從服務(wù)端傳遞到客戶端，必然造成問題，其實(shí)這個(gè)問題不僅僅是這個(gè)框架的問題，所有采用這種方式進(jìn)行分頁(yè)的代碼都存在這樣的問題，只不過這個(gè)框架采用WebService接口與客戶端通信，才導(dǎo)致這個(gè)問題的重要性被無限放大了。 以下我們就來討論在這種框架下進(jìn)行分頁(yè)的處理： 環(huán)境：Visual studio 2005 JQuery 1.3.2 SQLServer2005 分頁(yè)原理：
從上圖中，看到不管數(shù)據(jù)表中有多少數(shù)據(jù)，每次返回到客戶端的數(shù)據(jù)都是一頁(yè)的數(shù)據(jù)，這種方法沒有采用存儲(chǔ)過程方式，而是在webservice端進(jìn)行處理的。
代碼片段： 服務(wù)端填充Table表格代碼----： 說明： TB_WEB_NZ_INVESTMENT 是實(shí)體類，對(duì)應(yīng)表對(duì)象 FlowID 表對(duì)象的字段屬性，通過它獲取一類相似的數(shù)據(jù)記錄
代碼中有對(duì)【首頁(yè)】，【尾頁(yè)】，【中間頁(yè)】的元素進(jìn)行過濾，對(duì)返回的泛型List對(duì)象進(jìn)行范圍過濾   代碼
/// <summary>
/// 分頁(yè)功能的表格填充服務(wù)端 /// </summary> /// <param name="FlowID"></param> /// <param name="PageCount">每頁(yè)數(shù)目</param> /// <param name="CurrentPage">當(dāng)前頁(yè)</param> /// <returns></returns> [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public string Load_ContributivePerson_Table(string FlowID, int PageCount, int CurrentPage) { List<TB_WEB_NZ_INVESTMENT> list = new List<TB_WEB_NZ_INVESTMENT>(); list = objBusinessFacade.GetTB_WEB_NZ_INVESTMENT_CollectionByFlowID(FlowID); int TotalPageCount = 0; if (PageCount != 0) { if ((list.Count % PageCount) > 0) { TotalPageCount = list.Count / PageCount + 1; } else { TotalPageCount = list.Count / PageCount; } }//if if (CurrentPage == 1) { //第一頁(yè) if (PageCount < list.Count) { list.RemoveRange(PageCount, list.Count - PageCount); } } else if (CurrentPage > 1 && CurrentPage < TotalPageCount) { //中間頁(yè) int R1 = (CurrentPage - 1) * PageCount-1; int R2 = CurrentPage * PageCount; List<TB_WEB_NZ_INVESTMENT> list1 = new List<TB_WEB_NZ_INVESTMENT>(); for (int i = 0; i < list.Count; i++) { if (i > R1&&i<R2) { list1.Add(list[i]); } } list.Clear(); list = list1; } else if (CurrentPage == TotalPageCount) { //尾頁(yè) //但返回的顯示對(duì)象列表確只能是最后一頁(yè)里面的記錄 //這里需要剔除不是最后一頁(yè)的元素對(duì)象 list.RemoveRange(0,(CurrentPage-1) * PageCount); } return new JavaScriptSerializer().Serialize(list); }
原理說明圖：－－－－－－－－－－－－－－－－－－－－－－－
結(jié)合以上代碼和該圖講解： 1)首頁(yè)操作： list.RemoveRange(PageCount, list.Count - PageCount); 翻譯成數(shù)字：list.RemoveRange(5,14-5); 首頁(yè)顯示的元素：A1 A2 A3 A4 A5 對(duì)應(yīng)的索引:0 1 2 3 4 list.RemoveRange(5,14-5); //排除索引值為5（含自身）的后面的所有元素，這樣列表中只有A1-A5 元素
2）中間頁(yè)操作：（這里就是第2頁(yè)）
CurrentPage 等于 2 int R1 = (CurrentPage - 1) * PageCount-1; 等于4
R1 和R2 代表兩個(gè)區(qū)間范圍索引，即在索引4(不含索引4) 到 索引10(不含索引10) 之間的元素，是我們要取出的元素
代碼
List<TB_WEB_NZ_INVESTMENT> list1 = new List<TB_WEB_NZ_INVESTMENT>();
for (int i = 0; i < list.Count; i++) { if (i > R1&&i<R2) { list1.Add(list[i]); } } list.Clear(); list = list1;
3）尾頁(yè)操作：
//尾頁(yè)
//但返回的顯示對(duì)象列表確只能是最后一頁(yè)里面的記錄 //這里需要剔除不是最后一頁(yè)的元素對(duì)象 list.RemoveRange(0,(CurrentPage-1) * PageCount);
尾頁(yè)的代碼就簡(jiǎn)單一些。
從以上的服務(wù)端代碼，我們看出雖然每次從數(shù)據(jù)庫(kù)返回全部的代碼到webservice端，但通過這個(gè)方法，就將其無用的記錄全部過濾了，把剩下的元素傳遞到客服端，這樣不管記錄有多少條，每次返回頁(yè)面的都只有一點(diǎn)點(diǎn)，提高了效率，避免了webservice傳遞大數(shù)據(jù)的問題，這樣這個(gè)框架在傳遞大數(shù)據(jù)的方面基本不存在任何問題（排除一些及其特殊的東西），運(yùn)用這個(gè)框架在效率方面不存在任何問題，甚至比普通的頁(yè)面還要快。
客戶端代碼片段： 客戶端就不再詳細(xì)說明了，客戶端需要傳入 PageCount 每頁(yè)顯示的記錄數(shù) CurrentPage 當(dāng)前頁(yè)數(shù)
表格的html：
代碼
<table id="TData" width="100%" >
<thead id="thead"> <tr id="TR_Header" class="MyTableTR_Header" align="center" style=" height:25px"> <td style="width:1%; display:none" class="MyTableTD"></td> <td style="width:10%" >投資人類型</td> <td style="width:10%">投資人</td> <td style="width:10%">出資方式</td> <td style="width:10%">認(rèn)繳出資額</td> <td style="width:10%">實(shí)繳出資額</td> <td style="width:10%">出資比例</td> <td style="width:15%">余額繳付期限</td> <td style="width:15%">資料是否完整</td> <td style="width:10%">操作</td> </tr> </thead> <tbody id="tbody_Data"></tbody> <tfoot id="tfoot_foot"> <tr align="right"> <td style="width:100%" colspan="9"> <a href="#" id="First_A">首頁(yè)</a> <a href="#" id="Prev_A">上一頁(yè)</a> <a href="#" id="Next_A">下一頁(yè)</a> <a href="#" id="Last_A">尾頁(yè)</a> 跳到<input id="ToPageNo" type="text" style="width:20px; height:10px; font-size:9px"/>頁(yè) | 總頁(yè)數(shù):<span id="showTotalPage" style="color:Red"></span>頁(yè) </td> </tr> </tfoot> </table>
填充數(shù)據(jù)的js函數(shù)：  代碼
//引導(dǎo)數(shù)據(jù)填充表格(Table)
function Load_TableData(FlowID,CurrentPage) { $.ajax({ type: "POST", url: IPServer +"JsonService.asmx/Load_ContributivePerson_Table", data:"{FlowID:'"+FlowID+"',PageCount:"+PageCount+",CurrentPage:" + CurrentPage +"}" , contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg){ msg = msg.replace(new RegExp('(^|[^\\\\])\\"\\\\/Date\\((-?[0-9]+)\\)\\\\/\\"', 'g'), "$1new Date($2)"); var data = eval("(" + msg + ")"); var strTR=""; var RowCount = 1; jQuery.each(data, function(rec) { strTR += "<TR id='TR_" + RowCount + "' class='MyTableTR' align='center' >"; strTR += " <TD style='width:1%; display:none' id='Key_"+RowCount+"' class='MyTableTD' >" + this.INVID + "</TD>"; strTR += " <TD style='width:10%' class='MyTableTD' >" + this.INVTYPEName + "</TD>"; strTR += " <TD style='width:10%' class='MyTableTD' >" + this.INV + "</TD>"; strTR += " <TD style='width:10%' class='MyTableTD' >" + this.CONFORM + "</TD>"; strTR += " <TD style='width:10%' class='MyTableTD' >" + this.SUBCONAM + "</TD>"; strTR += " <TD style='width:10%' class='MyTableTD' >" + this.ACCONAM + "</TD>"; strTR += " <TD style='width:10%' class='MyTableTD' >" + this.CONPROP + "</TD>"; strTR += " <TD style='width:15%' class='MyTableTD' >" + this.BALDEPER_ShortString + "</TD>"; strTR += " <TD style='width:15%' class='MyTableTD' >" + this.IsDataCompleteness + "</TD>"; strTR += " <TD style='width:10%' class='MyTableTD' ><a id='Link_"+RowCount+"' href='#' >選擇</a></TD>"; strTR += "</TR>"; RowCount++; });//jQuery.each $("#tbody_Data").empty(); $("#tbody_Data").append(strTR); $("#CurrentPage").html(CurrentPage); }, error:function(msg){ alert( "Error: " + msg ); } }); }//function Load_TableData()
首頁(yè)，上一頁(yè)，下一頁(yè)，尾頁(yè)的操作： 說明： $("#CurrentPage").html() 存儲(chǔ)當(dāng)前頁(yè) （調(diào)用代碼在上個(gè)函數(shù)紅色處） $("#TotalPageCount").html() 存儲(chǔ)總頁(yè)數(shù) ?。ㄕ{(diào)用代碼有個(gè)專門的函數(shù)，見下面） 代碼
$("#First_A").click(function(){//首頁(yè) 鏈接操作
Load_TableData(strFlowID,1); }); $("#Prev_A").click(function(){//上一頁(yè) 鏈接操作 var intCurrentPage = Number(c); if(intCurrentPage>1) { Load_TableData(strFlowID,intCurrentPage-1); } }); $("#Next_A").click(function(){//下一頁(yè) 鏈接操作 var intCurrentPage = Number($("#CurrentPage").html()); var intTotalPageCount = Number($("#TotalPageCount").html()); if(intCurrentPage<intTotalPageCount) { Load_TableData(strFlowID,intCurrentPage+1); } }); $("#Last_A").click(function(){//尾頁(yè) 鏈接操作 intLastPage = Number($("#TotalPageCount").html()); Load_TableData(strFlowID,intLastPage); });
返回總頁(yè)數(shù)的客戶端函數(shù)：
代碼
//返回頁(yè)數(shù)
function Get_TableData_TotalCount(FlowID) { $.ajax({ type: "POST", url: IPServer +"JsonService.asmx/Get_ContributivePersonTable_TotalPageCount", data:"{FlowID:'"+FlowID +"',PageCount:"+PageCount+"}" , contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg){ var data = eval("(" + msg + ")"); jQuery.each(data, function(rec) { $("#TotalPageCount").html(this.Info); $("#showTotalPage").html(this.Info); });//jQuery.each }, error:function(msg){ alert( "Error: " + msg ); } }); } <div id="CurrentPage" ></div> <div id="TotalPageCount" ></div>
最后效果圖:
總結(jié)： Table數(shù)據(jù)填充并分頁(yè)還有很多方法，這里只是提供了一種通過服務(wù)端就進(jìn)行過濾的方法，讓其返回客戶端的數(shù)據(jù)始終就一點(diǎn)，提高了效率。 框架的應(yīng)用探索正在穩(wěn)步進(jìn)行中。。。。。。 |
|
|
