构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(7)-MVC与EasyUI DataGrid

原文:构建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_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);
        }
View Code

预览一下效果

有的童鞋可能有疑问了,问我怎么知道要返回这么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类型

童鞋你懂了吗?慢慢拼出符合的格式。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。