由于项目的需要，最近一直在学习 .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. 2015/12/25 ① 图灵测试 ② 安装jdk出现的问题 ③ 配置环境变量

    ①图灵测试 1,解释 图灵测试一词来源于计算机科学和密码学的先驱阿兰·麦席森·图灵写于1950年的一篇论文<计算机器与智能>.阿兰·麦席森·图灵1950年设计出这个测试,其内容是,如果电脑 ...

  2. 建立自己的私有docker（ssl&login auth）

    建立私有docker需要先建立ssl证书,然后建立htpass的登陆证书 最后使用nginx配置docker-compose.yml 参考: https://www.digitalocean.com/ ...

  3. YTU 2436: C++ 习题 输出日期时间--友元类

    2436: C++ 习题 输出日期时间--友元类 时间限制: 1 Sec  内存限制: 128 MB 提交: 1243  解决: 690 题目描述 设计一个日期类和时间类,编写display函数用于显 ...

  4. 苹果Instruments/Shark性能调试工具概述

    在Mac OS X上你可以使用Gprof这样的UNIX工具用于测试程序性能.当然,Apple也有自己的Profiling Tools,用得比较多的是Shark.10.5里还引入了一个基于DTrace的 ...

  5. 【SDOI 2014】 旅行

    [题目链接] 点击打开链接 [算法] 树链剖分 每个宗教建一棵线段树,注意数据量大,要动态开点 [代码] #include<bits/stdc++.h> using namespace s ...

  6. P4317 花神的数论题 dp

    这题我一开始就想到数位dp了,其实好像也不是很难,但是自己写不出来...常规套路,f[i][j][k][t],从后往前填数,i位,j代表是否卡着上沿,k是现在有几个1,t是想要有几个.记忆化搜索就ok ...

  7. 小程序-demo：template

    ylbtech-小程序-demo: 1.返回顶部 1.app.js 2.app.json 3.app.wxss 4.project.config.json 5.pages 6.images 7. 2. ...

  8. [软件安装]JDK

    一.软件简介1.java开发.java应用的系统基础环境2.软件版本会不同有少许差异,一般是稳定上升 二.安装环境:1.时间:2017年4月5日2.系统:centos7.3 64位(阿里云)3.软件版 ...

  9. linux 服务器 vim编辑器打开php文件出现中文乱码

    进入服务器目录 [root@VM_139_218_centos /]# cd ~ [root@VM_139_218_centos ~]# vim .vimrc 在 .vimrc 文件中写入以下代码: ...

  10. [App Store Connect帮助]七、在 App Store 上发行（2.1）设定价格与销售范围：为您的 App 设定价格

    在您提交 App 以供审核之前,您必须为您的 App 设定一个价格,该价格将用于 App Store 的所有地区.如果您没有<付费应用程序协议>,则只能选择免费. 必要职能:“帐户持有人” ...