由于项目的需要，最近一直在学习 .net MVC 和EasyUI。上周写了一个《.Net Mvc 返回Json，动态生成EasyUI Tree》，今天再写一个EasyUI中另一个重要的组件DataGrid，DataGrid的分页我们用的比较多，网上很多的方法都是通过拼接SQL语句生成的，本文采用的是Linq to sql，追求代码的简洁美。废话不多说，开始实现DataGrid的分页。

1.还是老习惯，先上效果图吧。

说明：这个是最终的截图，数据共有600多条，这个只为了实现分页功能，所以，表中的时间显示问题，暂时就不追究了。

2. 正题，首先从数据库自动生成的模型文件代码（edmx），我用的是VS2012.

说明： 这个只是为学习，所以，只添加了一个表。由于数据库已经存储，采用Database first。

3. 对应页面的前端的JS代码。

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>分页</title>

</head>

<body>

    <script src="~/Scripts/WebJs/FlowRun.js"></script>

    <table id="dg" ></table>

</body>

</html>

页面代码

JS代码单独放到.js 文件中，在页面中引用就好了。

$(function () {

    $('#dg').datagrid({

        url: '/FlowRun/GetEFList',

        pagination: true,

        fit:true,

        columns: [[

            { field: 'YXID', title: 'YXID', width: 100 },

            { field: 'StartUserID', title: '填表人', width: 100 },

            { field: 'TableName', title: '表单名称', width: 100 },

            { field: 'TableID', title: '表单ID', width: 100 },

            { field: 'NextUserID', title: '下一步骤人ID', width: 100 },

            { field: 'FinishUserID', title: '结束人ID', width: 100 },

            { field: 'CurrentStepNum', title: '当前步骤号', width: 100 },

            { field: 'BeginTime', title: '填报时间', width: 100 },

            { field: 'UpdateTime', title: '更新时间', width: 100 },

            { field: 'EndTime', title: '结束时间', width: 100 },

            { field: 'State', title: '状态', width: 100 },

            { field: 'HRAttitude', title: '人力资源审核', width: 100 }

        ]],

        toolbar: [{

            text: '添加',

            iconCls: 'icon-add',

            handler: function () {

                openDialog("add_dialog", "add");

            }

        }, '-', {

            text: '修改',

            iconCls: 'icon-edit',

            handler: function () {

                openDialog("add_dialog", "edit");

            }

        }, '-', {

            text: '删除',

            iconCls: 'icon-remove',

            handler: function () {

                delAppInfo();

            }

        }]

    });

})

前端DataGrid的JS代码

说明： 这个只是为了学习，所以DataGrid中的toolbar的各种方法都没有写。前端调用后台controller中的方法。“ url: '/FlowRun/GetEFList' ” 这个是DataGrid的默认属性。

4. DataGridJson model 代码，这个Model，转换成Json，传递给前台DataGrid.

namespace Model

{

    public class DataGridJson

    {

        public int total { get; set; }    //记录的总条数

        public object rows { get; set; }  //具体内容

    }

}

说明：DataGrid分页的时候，需要两个数据，一个是总条数，一个是具体内容。把这个model实例化，并赋值，然后转换成json格式。万能的object类型（参见msdn）。

5.对应Controller中的具体方法

         public ActionResult GetEFList()

         {

             MVCEFEntities context = new MVCEFEntities();           //生成上下文

             DataGridJson obj = new DataGridJson();                 //创建EasyUI DataGrid 所需格式对象

             int pageNum = int.Parse(Request.Form["page"]);         //返回第几页

             int RowsNum = int.Parse(Request.Form["rows"]);         //返回行数

             var All = from c in context.FlowRun                    //得到数据集，这里通过Linq 得到表中记录

                         select c;

             obj.total = All.Count();

             obj.rows = All.OrderBy(p => p.YXID).Skip(pageNum).Take(RowsNum);     //获取到第几页，需要多要条记录

             return Json(obj);

         }

说明：上面的代码中，红色的代码，表示的就是分页的核心方法。Skip()传入获取的第几页，Take()传入需要得到多少条。具体可以参看 msdn资料。

总结： 感觉这一篇和上一篇，总体的思路比较接近。梳理一下。

1.首先，先确定EasyUI需要的Json格式，主要指那些属性。

2.建立对应Json格式的Model，这里最关键是Model的属性类型，很多不确定类型的地方，可以用object类型，让系统自己确定。

3.给实例化出来的对象赋值。

　　　4.把对象转换成json对象，然后传递给前台。

        由于本人的语言表达能力有限，如果有什么地方没有说明白，可以加我QQ：2413660559 交流 ，也欢迎给我指出文中的错误。

　　　　　                                                   　　转载请标注出处

.Net Mvc EasyUI DataGrid 分页的更多相关文章

  1. asp.net mvc easyui datagrid分页

    提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...

  2. EasyUI DataGrid分页数据绑定

    记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...

  3. EasyUI datagrid 分页Json字符串格式

    //EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...

  4. easyUI datagrid 分页参数page和rows

    Struts2获取easyUI datagrid 分页参数page和rows 用pageHelper分页时,只要是能够获取前台传来的两个参数page和rows基本就完成了很大一部分. 获取方法:定义两 ...

  5. EasyUI Datagrid 分页显示（客户端）

    转自:https://blog.csdn.net/metal1/article/details/17536185 EasyUI Datagrid 分页显示(客户端) By ZYZ 在使用JQuery ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（8）-MVC与EasyUI DataGrid 分页

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...

  7. EasyUI DataGrid 分页实现示例

    使用easyui可以很方便的开发web程序,这儿仅展示一个后台使用mvc来实现分页的示例,截图如下 示例代码如下 1. 创建模型类,代码如下 using System; using System.Co ...

  8. easyui datagrid 分页略解

    easyui datagrid 本身自带了分页功能. 但是这个需要你自己控制. 在后台可以得到两个datagrid的参数,rows 和page.其中rows是每页要显示的个数,page是第几页.单纯的 ...

  9. jquery easyui datagrid 分页详解

    由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...

随机推荐

  1. CodeChef Consecutive Snakes 三分（整数）

    题意 在年度阅兵中,所有的士兵蛇都在阅兵场集合了,但这些蛇的站位不对.整场阅兵必须能从主席台看清楚,所有蛇都应该站成一排.但这些士兵非常懒惰,你必须指挥士兵重新排队,使得所有人的移动距离之和最短. 形 ...

  2. Hibernate 之 Locking

    在我们业务实现的过程中,往往会有这样的需求:保证数据访问的排他性,也就是我正在访问的数据,别人不能够访问,或者不能对我的数据进行操作.面对这样的需求,就需要通过一种机制来保证这些数据在一定的操作过程中 ...

  3. JDBC连接数据库查询信息的步骤（提取成配置文件方式）

    硬编码格式的弊端:数据库发生改变时,要重新修改代码,重新编译和部署 解决方法:将数据库信息写在配置文件当中,让程序通过读取配置文件来获得这些信息 jdbc.driver.class=com.mysql ...

  4. HDU3001 Travelling —— 状压DP（三进制）

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3001 Travelling Time Limit: 6000/3000 MS (Java/ ...

  5. docker随谈

    最近在搞Docker,其实去年就听老师说过这个东西,说非常火,当时不以为然,还错把它当成docky.当时想想docky不就是一个快速启动工具么,有什么.现在想想真是惭愧... Docker的牛逼之处网 ...

  6. YTU 1011: Rails

    1011: Rails 时间限制: 1000 Sec  内存限制: 64 MB 提交: 16  解决: 9 题目描述 There is a famous railway station in PopP ...

  7. wpa_supplicant drivers 查看跟踪

    /**************************************************************************** * wpa_supplicant drive ...

  8. 字符设备驱动另一种写法—mmap方法操作LED

    最近在看韦老师的视频,讲解了很多种字符设备的驱动写法.经过自己的研究之后,我发现还有另外一种写法,直接在应用层操作,省去了内核中的地址映射部分,使得用户可以在应用层直接操作LED.        mm ...

  9. Ueditor中代码的高亮和背景在前端页面的实现

    首先废话就不多说,这个富文本编辑器的下载和js等基本文件的导入略. 我的最终目标是这样的,我们在页面中的富文本框中输入代码,希望它能够被后台接受.存入数据库,当通过服务器将这些代码再一次显示在前台的页 ...

  10. Extjs4 登陆界面

    原文地址:http://fengxinnl.iteye.com/blog/1950585 <script src="ext4.2/bootstrap.js" type=&qu ...