kendo ui使用之Grid后台分頁查詢

UI框架kendoui非常不錯，這里附上地址：http://demos.telerik.com/kendo-ui/grid/index

它的API很強大，不過相信有很多懶人不願意認真的去學習和了解，單單看例子，可能不能完全滿足我們要實現的功能，這里就一步步教大學實現后台分頁查詢功能。

新建一個ASP.NET的WEB項目，請在WEB中引入kendpublic class DataHandler : IHttpHandler

public class DataHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            //獲取當前展示的頁
            var pageIndx = int.Parse(context.Request.QueryString["page"]);
            //獲取每頁顯示的數量
            var pageSize = int.Parse(context.Request.QueryString["pageSize"]);
            //獲取查詢字段和值
            ReadFilter(context);
            //分頁
            var data = Data().Skip((pageIndx-1)*pageSize).Take(pageSize);
            var result = new { total = Data().Count, data = data };
            context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(result));
        }
        void ReadFilter(HttpContext context)
        {
            var dicSearch = new Dictionary<string, object>();//定義變量存儲查詢的字段和值
            //獲取所有存儲查詢字段和值的url的query參數，“filter[filters]”是進行查詢請求時的請求標識
            var querys = context.Request.QueryString.AllKeys.Where(m => m.StartsWith("filter[filters]"));
            //計算查詢請求時查詢參數的個數
            var queryCount = querys.Count(m => m.EndsWith("[field]"));
            for (int i = 0; i < queryCount; i++)
            {
                //請查詢字段和對應的值存儲在一個字典中
                dicSearch.Add(context.Request.QueryString["filter[filters][" + i + "][field]"], context.Request.QueryString["filter[filters][" + i + "][value]"]);
            }
        }

        IList<object> Data()
        {
            var list = new List<object>();
            for (int i = 0; i < 31; i++)
            {
                var obj = new {Id=i, Name = "姓名" + i, Age = i, Dec = "測試" + i };
                list.Add(obj);
            }
            return list;
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

 

前台代碼:

 <input type="text" id="name" name="name" class="k-textbox"  style="width: 200px;" >
    <a id="search" href="javascript:void(0);">查詢</a>
    <div id="grid"></div>
    <script>
        $(function () {
            var grid = $("#grid").kendoGrid({
                columns: [
                        { field: "Id", title: "編號", width: 200 },
                        { field: "Name", title: "姓名" },
                        { field: "Age", title: "年齡" }
                ],
                groupable: false,
                sortable: true,
                dataSource: {
                    transport: {
                        read: "DataHandler.ashx",
                        dataType: "json"
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    schema: {
                        data: function (response) {
                            return response.data;
                        },
                        total: function (response) {
                            return response.total; 
                        }
                    }
                },
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5,
                    page: 1,
                    pageSize: 10,
                    pageSizes: [10, 20, 30],
                    messages: {
                        display: "顯示 {0}-{1} 共 {2} 項",
                        empty: "沒有數據",
                        itemsPerPage: "每面顯示數量",
                        first: "第一頁",
                        last: "最后一頁",
                        next: "下一頁",
                        previous: "上一頁"
                    }
                }
            });
            $("#search").click(function () {
                var name = $("#name").val();
                grid.data("kendoGrid").dataSource.filter([
                    { field: "Name", value: name },
                    { field: "Age", value: 123 }
                ]);
            });
        });
        
    </script>