.Net Mvc EasyUI DataGrid 分页

摘要:
由于项目的需要,我一直在学习。netMVC和EasyUI。上周,我写了一篇“.NetMvc返回Json,动态生成EasyUITree”。今天,我将在EasyUI中编写另一个重要组件DataGrid。我们在DataGrid中使用了更多页面。许多在线方法是通过拼接SQL语句生成的。本文使用Linqtosql来追求代码的简单和美观。废话不多说,开始实现DataGrid的分页。

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

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

.Net Mvc EasyUI DataGrid 分页第1张

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

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

          .Net Mvc EasyUI DataGrid 分页第2张

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

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

.Net Mvc EasyUI DataGrid 分页第3张.Net Mvc EasyUI DataGrid 分页第4张
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>分页</title>
</head>
<body>
    <script src="http://t.zoukankan.com/~/Scripts/WebJs/FlowRun.js"></script>
    <table   ></table>  
</body>
</html>
页面代码

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

.Net Mvc EasyUI DataGrid 分页第5张.Net Mvc EasyUI DataGrid 分页第6张
$(function () {
    $('#dg').datagrid({
        url: '/FlowRun/GetEFList',
        pagination: true,
        fit:true,
        columns: [[
            { field: 'YXID', title: 'YXID',  100 },
            { field: 'StartUserID', title: '填表人',  100 },
            { field: 'TableName', title: '表单名称',  100 },
            { field: 'TableID', title: '表单ID',  100 },
            { field: 'NextUserID', title: '下一步骤人ID',  100 },
            { field: 'FinishUserID', title: '结束人ID',  100 },
            { field: 'CurrentStepNum', title: '当前步骤号',  100 },
            { field: 'BeginTime', title: '填报时间',  100 },
            { field: 'UpdateTime', title: '更新时间',  100 },
            { field: 'EndTime', title: '结束时间',  100 },
            { field: 'State', title: '状态',  100 },
            { field: 'HRAttitude', title: '人力资源审核',  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中的具体方法

 1         public ActionResult GetEFList()
 2         {
 3             MVCEFEntities context = new MVCEFEntities();           //生成上下文
 4             DataGridJson obj = new DataGridJson();                 //创建EasyUI DataGrid 所需格式对象
 5             int pageNum = int.Parse(Request.Form["page"]);         //返回第几页
 6             int RowsNum = int.Parse(Request.Form["rows"]);         //返回行数
 7             var All = from c in context.FlowRun                    //得到数据集,这里通过Linq 得到表中记录
 8                         select c;
 9             obj.total = All.Count();
10             obj.rows = All.OrderBy(p => p.YXID).Skip(pageNum).Take(RowsNum);     //获取到第几页,需要多要条记录
11             return Json(obj);
12         }

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

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

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

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

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

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

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

                                                          转载请标注出处

免责声明:文章转载自《.Net Mvc EasyUI DataGrid 分页》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇把WebForm移植到.Net MVC中.Net Mvc 返回Json,动态生成EasyUI Tree下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

EasyUI_使用datagrid分页 (Day_28)

本次分页涉及技术点 SSM+PageHelper+DatagrId 先来看下效果: 这是无条件分页,下一篇博客我们将讲有条件分页。 无论你是使用js加载table 还是直接使用标签。 使用datagrid分页都离不开一个属性:pagination 1、若使用js加载数据,pagination 属性设置为'true' 即可在DataGrid控件底部显示分...

wpf研究之道——datagrid控件数据绑定

前台: <DataGrid x:Name="TestCaseDataGrid" ItemsSource="{Binding}" > {binding} 是个简写的方式,绑定的是datagrid 对象的DataContext 后台: this.TestCaseDataGrid.DataContext = Data.Pag...

随说秋色园从Access升迁到MSSQL过程

秋色园的运行环境概况: 目前运行在国外godaddy的虚拟主机的一个子目录中,数据库为Access。 随说Access分页: 1:top max(id) 在CYQ.Data 数据框架支持上Access时,以top max(id)为分页方式。 在秋色园没有多少文章的情况下,基本上维持着正常的秩序。 直到秋色园在进化版本时,多字段排序的情况出现,如:or...

EasyUI DataGrid 添加 Footer

做后台管理界面时,EasyUI 的 DataGrid 经常会被用到,有时候一些总的统计数据不合适放在数据表格里,需要单独显示,这时候就可以放在Footer中显示而不必另外布局。 该怎么给 DataGrid 添加 Footer,Document 里面说的不是很详细,Demo 里面有这个例子,看 datagrid_data2.json 数据格式就明白了。 {...

Paging 简单自由的分页生成器

传统的分页都是由后端输出 HTML 生成的,使用 AJAX 获取 JSON 显示内容时就需要由前端创建分页。 Paging 只需要知道当前页码和总页数就可以快速生成分页。 Paging 自带了一套默认的模板和样式: Paging 的使用方法非常简单: <link rel="stylesheet" href="http://static.nimojs...

php 数据分页类,可自定义多个分页样式

调用方法: //测试分页 public functionpageTestAction() { Load::load_class('getPage',DIR_BF_ROOT.'classes',0); $total = M('category')->findCount(); //总条数...