一直想在项目中使用EasyUi的datagrid,但种种原因,没有实现。

这两天在开发一个项目中,愿望终于得以实现。

先看效果:

实现步骤是这样的:

1,在页面中画dataGrid,具体代码如下:

    <table id="UserListTb" class="easyui-datagrid" title="用户列表">
</table> function ListLoad() {
var columnsSetting = [
{ field: 'EnName', title: '英文名', width: ,sortable:true,
formatter: function (val, rowData) {
var url = "/User/Index/66666666";
return "<a href=\'" + url + "\');>"+rowData.EnName+"</a>";
}
},
{ field: 'CnName', title: '中文名', width: },
{ field: 'DomainName', title: '域帐号', width: },
{ field: 'ID', title: 'ID', width: , align: 'right' },
{ field: 'unitcost', title: '部门', width: , align: 'right' },
{ field: 'attr1', title: '权限组', width: },
{ field: 'status', title: '状态', width: , align: 'center' }
]; $('#UserListTb').datagrid({
url: '/User/GetUserList',
queryParams: { name: "wuf"
},
method: 'get',
width: ,
height: ,
fitColumns: true,
pagination: true,
pageSize: ,
singleSelect: true,
showPageList: false,
pageList: [,, , ],
rownumbers: true,
nowrap: false,
loadMsg: 'Load……',
columns: [columnsSetting],
onLoadSuccess: function (row) {},
onLoadError: function (arguments) {}
});
}

2,后台接收参数,返回需要的Json数据。

        /// <summary>
/// 用户列表Json
/// </summary>
/// <returns></returns>
public ActionResult GetUserList()
{
int currentPageIndex = RequestExtension.GetQueryString<int>("page", );
int pagesize = RequestExtension.GetQueryString<int>("rows", );
String sort = RequestExtension.GetQueryString<String>("sort", "");
String order = RequestExtension.GetQueryString<String>("order", ""); String name = RequestExtension.GetQueryString<String>("name", ""); Pagination pagin = new Pagination
{
CurrentPageIndex = currentPageIndex,
PageSize = pagesize,
OrderBy = String.IsNullOrEmpty(sort) ? "" : String.Concat(sort + " " + order)
}; UsersModel condition = new UsersModel(); KeyValuePair<Pagination, IList<UsersModel>> list = usersRepository.UsersPagination(pagin, condition); return JsonExtension.JsonPagination(list.Value, pagin.CurrentPageIndex, pagin.PageSize, list.Key.TotalItemCount);
}

3,关键代码,实现Json分页的方法。

        /// <summary>
