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

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

先看效果:

实现步骤是这样的:

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

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

View Code

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

        /// <summary>/// 用户列表Json/// </summary>/// <returns></returns>public ActionResult GetUserList(){int currentPageIndex = RequestExtension.GetQueryString<int>("page", 0);int pagesize = RequestExtension.GetQueryString<int>("rows", 0);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);}

View Code

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 = -1){var result = dataList;Dictionary<string, object> json = new Dictionary<string, object>();int total = dataListAuctalCount;if (total == -1 && dataList != null){//自动分页total = dataList.Count();result = dataList.Skip((page - 1) * rows).Take(rows).ToList();}json.Add("total", total);json.Add("rows", result);return new JsonResult() { Data = json, JsonRequestBehavior = JsonRequestBehavior.AllowGet };}

View Code

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 UsersWHERE 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;}}

View Code

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

转载于:https://www.cnblogs.com/ushou/p/3718610.html

MVC简捷调用EasyUI的datagrid相关推荐

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

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

  2. 给Jquery easyui 的datagrid 每行增加操作链接(转载)

    转自:http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的E ...

  3. 给Jquery easyui 的datagrid 每行增加操作链接(转)

    http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的Easy ...

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

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

  5. springmvc 后台向页面EasyUI的Datagrid传递数据(JSon格式)

    ===============EasyUIDatagrid 分页==================== EasyUIDatagrid 需要提供的JSon格式为:total和rows,所以我们只需要在 ...

  6. datagrid vue_类似 easyui 中 datagrid 使用习惯的 element-ui 数据表格组件(el-datagrid)...

    背景 element-ui 中的 el-table 组件只提供了数据展示,而分页功能作为一个单独的组件 el-pagination,并没有像 Ant Design 一样集成到 el-able 组件中, ...

  7. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除)...

    ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除) 原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过 ...

  8. easyui+struts2:datagrid无法不能得到数据

    转自:https://bbs.csdn.net/topics/390980437 easyui+struts2:datagrid无法访问到指定action: userlist.jsp部分代码: XML ...

  9. Easyui中DataGrid(数据表格)

    Easyui中DataGrid(数据表格) 1.DataGrid简介 2.实现过程 2.1jsp页面的代码块(两种方式) 第一种 第二种 3.DataGrid属性 4.实践操作 4.1界面创建 4.2 ...

最新文章

  1. 【Git】git系统学习(一):常用指令
  2. Java并发知识总结,超详细!(上)
  3. Girton College Info Session Abstract
  4. oracle 云 BI,[Oracle]见习BI工程师之函数
  5. java多线程线程池_Java多线程——线程池(ThreadPool)
  6. 括号匹配深度,交错01字符串(一个类型代码)
  7. 构建最基础的Spring项目及所需要的jar包
  8. java se用哪个eclipse_javaSE----eclipse的安装与使用
  9. 如何找到chromedriver与chrome的对应版本
  10. 还在愁csdn进不去吗,看这里
  11. 【MFC】字体类——CFont
  12. gliffy UML破解工具
  13. wireshark display reference: https://www.wireshark.org/docs/dfref/
  14. matlab pi控制编程,增量式PI控制算法的MATLAB仿真.doc
  15. android 测光模式,Android 测光梳理
  16. python爬虫项目(对博思平台社区话题信息进行爬取并保存)
  17. 如何搭建一个爬虫代理服务?
  18. 腾讯投资未来智安,企业为什么要使用ssl数字证书?
  19. 博士win7风格包_酒店测评:30年仅开2家,褒奖无数,风格简洁却暗藏玄机!
  20. 魔兽世界任务制作教学,已经本人自己服务器中测试

热门文章

  1. php变量与数组相互转换的方法(extract与compact
  2. 让LoadRunner再次走下神坛
  3. 空间triangle和AABB的相交判定方法
  4. Oracle 11gR2 RAC 中的 Grid Plug and Play(GPnP) 是什么?
  5. HDU_1874 畅通工程续(SPFA)
  6. javascript装饰者模式
  7. 面向Java应用的快速Web服务支持工具 - Netrifex
  8. 超详细SQLMap使用攻略及技巧分享
  9. 62 | 测一测 | 这些软件测试题目,你都掌握了吗?
  10. 华为Hi Suite - Android智能设备新管家