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类型

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

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统