ligerGrid Ajax分頁擷取排序 詳細介紹

標籤：ligergrid   ligergrid ajax   ligergrid分頁   ligergrid使用詳解   

剛開始用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 [email protected] ");                parList.Add(new SqlParameter("@Type", SqlDbType.NVarChar) { Value = type });            }            if (date1.IsDateTime())            {                where.Append(" AND WriteTime>[email protected] ");                parList.Add(new SqlParameter("@Date1", SqlDbType.DateTime) { Value = date1.ToDateTime().ToString("yyyy-MM-dd 00:00:00") });            }            if (date2.IsDateTime())            {                where.Append(" AND WriteTime<[email protected] ");                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分頁擷取排序 詳細介紹