最近比較忙，前期忙公司手機端介面專案，各種開發+除錯+釋出現在幾乎上線無問題了；雖然公司專案忙不過在期間抽空做了兩件個人覺得有意義的事情，一者使用aspnetcore開發了個人線上專案（要說線上其實只能ip訪問，沒有域名哈哈），其架構組成由：aspnetcore1.0.0+redis+ postgressql+TaskMainForm服務，這個專案在後期會開源出來供大家分享學習，站點地址點這裡心聲網；一者是目前正在做的後臺管理框架一葉子，現目前剛好吧js分頁外掛shenniu.pager.js寫完，個人覺得還是可以的，這也是本章將要和大家分享的內容；那麼開始今天的分享內容，希望各位多多掃碼支援：

　　. 為什麼採用js分頁及效果圖

　　. 在view中如何使用及分享個後臺方法

　　. 開發者視角閱讀shenniu.pager.js程式碼

下面一步一個腳印的來分享：

. 為什麼採用js分頁及效果圖

首先，咋們來了解下市面上mvc兩種常用的分頁方式：跳轉分頁和ajax分頁；跳轉分頁意思就是頁面重定向到指定的頁面並通過傳遞分頁需要的引數，從而獲取資料後通過Modal來繫結資料，這個每次都會刷下頁面體驗上不是很好；ajax分頁通過非同步js請求某個介面，然後從介面獲取到資料後，再賦值到展示的介面上，這種方式是不會重新整理頁面，從而保證了使用者體驗；

下面來看下這次分享的js分頁外掛效果圖：

圖一：

圖二：

圖三：

看效果圖好像看不出來什麼東西，我只能說沒辦法，以後爭取弄個gif動態圖片吧，後面程式碼才是關鍵

. 在view中如何使用及分享個後臺方法

首先，為了頁面樣式好看我使用了bootstrap+ace樣式框架，樣式效果就是如上面幾張圖所示(這裡是樣式和js檔案)；由於該外掛是採用jquery格式書寫的所以需要引用jquery.js，如上面圖所示使用到了日期選擇框，因為我採用的樣式都是基於h5的設計所以這裡引用的日期選擇外掛bootstrap-datepicker.min.js和她的樣式bootstrap-datepicker3.min.css；該例項需要的引用檔案都好了，下面看下截圖：

再來，咋們就開始使用shenniu.pager.js,我們需要在點選“查詢”按鈕的時候去呼叫這個外掛，然後通過外掛去獲取後臺介面返回的資料，並繫結到頁面展示出來，所以有了如下程式碼：

 1  var snTool = new shenniuTool();
 2 
 3         $("button[id='btnSearch']").on("click", function () {
 4 
 5             var data = {
 6                 txtName: $("input[name='txtName']").val(),
 7                 nStatus: $("select option:selected").val(),
 8                 dOperateTime: $("input[name='dOperateTime']").val()
 9             };
10 
11             snTool.listFun({
12                 showId: "divShowResult",  //內容顯示的div的Id
13                 url: "/Menu/Search",
14                 data: data,
15                 pageSize: 2,  //每頁N條
16                 headText: [
17                     { nickName: "全選", name: "Id", colType: "checkbox" },
18                     { nickName: "名稱", name: "Name", colType: "label", isModalHeadText: true },
19                     { nickName: "連結", name: "Link" },
20                     { nickName: "狀態", name: "EnableDes" },
21                     { nickName: "操作人", name: "OperatorDes" },
22                     { nickName: "操作時間", name: "OperateTime", format: "yyyy-MM-dd" },
23                     { nickName: "操作", name: "Id", colType: "operate" }
24                 ],
25                 editeOption: {
26                     url: "/Menu/Edit",
27                     title: "編輯",
28                     height: 500
29                 },
30                 viewOption: {
31                     url: "/Menu/Details",
32                     title: "檢視",
33                     height: 500
34                 },
35                 delOption: {
36                     url: "/Menu/Delete",
37                     title: "刪除",
38                     height: 500
39                 },
40                 modalExt: modalExt
41             });
42         });

