jquery easyui datagrid mvc server端分页排序筛选的实现

1自定义一个ModelBinder

 public class filterRule
    {
        public string field { get; set; }
        public string op { get; set; }
        public string value { get; set; }
    }
    public class dataGridFilter
    {
        public dataGridFilter()
        {
            filterRules = new HashSet<filterRule>();
        }
        public int page { get; set; }
        public int rows { get; set; }
        public string sort { get; set; }
        public string order { get; set; }
        public IEnumerable<filterRule> filterRules { get; set; }
    }

    public class DataGridFilterBinderProvider : IModelBinder
    {
        public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
            if (controllerContext == null)
                throw new ArgumentNullException("controllerContext", "controllerContext is null.");
            if (bindingContext == null)
                throw new ArgumentNullException("bindingContext", "bindingContext is null.");
            if (bindingContext.ModelType == typeof(dataGridFilter))
            {
                HttpRequestBase request = controllerContext.HttpContext.Request;
                dataGridFilter filter = new dataGridFilter();
                if (request.HttpMethod == "GET")
                {
                    filter.order = request.QueryString["order"];
                    filter.page = Convert.ToInt32(request.QueryString["page"]);
                    filter.rows = Convert.ToInt32(request.QueryString["rows"]);
                    filter.sort = request.QueryString["sort"];
                    var filterRules = request.QueryString["filterRules"];
                    if (!string.IsNullOrEmpty(filterRules))
                    {
                        var rules = JsonConvert.DeserializeObject<IEnumerable<filterRule>>(filterRules);
                        filter.filterRules = rules;

                    }

                    return filter;
                }
                else {
                    filter.order = request.Form["order"];
                    filter.page = Convert.ToInt32(request.Form["page"]);
                    filter.rows = Convert.ToInt32(request.Form["rows"]);
                    filter.sort = request.Form["sort"];
                    var filterRules = request.Form["filterRules"];
                    if (!string.IsNullOrEmpty(filterRules))
                    {
                        var rules = JsonConvert.DeserializeObject<IEnumerable<filterRule>>(filterRules);
                        filter.filterRules = rules;

                    }

                    return filter;
                }

            }
           else
            {
                return BindModel(controllerContext, bindingContext);
            }
        }

        private Nullable<T> TryGet<T>(ModelBindingContext bindingContext, string key) where T : struct
        {
            if (String.IsNullOrEmpty(key))
                return null;

            ValueProviderResult valueResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName + "." + key);
            if (valueResult == null && bindingContext.FallbackToEmptyPrefix == true)
                valueResult = bindingContext.ValueProvider.GetValue(key);

            bindingContext.ModelState.SetModelValue(bindingContext.ModelName, valueResult);

            if (valueResult == null)
                return null;

            try
            {
                return (Nullable<T>)valueResult.ConvertTo(typeof(T));
            }
            catch (Exception ex)
            {
                bindingContext.ModelState.AddModelError(bindingContext.ModelName, ex);
                return null;
            }
        }
    }

  controller代码

 public ActionResult Get([ModelBinder(typeof(DataGridFilterBinderProvider))]dataGridFilter request)
        {
            //var filter = JsonConvert.DeserializeObject<IEnumerable< filterRule>>(filterRules);
            //int page = 1; int rows = 10; string sort = "Id"; string order = "asc"; ; IEnumerable<filterRules> filterRules = null;
            int count = products.Count();
            //var query = products.OrderBy(string.Format("{0} {1}", sort, order)).Skip((page-1)*rows).Take(rows);
            var query = products.OrderBy(string.Format("{0} {1}", request.sort, request.order)).Skip((request.page - 1) * request.rows).Take(request.rows);

            return Json(new { total = count, rows = query }, JsonRequestBehavior.AllowGet);

        }

  html代码

