ligerGrid Ajax分页获取排序 详细介绍
2015.5.15 备注 setParam方法也可以这样简洁化 刚开始用ligerGrid作分页排序的时候比较头疼,查找,上下页等处理后台都没法准确的获取前台查找控件里面的值,API里面也没有什么详细的解释 最后网上找了很久感觉都不是很全的资料,现在把这个结合说下 给自己做个笔记 先上个果图 做分页一般需要注意几点的就是,页大小,当前页,排序字段,排序类型(倒叙或顺序),查询条件, 所以这里写了一个公共方法返回所需的排序数据 和查询条件下总数据条数 这个是调用的时候处理的一个方法 /// <summary> /// 得到一页日志数据 /// </summary> /// <param name="allCount"></param> /// <param name="pageSize"></param> /// <param name="pageIndex"></param> /// <param name="title"></param> /// <param name="type"></param> /// <param name="date1"></param> /// <param name="date2"></param> /// <param name="userName"></param> /// <param name="orderBy"></param> /// <returns></returns> public List<Solution.HPK.CoreArea.Model.Log> GetPagerData(out long allCount,int pageSize = 15,int pageIndex = 1,string title = "",string type = "",string date1 = "",string date2 = "",string userName = "",string orderBy = "") { StringBuilder where = new StringBuilder(); List<SqlParameter> parList = new List<SqlParameter>(); if (!string.IsNullOrEmpty(title)) { where.Append(" AND CHARINDEX(@Title,Title)>0 "); parList.Add(new SqlParameter("@Title",SqlDbType.NVarChar) { Value = title }); } if (!string.IsNullOrEmpty(type)) { where.Append(" AND Type=@Type "); parList.Add(new SqlParameter("@Type",SqlDbType.NVarChar) { Value = type }); } if (date1.IsDateTime()) { where.Append(" AND WriteTime>=@Date1 "); parList.Add(new SqlParameter("@Date1",SqlDbType.DateTime) { Value = date1.ToDateTime().ToString("yyyy-MM-dd 00:00:00") }); } if (date2.IsDateTime()) { where.Append(" AND WriteTime<=@Date2 "); parList.Add(new SqlParameter("@Date2",SqlDbType.DateTime) { Value = date2.ToDateTime().AddDays(1).ToString("yyyy-MM-dd 00:00:00") }); } if (!userName.IsNullOrEmpty()) { where.Append(" AND UserName like '%" + userName + "%' "); } string sql = Solution.HPK.CoreArea.Utility.DataBase.DBHelper.GetPaerSql("Log","ID,Title,Type,WriteTime,UserID,UserName,IPAddress,URL,Contents,Others,OldXml,NewXml",where.ToString(),orderBy,pageSize,pageIndex,out allCount,parList.ToArray()); SqlDataReader dataReader = Solution.HPK.CoreArea.Utility.DataBase.DBHelper.ExecSelect(sql,parList.ToArray()); List<Solution.HPK.CoreArea.Model.Log> List = DataReaderToList(dataReader); dataReader.Close(); return List; }
里面有个Solution.HPK.CoreArea.Utility.DataBase.DBHelper.GetPaerSql方法就是所用的公用方法 /// <summary> /// 得到分页sql /// </summary> /// <param name="sql"></param> /// <returns></returns> public static string GetPaerSql(string table,string fileds,string where,string order,int size,int number,out long count,SqlParameter[] param = null) { string where1 = string.Empty; if (where.IsNullOrEmpty()) { where1 = ""; } else { where1 = where.Trim(); if (where1.StartsWith("and",StringComparison.CurrentCultureIgnoreCase)) { where1 = where1.Substring(3); } } string where2 = where1.IsNullOrEmpty() ? "" : "where " + where1; string sql = string.Format("select {0},ROW_NUMBER() OVER(ORDER BY {1}) as PagerAutoRowNumber from {2} {3}",fileds,order,table,where2); string count1 = GetFieldValue(string.Format("select count(*) from {0} {1}",where2),param); long i; count = count1.IsLong(out i) ? i : 0; StringBuilder sql1 = new StringBuilder(); sql1.AppendFormat("select {0} from (",fileds.IsNullOrEmpty() ? "*" : fileds); sql1.Append(sql); sql1.AppendFormat(") as PagerTempTable"); if (count > size) { //(第几页-1)*页面大小+1 an 第几页*页面大小 sql1.AppendFormat(" where PagerAutoRowNumber between {0} and {1}",(number - 1) * size + 1,number * size); } return sql1.ToString(); }
这个方法可以直接拿去使用,具体的参数也一看就能懂的 后台获取的数据的核心方法有了 下面就是前台UI的设计 var mainGrid =$("#mainGrid").ligerGrid({ columns: [ { display: '序号',name: 'Index',align: 'center',width: 40 },{ display: '标题',name: 'Title',align: 'left' },{ display: '分类',name: 'Type',width: 140 },{ display: 'IP地址',name: 'IPAddress',{ display: '创建日期',name: 'WriteTime',{ display: '操作员',name: 'UserName',width: 120 },],usePager: true,height: '99%',checkbox: true,rownumbers: false,pageSizeOptions: [16,32,48],pageSize: 16,page: 1,url: "Handler/GetPage.ashx",sortName: 'WriteTime',sortOrder: 'Desc',onToFirst: onToFirst,onToPrev: onToPrev,onToNext: onToNext,onToLast: onToLast });
url属性 是用来Ajax请求的一个路径 sortName sortOrder 这2个属性是默认按照哪个字段排序的,如果不写的话得再后台去赋默认值,建议直接在前台写 onToFirst,onToPrev,onToNext,onToLast首页,上页,下页,末页,这些事件 必须在前台手动处理,要不然界面所需要的查询条件就没法传送到后台 具体实现起来也很简单,写一个默认赋值Ajax参数的方法 前面4个都调用那个方法就好了 //设置Ajax参数 function setParms() { mainGrid.setParm("title",$("#txtTitle").val()); mainGrid.setParm("type",$("#txtType").val() == "==全部==" ? "" : $("#txtType").val()); mainGrid.setParm("userName",$("#txtUserName").val()); mainGrid.setParm("startDate",$("#txtStartDate").val()); mainGrid.setParm("endDate",$("#txtEndDate").val()); }
//首页 function onToFirst() { setParms(); } //末页 function onToLast() { setParms(); } //上一页 function onToPrev() { setParms(); } //下一页 function onToNext() { setParms(); }
//查询按钮 $("#btnSearch").ligerButton({ click: function () { //重置查询页数,从第一页开始 mainGrid.set({ page: 1,newPage: 1 }); //设置Ajax参数 setParms(); //重新请求 mainGrid.loadData(mainGrid.url); } });
是捉摸了很久才弄好的 主要是为了解决一个问题 比如当前页为3页 总页数为8页 如果点击查找不加mainGrid.set({ page: 1,newPage: 1 });这个 他结果会定在第3页,这样就会有问题,一般点击查找都是初始为第一页 前台这么多大致就好了下面就是到后台 ligerGuid的Ajax默认是post提交方式,并且默认把当前页,页大小,排序字段,排序类型闯过去 直接接受就好了 //当前页 int page = context.Request.Form["page"].ToInt32(); //页大小 int pageSize = context.Request.Form["pageSize"].ToInt32(); //排序字段 string sortName = context.Request.Form["sortName"]; //排序顺序 string sortOrder = context.Request.Form["sortOrder"];
然后获取前台床过来的查询参数 返回一个{Total:xxxx,Rows:[]}这样的json对象就好了 Total 和Rows的格式是必须存在的要不然ligerGuid不认 如 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //当前页 int page = context.Request.Form["page"].ToInt32(); //页大小 int pageSize = context.Request.Form["pageSize"].ToInt32(); //排序字段 string sortName = context.Request.Form["sortName"]; //排序顺序 string sortOrder = context.Request.Form["sortOrder"]; //其他自定义的Ajax参数 string title = context.Request.Form["title"]; string type = context.Request.Form["type"]; string userName = context.Request.Form["userName"]; string startDate = context.Request.Form["startDate"]; string endDate = context.Request.Form["endDate"]; LogBll logBll = new LogBll(); //查询数据的总数 long allCount; //分页查找数据 var logList = logBll.GetPagerData(out allCount,page,title,type,startDate,endDate,userName,sortName + " " + sortOrder); //返回的Json数组 List<string> jsonList = new List<string>(); for (int i = 0; i < logList.Count; i++) { var log = logList[i]; jsonList.Add("{"ID":"" + log.ID + "","Index":"" + ((i + 1) + (page - 1) * pageSize) + "","Title":"" + log.Title + "","Type":"" + log.Type + "","IPAddress":"" + log.IPAddress + "","WriteTime":"" + log.WriteTime.ToString("yyyy-MM-dd HH:mm:ss") + "","UserName":"" + log.UserName + ""}"); } context.Response.Write("{"Total":"" + allCount + "","Rows":[" + string.Join(",",jsonList) + "]}"); }
好了 就这么多了,完全符合分页、查找、字段排序功能,这一条代码都不缺 可以直接使用 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |