构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(7)-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视图基本要引用这个模版
@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>
在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); }
预览一下效果
有的童鞋可能有疑问了,问我怎么知道要返回这么json格式给datagrid。
其实有心的童鞋会发现下载的easyui包里面有个demo文件,我们打开datagrid样例的文件夹找到
{"total":28,"rows":[ {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"}, {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"}, {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"}, {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"}, {"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"}, {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"}, {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"}, {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"}, {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"}, {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"} ]}
我是根据这个来的,你学会了吗?
此时有的童鞋又有疑问了你怎么知道你返回的对不对,假如你的谷歌或者火狐浏览器那你可以看到你返回的json类型
童鞋你懂了吗?慢慢拼出符合的格式。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。