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=" 200px;" >
    <a id="search" href="javascript:void(0);">查询</a>
    <div id="grid"></div>
    <script>
        $(function () {
            var grid = $("#grid").kendoGrid({
                columns: [
                        { field: "Id", title: "编号",  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>