由于项目的需要，最近一直在学习 .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. ASP.NET for WebApi

    WebApi,听说过吧?呵呵. 感觉比WebService,WCF要强.尤其是那个啥WCF,啥鬼东西,真难懂.真难搞.真难用. 说比WebService要强,是因为不用在本地先生成个代理.而且XML也 ...

  2. Chapter1-data access reloaded:Entity Framework（上）

    本章包括以下几个部分: 1.DataSet and classic ADO.NET approach2.Object model approach3.Object/relational mismatc ...

  3. Count on an IEnumerable<dynamic>

    http://stackoverflow.com/questions/7733305/count-on-an-ienumerabledynamic int count = Enumerable.Cou ...

  4. The type exists in both DLLs

    2>C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\c0b37647\aaceda91\Ap ...

  5. CodeForces-213E：Two Permutations（神奇的线段树+hash）

    Rubik is very keen on number permutations. A permutation a with length n is a sequence, consisting o ...

  6. mysql数据恢复失败记录

    今天遇到了MySQL有几个数据表空间丢失的问题,作为一个外行尝试好久没恢复成功,考虑到只是几个基础数据表,就删除数据表停止服务,删除ibd文件后再创新创建表解决了问题. 近期的一些事让我不像以前一样钻 ...

  7. CollabNetSubversionEdge 4.0.4教程

    CollabNetSubversionEdge是svn的集成环境,集合subversion,apache,viewvc, 参考网址:http://blog.miniasp.com/post/2011/ ...

  8. Linux的gnu c下itoa的代替函数用sprintf（转载）

    转自:http://www.linuxidc.com/Linux/2011-01/31600.htm int number = 12345; char string[25]; // itoa(numb ...

  9. Ruby  String类

    String类 更新: 2017/06/10 更新: 2017/06/23 puts()要空格可以直接不加参数 更新: 2017/08/17 增加rails引入的titleize 更新: 2017/1 ...

  10. HDU1072:Nightmare [DFS]

    题目链接:Nightmare 题意: 给出一张n*m的图,0代表墙,1代表可以走,2代表起始点,3代表终点,4代表炸弹重置点 问是否能从起点到达终点 分析: 一道很好的DFS题目,炸弹重置点必然最多走 ...