详解MVC如何使用开源分页插件(shenniu.pager.js)(2)

传递过来的,分别代码了视图中的名称,状态,操作时间等查询条件;下面来看下,后台这儿没有看到获取类似分页的当前页数和分页记录数的操作,是封装到了MoPageResult类中的MoPageContent()中,来看下MoPageResult类代码如:

#region 分页数据返回 public class MoPageResult<TResult> where TResult : class, new() { public MoPageResult() { } public IQueryable<TResult> MoResult; /// <summary> /// 总页数 /// </summary> public int PageTotal { get; set; } /// <summary> /// 当前页数 /// </summary> public int CurrentPage { get; set; } /// <summary> /// 分页记录数 /// </summary> public int PageSize { get; set; } /// <summary> /// 分页方法 /// </summary> /// <typeparam></typeparam> /// <param></param> /// <param></param> 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() { if (HttpContext.Current == null) { return; } var Request = HttpContext.Current.Request; this.PageSize = string.IsNullOrWhiteSpace(Request.Params["pageSize"]) ? 15 : Convert.ToInt32(Request.Params["pageSize"]); this.CurrentPage = string.IsNullOrWhiteSpace(Request.Params["currentPage"]) ? 1 : Convert.ToInt32(Request.Params["currentPage"]); var nTotal = query.Count(); this.PageTotal = nTotal / this.PageSize + (nTotal % this.PageSize > 0 ? 1 : 0); if (selector != null) { if (isDesc) { query = query.OrderByDescending(desc); } else { query = query.OrderBy(desc); } this.MoResult = query. Skip((this.CurrentPage - 1) * this.PageSize). Take(this.PageSize). Select(selector); } } } #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中,指定时间列的格式如:

{ nickName: "操作时间", name: "OperateTime", format: "yyyy-MM-dd" }

使用format格式化时间格式,这个插件兼容的给有:yyyy,MM,dd,HH,mm,ss,相信满足大家需要了;

. 开发者视角阅读shenniu.pager.js代码

首先,我们从上而下,映入眼帘的是插件属性:

var defOption = { showId: "divShowResult", //内容显示的div url: "", //ajax数据来源地址 headText: [ { nickName: "A", colType: "checkbox", name: "Id" }, { nickName: "B", colType: "label", name: "Name", isModalHeadText: true } //isModalHeadText:是否是模式窗体头部显示的信息 ], data: {}, //查询条件 editeOption: { url: "", title: "编辑", width: 500, height: 500 }, //编辑地址,不包括id viewOption: { url: "", title: "查看", width: 500, height: 500 }, //查看地址 delOption: { url: "", title: "删除", width: 500, height: 500 }, //删除地址 currentPage: 1, //当前页数 pageSize: 15, //分页记录数 showPageTab: 6, //展示6个页数 modalExt: null, //模式窗体对象 //可忽略 callback: function () { }, //回调函数 tabId: "tab001", loading: "努力加载中,等会吧...", //可以直接写出<img src=''/> sucFun: function (data) { }, befFun: function () { }, errFun: function () { }, comFun: function () { }, timeout: 60000 //超时60S }; $.extend(defOption, option);

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwfzgy.html