文章出處
分頁存儲過程
webApi接口
頁面
文章列表
編寫存儲過程分頁（此處使用T-SQL）
1 CREATE PROC [dbo].[Common_PageList] 2 ( 3 @tab nvarchar(max),---表名 4 @strFld nvarchar(max), --字段字符串 5 @strWhere varchar(max), --where條件 6 @PageIndex int, --頁碼 7 @PageSize int, --每頁容納的記錄數 8 @Sort VARCHAR(255), --排序字段及規則,不用加order by 9 @IsGetCount bit --是否得到記錄總數，1為得到記錄總數，0為不得到記錄總數，返回記錄集 10 ) 11 AS 12 declare @strSql nvarchar(max) 13 set nocount on; 14 if(@IsGetCount = 1) 15 begin 16 set @strSql='SELECT COUNT(0) FROM ' + @tab + ' WHERE ' + @strWhere 17 end 18 else 19 begin 20 set @strSql=' SELECT * FROM (SELECT ROW_NUMBER() 21 OVER(ORDER BY ' + @Sort + ') AS rownum, ' + @strFld + ' FROM ' + @tab + ' where ' + @strWhere + ') AS Dwhere 22 WHERE rownum BETWEEN ' + CAST(((@PageIndex-1)*@PageSize + 1) as nvarchar(20)) + ' and ' + cast((@PageIndex*@PageSize) as nvarchar(20)) 23 end 24 25 print @strSql 26 exec (@strSql) 27 28 set nocount off;
webApi接口（ADO.NET部分封裝了，此處是調用形式）
1 /// 測試mui下拉刷新 2 /// </summary> 3 /// <param name="flag"></param> 4 /// <returns></returns> 5 [HttpPost] 6 public object test(JObject data) 7 { 8 9 using (var db = new DbBase()) 10 { 11 SqlParameter[] arr = { 12 new SqlParameter{ ParameterName="tab",Value=data["tab"].ToString()}, 13 new SqlParameter{ ParameterName="strFld",Value=data["strFld"].ToString()}, 14 new SqlParameter{ ParameterName="strWhere",Value=data["strWhere"].ToString()}, 15 new SqlParameter{ ParameterName="PageIndex",Value=Convert.ToInt32(data["PageIndex"])}, 16 new SqlParameter{ ParameterName="PageSize",Value=Convert.ToInt32(data["PageSize"])}, 17 new SqlParameter{ ParameterName="Sort",Value=data["Sort"].ToString()}, 18 new SqlParameter{ ParameterName="IsGetCount",Value=Convert.ToInt32(data["IsGetCount"])}, 19 }; 20 21 22 return RepositoryBase.ExecuteReader(db, "Common_PageList", arr); 23 24 25 }
頁面實現
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Hello MUI</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> 8 <meta name="apple-mobile-web-app-capable" content="yes"> 9 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 10 11 <link rel="stylesheet" href="../css/mui.min.css"> 12 <style type="text/css"> 13 14 15 16 </style> 17 </head> 18 19 <body> 20 21 <header class="mui-bar mui-bar-nav"> 22 <h1 class="mui-title">下拉刷新（單webview模式）</h1> 23 </header> 24 25 <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> 26 <div class="mui-scroll"> 27 28 <ul id="container" class="mui-table-view mui-table-view-chevron"></ul> 29 30 31 32 </div> 33 </div> 34 35 36 <ul id="temp" class="mui-table-view" style="display: none;"> 37 <li class="mui-table-view-cell"> 38 <a class="mui-navigate-right"> 39 @name 40 </a> 41 </li> 42 43 </ul> 44 45 46 47 48 49 <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script> 50 <script> 51 52 53 54 /** 55 數據源分頁參數對象 56 * */ 57 var obj={ tab:'SystemUsers', 58 strFld:'code,Username', 59 strWhere:'1=1', 60 PageIndex:1, 61 PageSize:10, 62 Sort:'Username', 63 IsGetCount:0, 64 pageCount:0 65 } 66 67 //webApi服務器接口 68 var apiUrl="http://192.168.200.114:8123/api/Common/Base/test"; 69 70 71 /** 72 * 定義數據源按什么html方式展示，動態生成html字符串的邏輯 73 **/ 74 var drawHtml=function(data){ 75 var html="" 76 for (var i=0;i<data.length;i++) 77 { 78 var temp=document.getElementById("temp").innerHTML; //模板 79 html+=temp.toString().replace('@name',data[i].Username); //替換參數疊加 80 } 81 82 return html; 83 } 84 85 86 87 mui.ready(function(){ 88 89 90 /** 91 MUI配置項 92 * */ 93 mui.init({ 94 pullRefresh: { 95 container: '#pullrefresh', 96 down: { 97 callback: pulldownRefresh 98 }, //END 下拉刷新 99 up : { 100 contentrefresh : "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容 101 contentnomore:'沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容； 102 callback :pullupRefresh //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據； 103 } //END 上拉加載 104 } 105 }); 106 107 108 109 110 111 //統計：數據總數、分頁總數 112 obj.IsGetCount=1; 113 loadData(apiUrl,obj,0); 114 115 //初始化列表數據（第一頁） 116 obj.IsGetCount=0; 117 loadData(apiUrl,obj,0,"down",function(data){ 118 //此處實現動態繪制DOM的邏輯，根據數據源自行處理要展示的html方式 119 return drawHtml(data); 120 121 }); 122 123 124 }); 125 126 127 128 129 /* 130 讀取數據源 131 url：api地址 132 dataObj：數據源分頁查詢參數對象 133 Timeout：指定多少時間后繪制頁面DOM展示對象， 134 動態生成的元素代碼包含在一個setTimeout函數里， 135 用 setTimeout，主要對于下拉刷新間隔時間 136 loadType：加載方式：up(上拉加載)、down(上拉刷新) 137 drawFunction：回調函數，處理拿到數據源，繪制DOM展示界面的html 138 ，要接收返回的html字符串 139 * */ 140 141 var loadData=function(url,dataObj,Timeout,loadType,drawFunction){ 142 143 mui.ajax(url, { 144 type: "post", 145 data:dataObj, 146 async:false, 147 headers: {'Content-Type': 'application/json'}, 148 success: function(data) { 149 150 //統計出數據總數 151 if(dataObj.IsGetCount==1) 152 { 153 obj.pageCount=Math.ceil(parseInt(data[0].Column1)/obj.PageSize) ; 154 return; 155 } 156 157 setTimeout(function() { 158 159 //動態繪制出的Dom元素，結合數據展現 160 var html= drawFunction(data); 161 162 if(loadType=="up") //上拉加載 163 { 164 if(obj.PageIndex==obj.pageCount) 165 { 166 //參數為true代表沒有更多數據了。 167 mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); 168 } 169 else 170 { 171 mui('#pullrefresh').pullRefresh().endPullupToRefresh(); 172 } 173 174 //將下一頁數據追加到容器 175 document.getElementById("container").innerHTML=document.getElementById("container").innerHTML+html; 176 } 177 else if(loadType=="down") //下拉刷新 178 { 179 // 該方法的作用是關閉“正在刷新”的樣式提示，內容區域回滾頂部位置 180 mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); 181 182 //將第一頁數據覆蓋到容器 183 document.getElementById("container").innerHTML=html; 184 185 //啟用上拉加載 186 mui('#pullrefresh').pullRefresh().enablePullupToRefresh(); 187 188 } 189 190 191 192 193 194 195 }, Timeout);//END setTimeout(); 196 197 },//END success(); 198 199 error: function(xhr, type, errorThrown) { 200 console.log(type); 201 }//END error(); 202 203 });//END ajax(); 204 205 }//END loadData(); 206 207 208 209 210 211 212 213 /** 214 * 下拉刷新具體業務實現 215 */ 216 function pulldownRefresh() { 217 console.log('重置數據，初始到第一頁'); 218 obj.PageIndex=1; 219 220 loadData(apiUrl,obj,1000,"down",function(data){ 221 //此處實現動態繪制DOM的邏輯，根據數據源自行處理要展示的html方式 222 return drawHtml(data); 223 224 }); 225 226 } //END pulldownRefresh() 下拉刷新函數 227 228 229 230 231 232 /** 233 * 上拉加載具體業務實現 234 */ 235 function pullupRefresh() { 236 obj.PageIndex++;//當前頁累加，加載下一頁的數據 237 console.log("加載第："+obj.PageIndex+"頁"); 238 console.log("頁總數："+obj.pageCount); 239 240 loadData(apiUrl,obj,1000,"up",function(data){ 241 //此處實現動態繪制DOM的邏輯，根據數據源自行處理要展示的html方式 242 return drawHtml(data); 243 244 }); 245 246 247 } 248 249 250 251 </script> 252 </body> 253 254 </html>
改進的問題：當單次數的下拉刷新會自動觸發上拉加載。比如：第一次進行下拉，就會自動觸發上拉加載，但是第二次就沒有。
文章列表
全站熱搜
留言列表