/// 分页处理
/// </summary>
/// <param name="dataList"></param>
/// <param name="page"></param>
/// <param name="rows"></param>
/// <returns></returns>
public static JsonResult JsonPagination(IEnumerable<dynamic> dataList, int page, int rows, int dataListAuctalCount = -)
{
var result = dataList;
Dictionary<string, object> json = new Dictionary<string, object>();
int total = dataListAuctalCount;
if (total == - && dataList != null)
{
//自动分页
total = dataList.Count();
result = dataList.Skip((page - ) * rows).Take(rows).ToList();
}
json.Add("total", total);
json.Add("rows", result);
return new JsonResult() { Data = json, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

4,数据分页查询代码

        public KeyValuePair<Pagination, IList<UsersModel>> UsersPagination(Pagination pagin, UsersModel condition)
{
using (SqlConnection conn = DapperFactory.CrateOpenConnection())
{
String condtionStr = "";
String orderBy = "CreateTime DESC";
if (!String.IsNullOrEmpty(pagin.OrderBy))
{
orderBy = pagin.OrderBy;
} String executeQuery = String.Format(@"WITH pagintable AS(
SELECT ROW_NUMBER() OVER(ORDER BY {1} )AS RowID, ID, DomainName, EnName, PassWord, CnName, Email, DeptID, RoleId, CreateMan, CreateTime, EditMan, EditTime, IsValid FROM Users
WHERE 1= 1 {0} )
SELECT * FROM pagintable where RowID between ((@CurrentPageIndex - 1) * @PageSize) + 1 and (@CurrentPageIndex * @PageSize)", condtionStr, orderBy);
String executeCount = String.Format("SELECT COUNT(*) AS CountNum FROM Users WHERE 1= 1 {0} ", condtionStr);
var mixCondition = new
{
CurrentPageIndex = pagin.CurrentPageIndex,
PageSize = pagin.PageSize
};
List<UsersModel> listScore = conn.Query<UsersModel>(executeQuery, mixCondition).ToList();
pagin.TotalItemCount = conn.Query<Int32>(executeCount, mixCondition).SingleOrDefault<Int32>();
KeyValuePair<Pagination, IList<UsersModel>> result =
new KeyValuePair<Pagination, IList<UsersModel>>(pagin, listScore);
return result;
}
}

看着这精简的代码,和界面上强大的功能,真是有种IT人的自豪感,亲爱的您,是不是也有这种感觉呢?

MVC简捷调用EasyUI的datagrid的更多相关文章

  1. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(22)-为用户设置角色

    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    ...

  2. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(19)-用户信息的修改和浏览

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(19)-用户信息的修改和浏览  ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    ...

  3. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(17)-注册用户功能的细节处理(各种验证)

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(17)-注册用户功能的细节处理(各种验证) ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框 ...

  4. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框 ...

  5. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用

    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    ...

  6. easyui的datagrid打印(转)

    在使用easyui插件的时候,使用最多的应该是datagrid插件.有时候根据客户需求,可能需要将datagrid内容进行打印,这时候如果直接调用window.print,可能由于easyui的dat ...

  7. 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

    我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...

  8. JQuery EasyUI的datagrid的使用方式总结

    JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...

  9. SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

随机推荐

  1. Altium Designer Summer 09创建半圆焊盘方法

    关于异形焊盘的创建,可参看下面的半圆PAD的制作:1.新建一个PCB文件,然后在里面画一个半圆的Arc,即Place放置(P)>Arc,并且要将其开口处 封闭,即可用Place   放置(P)& ...

  2. JavaScript语言基础知识点图示(转)

    一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运算符 4.JavaScript 数组 5.Ja ...

  3. POJ 2153 Rank List (map映射)

    水题,竟然花了那么多时间...主要是不知道为什么,明明在本机上编译过去了,但是用c++提交却编译错误...最后用g++提交AC 题意:给出n个学生的名字,然后给出m个测验. 每个测验给出n个学生的分数 ...

  4. 【mysql5.6】数据类型

    一.数值类型 int(5) 表示显示宽度为5,默认为显示宽度11. zerofill 属性:用0填充前面空位 auto_increment 属性:只用于整数.一般从1开始,每行增加1.一个表最多只能有 ...

  5. POJ 2021

    #include <iostream> #include <string> #include <algorithm> #define MAXN 105 using ...

  6. Jquery---用jQuery实现的智能隐藏、滑动效果的返回顶部代码

    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script& ...

  7. [你必须知道的.NET]第三十回:.NET十年(下)

    发布日期:2009.05.11 作者:Anytao © 2009 Anytao.com ,Anytao原创作品,转贴请注明作者和出处. /// <summary> /// 本文部分内容,已 ...

  8. 传说中的WCF(8):玩转消息协定

    Message翻译成中文,相信各位不陌生,是啊,就是消息,在WCF中也有消息这玩意儿,不知道你怎么去理解它.反正俺的理解,就像我们互发短信一个道理,通讯的双方就是服务器与客户端,说白了吧,就是二者之间 ...

  9. 叠罗汉III之推箱子

    有一堆箱子,每个箱子宽为wi,长为di,高为hi,现在需要将箱子都堆起来,而且为了使堆起来的箱子不到,上面的箱子的宽度和长度必须小于下面的箱子.请实现一个方法,求出能堆出的最高的高度,这里的高度即堆起 ...

  10. ffplay 中filter的使用

    添加字幕:ffplay -vf drawtext="fontfile=arial.ttf: text='Test Text': x=100: y=300: \ fontsize=48: fo ...