由于项目的需要，最近一直在学习 .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. 2016/2/29 html 思维导图

  2. mongodb01--安装

    配置Mongo服务端 安装MongoDB 1.按照操作系统下载http://www.mongodb.org/downloads. 2.在D盘新建MongoDB文件夹(此文件夹为自定义的数据库安装目录D ...

  3. caioj1097: [视频]树状数组1（快速求和计算） cdq分治入门

    这题虽然是个树状数组,但是也可以用cdq分治做啊~~,这个就是一个浅显的二维偏序的应用? cdq分治和普通的分治有什么区别? 举个栗子:有4个小朋友,你请他们吃饭,假如你分治搞,就会分成很多子问题—— ...

  4. POJ2528 Mayor's posters —— 线段树染色 + 离散化

    题目链接:https://vjudge.net/problem/POJ-2528 The citizens of Bytetown, AB, could not stand that the cand ...

  5. 并不对劲的bzoj2820:p2257:YY的GCD

    题目大意 \(t\)(\(t\leq10^4\))组数据,给定\(n,m\)(\(n,m\leq10^6\))求 \[\sum_{x=1}^{n}\sum_{y=1}^{m}[gcd(x,y)=1]\ ...

  6. BZOJ_4184_shallot_线段树按时间分治维护线性基

    BZOJ_4184_shallot_线段树按时间分治维护线性基 Description 小苗去市场上买了一捆小葱苗,她突然一时兴起,于是她在每颗小葱苗上写上一个数字,然后把小葱叫过来玩游戏. 每个时刻 ...

  7. [TJOI2016&HEOI2016] 排序

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4552 [算法] 首先 , 二分答案x , 将比x小的数看作1,比x大的数看作0 然后 ...

  8. Goland软件使用教程（二）

    Goland软件使用教程(二)一.编码辅助功能 1.      智能补全 IDE通过自动补全语句来帮助您来编写代码.快捷键“Ctrl+shift+空格”将会给你一个在当前上下文中最相关符号的列表,当您 ...

  9. bzoj4811 [Ynoi2017]由乃的OJ 树链剖分+位运算

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4811 因为位运算的结果有可合并性,所以可以树链剖分,线段树维护: 细节很多,特别要注意从左往 ...

  10. saltstack源码-启动２－parsers.py选项初始化１

    class MasterOptionParser(OptionParser, ConfigDirMixIn, MergeConfigMixIn, LogLevelMixIn, RunUserMixin ...