<!DOCTYPE html>
<html>
<head>
    <title>jQuery Easy UI</title>
    <meta charset="UTF-8" />
    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <link href="~/Content/themes/easyuithemes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/themes/easyuithemes/icon.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            $("#box").datagrid({
                width: 500,
                url: '@Url.Content("~/List/GetUserInfo")',
                title: '用户列表',
                iconCls: 'icon-search',
                fitColumns: true,//自动补全  
                columns: [[
                    {
                        field: 'Account',
                        title: '帐号',
                    },
                    {
                        field: 'Email',
                        title: '邮件',
                    },
                    {
                        field: 'RegDateTime',
                        title: '注册时间',
                    },
                ]],
                pagination: true,
                pageSize: 5,
                pageList: [5, 10, 15],
                pageNumber: 1,
            });

        });

    </script>
</head>
<body style="text-align: center;">
    <h2 id="text">EasyUI_DataGrid1</h2>
    <div style="margin-left: 435px;">
        <table id="box"></table>
    </div>
</body>
</html>

前台代码如上     项目采用的是.net mvc框架。

后台控制器代码：

        public ActionResult DataGrid()
        {
            return View();
        }

        public ActionResult GetUserInfo()
        {
            var pageIndex = int.Parse(Request.Params["page"]);  //当前页  
            var pageSize = int.Parse(Request.Params["rows"]);  //页面行数  
            JsonResult js = new JsonResult();
            List<GridInfo> ginfo = new List<GridInfo>();
            for (int i = 1; i < 12; i++)
            {
                ginfo.Add(
               new GridInfo()
               {
                   Account = i.ToString(),
                   Email = i + "@qq.com",
                   RegDateTime = DateTime.Now.AddDays(i).ToShortDateString(),
               }
            );
            }
           List<GridInfo> listResut = GetResult(ginfo, pageSize, pageIndex);
           var data = new
          {
               total = ginfo.Count,
               rows = listResut
           }
            return Json(data);
        }

        private List<GridInfo> GetResult(List<GridInfo> ginfo, int pageSize, int pageIndex)
        {
            List<GridInfo> sginfo = new List<GridInfo>();
            sginfo = ginfo.Skip(pageSize * (pageIndex - 1)).Take(pageSize).ToList();
            return sginfo;
        }
    }


数据采用的是后台填充，并不是来自数据库，如果想用数据库，将ginfo对象赋值为数据库数据集即可。当然还需要更改实体类 GridInfo。本实例主要是如何应用easyui的数据表格，记录下来主要是解决分页时datagrid所需要的json数据格式。关键代码：

   List<GridInfo> lstResut = GetResult(ginfo, pageSize, pageIndex);
   var data = new
   {
       total = ginfo.Count,
       rows = lstResut
   }

  

 

运行效果如下图：

# json # easyui
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支：1 个月前 )
960b763e 3 个月前
8c391e04 6 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区