List 資料轉為easyui-datagrid json資料格式
阿新 • • 發佈：2019-02-02
<!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
}執行效果如下圖：
