.Net Mvc EasyUI DataGrid 分页
由于项目的需要,最近一直在学习 .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 分页的更多相关文章
- asp.net mvc easyui datagrid分页
提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...
- EasyUI DataGrid分页数据绑定
记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...
- EasyUI datagrid 分页Json字符串格式
//EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...
- easyUI datagrid 分页参数page和rows
Struts2获取easyUI datagrid 分页参数page和rows 用pageHelper分页时,只要是能够获取前台传来的两个参数page和rows基本就完成了很大一部分. 获取方法:定义两 ...
- EasyUI Datagrid 分页显示(客户端)
转自:https://blog.csdn.net/metal1/article/details/17536185 EasyUI Datagrid 分页显示(客户端) By ZYZ 在使用JQuery ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
- EasyUI DataGrid 分页实现示例
使用easyui可以很方便的开发web程序,这儿仅展示一个后台使用mvc来实现分页的示例,截图如下 示例代码如下 1. 创建模型类,代码如下 using System; using System.Co ...
- easyui datagrid 分页略解
easyui datagrid 本身自带了分页功能. 但是这个需要你自己控制. 在后台可以得到两个datagrid的参数,rows 和page.其中rows是每页要显示的个数,page是第几页.单纯的 ...
- jquery easyui datagrid 分页详解
由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...
随机推荐
- 【bzoj1561】[JSOI2009]去括号
#include<algorithm> #include<iostream> #include<cstdlib> #include<cstring> # ...
- 连通图(Tarjan算法) 专题总结
一.题目类型: 1.有向图的强连通分量: POJ1236 Network of Schools HDU1269 迷宫城堡 2.割点 & 割边: UESTC - 900 方老师炸弹 UVA315 ...
- The type exists in both DLLs
2>C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\c0b37647\aaceda91\Ap ...
- 源代码管理工具GIT
01.GIT简介 svn是集中式的源代码管理工具,必须联网才能操作 git是分布式的. 有两中:一个是本地代码仓库,一个是远程代码仓库 分布式源代码管理工具 02.GIT - 本地代码仓库使用流程 1 ...
- BZOJ3669(NOI2014):魔法森林 (LCT维护最小生成树)
为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为1..N,边标号为1..M.初始时小E同学在号节点1,隐士则住在号节点N ...
- 关于使用kafka时对于大数据消息体是遇到的问题
kafka对于消息体的大小默认为单条最大值是1M. 但是在我们应用场景中, 常常会出现一条消息大于1M, 如果不对kafka进行配置. 则会出现生产者无法将消息推送到kafka或消费者无法去消费kaf ...
- Akka源码分析-CircuitBreaker(熔断器)
熔断器,在很多技术栈中都会出现的一种技术.它是在分布式系统中提供一个稳定的阻止嵌套失败的机制. 该怎么理解呢?简单来说,在分布式环境中,如果某个计算节点出现问题,很容易出现失败的逆向传到或整个系统的雪 ...
- python安装教学
1.首先登陆到python的官方网站 1https://www.python.org/ 2.鼠标放在Download上,点击下面对应的型号,我的是Windows 3.点击Windows到此页面,点击3 ...
- 面试基础试题 一 http和HTTPS的区别
作为老生常谈的问题,我主要给出我自己的理解和结合大牛的叙述的综合看法,来检验自己学习 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何 ...
- Logstash读取文本信息并写入到ES
Logstash读取文本信息并写入到ES 前提是ELK安装没问题 进入到logstash安装目录下的bin目录(我的logstash安装目录:/usr/local/) [root@es1 bin]# ...