注意引數url: "/Menu/Search"，這個指向的就是後臺介面，那麼咋們來看下我後臺咋們寫的:

 1 [HttpGet]
 2         public JsonResult Search()
 3         {
 4             var moPageResult = new StageModel.MoPageResult<dynamic>();
 5 
 6             try
 7             {
 8 
 9                 var txtName = Request.Params["txtName"];
10                 var nStatus = string.IsNullOrWhiteSpace(Request.Params["nStatus"]) ? -1 : Convert.ToInt32(Request.Params["nStatus"]);
11                 var dOperateTime = string.IsNullOrWhiteSpace(Request.Params["dOperateTime"]) ? Convert.ToDateTime("1991-01-01") : Convert.ToDateTime(Request.Params["dOperateTime"]);
12                 var data = db.MoMenus.AsQueryable();
13                 if (!string.IsNullOrWhiteSpace(txtName))
14                 {
15                     data = data.Where(b => b.Name.Contains(txtName));
16                 }
17                 if (nStatus >= 0)
18                 {
19                     data = data.Where(b => b.IsEnable == (nStatus == (int)StageEnumHelper.ComStatus.啟用));
20                 }
21                 if (dOperateTime > Convert.ToDateTime("1991-01-01"))
22                 {
23                     data = data.Where(b => b.OperateTime >= dOperateTime && b.OperateTime < dOperateTime.AddDays(1));
24                 }
25 
26                 moPageResult.MoPageContent(
27                     data,
28                     b => b.OperateTime,
29                     b => new
30                     {
31                         Id = b.Id,
32                         Name = b.Name,
33                         Link = b.Link,
34                         Des = b.Des,
35                         IsEnable = b.IsEnable,
36                         Operator = b.Operator,
37 
38                         OperatorDes = b.MoUserInfo.NickName,
39                         EnableDes = b.IsEnable ? "啟用" : "禁用",
40                         OperateTime = b.OperateTime
41                     });
42 
43             }
44             catch (Exception ex)
45             {
46             }
47             return Json(moPageResult, JsonRequestBehavior.AllowGet);
48         }

後臺介面Request.Params獲取的幾個引數就是從前端

1 2 3 4 5

var data = { txtName: $("input[name='txtName']").val(), nStatus: $("select option:selected").val(), dOperateTime: $("input[name='dOperateTime']").val() };

　　傳遞過來的，分別程式碼了檢視中的名稱，狀態，操作時間等查詢條件；下面來看下，後臺這兒沒有看到獲取類似分頁的當前頁數和分頁記錄數的操作，是封裝到了MoPageResult類中的MoPageContent()中，來看下MoPageResult類程式碼如：

 1 #region  分頁資料返回
 2 
 3         public class MoPageResult<TResult> where TResult : class, new()
 4         {
 5 
 6             public MoPageResult()
 7             {
 8              
 9             }
10 
11             public IQueryable<TResult> MoResult;
12 
13             /// <summary>
14             /// 總頁數
15             /// </summary>
16             public int PageTotal { get; set; }
17 
18 
19             /// <summary>
20             /// 當前頁數
21             /// </summary>
22             public int CurrentPage { get; set; }
23 
24             /// <summary>
25             /// 分頁記錄數
26             /// </summary>
27             public int PageSize { get; set; }
28 
29             /// <summary>
30             /// 分頁方法
31             /// </summary>
32             /// <typeparam name="TKey"></typeparam>
33             /// <param name="query"></param>
34             /// <param name="order_desc"></param>
35             public void MoPageContent<T, TKey>(IQueryable<T> query, Expression<Func<T, TKey>> desc, Expression<Func<T, TResult>> selector = null, bool isDesc = true) where T : class,new()
36             {
37 
38                 if (HttpContext.Current == null) { return; }
39                 var Request = HttpContext.Current.Request;
40 
41                 this.PageSize = string.IsNullOrWhiteSpace(Request.Params["pageSize"]) ? 15 : Convert.ToInt32(Request.Params["pageSize"]);
42                 this.CurrentPage = string.IsNullOrWhiteSpace(Request.Params["currentPage"]) ? 1 : Convert.ToInt32(Request.Params["currentPage"]);
43 
44                 var nTotal = query.Count();
45                 this.PageTotal = nTotal / this.PageSize + (nTotal % this.PageSize > 0 ? 1 : 0);
46 
47                 if (selector != null)
48                 {
49                     if (isDesc)
50                     {
51                         query = query.OrderByDescending(desc);
52                     }
53                     else
54                     {
55                         query = query.OrderBy(desc);
56                     }
57                     this.MoResult = query.
58                              Skip((this.CurrentPage - 1) * this.PageSize).
59                              Take(this.PageSize).
60                              Select(selector);
61                 }
62             }
63 
64         }
65 
66         #endregion

MoPageContent()中預設是獲取了pagesize，currentpage引數，這樣減少了使用者操作性，並且此方法承擔了計算總頁數和執行分頁語句的角色，注意最後查詢語句Select(selector)，selector是Expression<Func<T, TResult>>型別，這個T有條件約束where T : class,new()；我在呼叫該分頁類的使用傳遞的T是dynamic，因為賴人如我覺得匿名類更方便；唯一遺憾的是select輸出暫時無法直接對某個屬性直接使用方法；

最後，外掛使用還需要注意一個地方，就是時間，如果後臺不處理時間直接DateTime的json格式化，那麼在外掛獲取出來的時間格式如：

這個時候就需要在使用shenniu.pager.js外掛時候在屬性headText中，指定時間列的格式如：

1	{ nickName: "操作時間", name: "OperateTime", format: "yyyy-MM-dd" }

　　使用format格式化時間格式，這個外掛相容的給有：yyyy,MM,dd,HH,mm,ss，相信滿足大家需要了；

. 開發者視角閱讀shenniu.pager.js程式碼

首先，我們從上而下，映入眼簾的是外掛屬性:

 View Code

裡面已經包括了註釋說明，看起來應該不是問題； 

相關推薦