MVC與EasyUI DataGrid
沒有源碼的同學跳到第六講下載源碼再來。
我們需要漂亮的UI，不要系統自動生成的垃圾UI。我們在大數據面前，我們要減少頁面的壓力，不要在頁面遍歷List
我們選擇Easyui的DataGrid最為本系統的表格展示效果
本節知識點：
根據DataGrid json格式在controller制作json格式給DataGrid用
我們的系統似乎越來越有趣了、
首先從前端入手，開打View下面的Shared創建一個視圖模版
<!DOCTYPE html>
<html>
<head>
<title>Main</title>
<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/blue/css")
</head>
<body>
<div style="padding:5px 5px 0px 5px;">
@RenderBody()
</div>
</body>
</html>
_Index_Layout.cshtml
以後我們系統用到的index視圖基本要引用這個模版
@using App.Admin;
@using App.Common;
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Index_Layout.cshtml";
}
<table id="List"></table>
<script type="text/javascript">
$(function () {
$('#List').datagrid({
url: '/SysSample/GetList',
width: $(window).width() - 10,
methord: 'post',
height: $(window).height() -35,
fitColumns: true,
sortName: 'Id',
sortOrder: 'desc',
idField: 'Id',
striped: true, //奇偶行是否區分
singleSelect: true,//單選模式
rownumbers: true,//行號
columns: [[
{ field: 'Id', title: 'ID', width: 80 },
{ field: 'Name', title: '名稱', width: 120 },
{ field: 'Age', title: '年齡', width: 80, align: 'right' },
{ field: 'Bir', title: '生日', width: 80, align: 'right' },
{ field: 'Photo', title: '照片', width: 250 },
{ field: 'Note', title: '說明', width: 60, align: 'center' },
{ field: 'CreateTime', title: '創建時間', width: 60, align: 'center' }
]]
});
});
</script>
index.cshtml
在SysSampleController添加GetLists方法給視圖的AJAX使用
[HttpPost]
public JsonResult GetList()
{
List<SysSampleModel> list = m_BLL.GetList("");
var json = new
{
total = list.Count,
rows = (from r in list
select new SysSampleModel()
{
Id = r.Id,
Name = r.Name,
Age = r.Age,
Bir = r.Bir,
Photo = r.Photo,
Note = r.Note,
CreateTime = r.CreateTime,
}).ToArray()
};
return Json(json, JsonRequestBehavior.AllowGet);
}
查看本欄目
