ligerGrid Ajax分页获取排序 详细介绍

刚开始用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}", table, 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', align: 'center', width: 140 },
                { display: 'IP地址', name: 'IPAddress', align: 'center', width: 140 },
                { display: '创建日期', name: 'WriteTime', align: 'center', width: 140 },
                { display: '操作员', name: 'UserName', align: 'center', 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
            });

ligerGrid这个方法不懂的可以去参考Api，着重需要注意

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);
                }
            });

//上面这个句  mainGrid.set({ page: 1, newPage: 1 });

是捉摸了很久才弄好的

主要是为了解决一个问题 比如当前页为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, pageSize, 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) + "]}");
        }

好了 就这么多了，完全符合分页、查找、字段排序功能，这一条代码都不缺 可以直接使用

ligerGrid Ajax分页获取排序 详细介绍

原文：http://blog.csdn.net/qq873113580/article/details/45227617