<script type="text/javascript">

    $(function () {
        $(‘#grid‘).datagrid({
            title: ‘Product--100‘,
            url: ‘/Home/Get‘,
            method:‘post‘,
            width: ‘100%‘,
            height: ‘auto‘,
            rownumbers: true,
            sortName: ‘Id‘,
            SortOrder: ‘asc‘,
            columns: [[
                { field: ‘Id‘, title: ‘Id‘, sortable: true },
                { field: ‘Name‘, title: ‘Name‘, sortable: true },
                { field: ‘Unit‘, title: ‘Unit‘, sortable: true },
                { field: ‘Price‘, title: ‘Price‘, sortable: true }
            ]],
            pagination: true,
            pagePosition: ‘bottom‘,
            pageSize: 10,
            enableFilter:true,
            remoteFilter:true
        }).datagrid(‘enableFilter‘);

    })

</script>

  

时间: 2024-08-07 12:07:47

jquery easyui datagrid mvc server端分页排序筛选的实现的相关文章

jquery easyui datagrid 分页数据请求

jquery easyui datagrid内置了分页的功能,当设置为 pagination: true 以后就能够启用分页功能. 启用分页以后,jquery easyui datagrid发送的数据请求中会包含两个参数: int iPageIndex = Convert.ToInt32(this.Request["page"]); int iPageSize = Convert.ToInt32(this.Request["rows"]); 这两个参数分别是当前页码

jquery easyui datagrid 分页 详解

前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-datagrid分页 有一个附加的分页控件,只需后台获取分页控件自动提交的两个参数rows(每页显示的记录数)和page(当前第几页)然后读取相应页数的记录,和总记录数total一块返回即可. 1.界面 2.前端代码 <table id="dg" title="文章管理"

easyui datagrid 客户端搜索、分页、排序

easyui datagrid的排序默认是服务器端排序,可以用sorter实现客户端排序[2]:客户端分页可用filter实现[3]:客户端搜索同样可以用filter实现. 不多说直接上代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" con

jQuery EasyUI datagrid实现本地分页的方法

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 3

jQuery EasyUI DataGrid API 中文文档

扩展自$.fn.panel.defaults,用 $.fn.datagrid.defaults重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 1.  <table id="tt"></table> 1.  $('#tt').datagrid({ 2.      url:'datagrid_data.json', 3.      columns:[[ 4.          {field:'co

Jquery easyui datagrid 导出Excel

datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <script> 2 /** 3 Jquery easyui datagrid js导出excel 4 修改自extgrid导出excel 5 * allows for downloading of grid data (store) directly into excel 6 * Method: extracts data of gridPanel store, uses columnModel to constru

jQuery EasyUI Datagrid性能优化专题

jQuery EasyUI的Datagrid组件功能算是很强大了,不过性能确实不怎么乐观,而对于性能问题,网络上几乎也找不到相关的优化资料,所谓的牛人们可能 都望而却步了.本博客以后会带着分析Datagrid组件的性能问题,并且给出优化方案,也希望大家能集思广益,给出一些好的想法. 慢在哪些方面 以目前对Datagrid的了解程度去看待性能问题,主要有以下几点: 加载大数据量时比较慢(不考虑服务端返回数据的时间),这点尤其体现在IE浏览器里面: 大数据量时,加载后,操作很不流畅,勾选慢,sing

jquery easyUI datagrid 通过一般处理程序绑定数据库

初学easyui,搞了三天,终于将datagrid与后台数据库绑定成功,界面有点不太美观,以后继续努力. 后台一般处理程序取数据代码 1 <%@ WebHandler Language="C#" Class="jsonSms_group" %> 2 3 using System; 4 using System.Web; 5 using System.Configuration; 6 using System.Data; 7 using System.Da

jQuery EasyUI Datagrid组件的完整的基础DOM结构

该日志由 世纪之光 于2年前发表在datagrid分类下 转载: jQuery EasyUI Datagrid组件的完整的基础DOM结构 | WebUI框架使用参考+ http://www.easyui.info/archives/1157.html 关键字: datagrid源码分析, datagrid结构, easyui源码分析 标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会