原文:构建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() - ,

            methord: 'post',

            height: $(window).height() -,

            fitColumns: true,

            sortName: 'Id',

            sortOrder: 'desc',

            idField: 'Id',

            striped: true, //奇偶行是否区分

            singleSelect: true,//单选模式

            rownumbers: true,//行号

            columns: [[

                { field: 'Id', title: 'ID', width:  },

                { field: 'Name', title: '名称', width:  },

                { field: 'Age', title: '年龄', width: , align: 'right' },

                { field: 'Bir', title: '生日', width: , align: 'right' },

                { field: 'Photo', title: '照片', width:  },

                { field: 'Note', title: '说明', width: , align: 'center' },

                { field: 'CreateTime', title: '创建时间', width: , 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);

        }

预览一下效果

有的童鞋可能有疑问了，问我怎么知道要返回这么json格式给datagrid。

其实有心的童鞋会发现下载的easyui包里面有个demo文件，我们打开datagrid样例的文件夹找到

{"total":,"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注入的后台管理系统（7）-MVC与EasyUI DataGrid的更多相关文章

  1. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...

  2. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（14）-EasyUI缺陷修复与扩展

    系列目录 不知不觉已经过了13讲,(本来还要讲多一讲是,数据验证之自定义验证,基于园友还是对权限这块比较敢兴趣,讲不讲验证还是看大家的反映),我们应该对系统有一个小结.首先这是一个团队开发项目,基于接 ...

  3. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（1）-前言与目录（持续更新中...）

    转自:http://www.cnblogs.com/ymnets/p/3424309.html 曾几何时我想写一个系列的文章,但是由于工作很忙,一直没有时间更新博客.博客园园龄都1年了,却一直都是空空 ...

  4. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（48）-工作流设计-起草新申请

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(48)-工作流设计-起草新申请 系列目录 创建新表单之后,我们就可以起草申请了,申请按照严格的表单步骤和分 ...

  5. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（47）-工作流设计-补充

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(47)-工作流设计-补充 系列目录 补充一下,有人要表单的代码,这个用代码生成器生成表Flow_Form表 ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（46）-工作流设计-设计分支

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(46)-工作流设计-设计分支 系列目录 步骤设置完毕之后,就要设置好流转了,比如财务申请大于50000元( ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（45）-工作流设计-设计步骤

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤 系列目录 步骤设计很重要,特别是规则的选择. 我这里分为几个规则 1.按自行 ...

  8. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（44）-工作流设计-设计表单

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单 系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四 ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（43）-工作流设计-字段分类设计

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(43)-工作流设计-字段分类设计 系列目录 建立好42节的表之后,每个字段英文表示都是有意义的说明.先建立 ...

  10. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（42）-工作流设计01

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(42)-工作流设计01 工作流在实际应用中还是比较广泛,网络中存在很多工作流的图形化插件,可以做到拉拽的工 ...

随机推荐

  1. css重置样式表reset.css

    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,/* structural elements 结构元素 */ dl, dt, dd, ul, ol, l ...

  2. 基于SAE+CodeIgniter3.0+管理端angularjs+前台amazeui的多用户博客系统V1.0--系统设计（一）

    开发环境: 服务器系统:CentOS-6.x web服务器:Apache-2.2.x php版本:PHP-5.3.x 开发工具:sublime text 3 ,谷歌浏览器 数据库查询工具:phpmya ...

  3. Python 基础-python-列表-元组-字典-集合

    列表格式:name = []name = [name1, name2, name3, name4, name5] #针对列表的操作 name.index("name1")#查询指定 ...

  4. python的py文件打包成exe

    一.首先需要安装Pyinstaller-- 使用pip来安装模块 (我电脑上装的是python的一个编译环境Anaconda,如果电脑上装的是python自带的IDE的话,就直接进入python的安装 ...

  5. C读写配置文件

    在项目开发中,经常需要读取应用配置文件的初始化参数,用于应用在启动前进行一些初始化配置.比如:Eclipse,参数项包含主题.字体大小.颜色.Jdk安装位置.自动提示等.Eclispe配置的文件格式是 ...

  6. OpenJudge_cdqz 数据结构版块小结

    题目整理 Challenge 0  随机线性存储表-easy Challenge 1  链表数组-easy Challenge 2  可持久化Treap的可持久化运用-hard Challenge 3 ...

  7. BZOJ 1002 轮状病毒

    Description 给定n(N<=100),编程计算有多少个不同的n轮状病毒. Input 第一行有1个正整数n. Output 将编程计算出的不同的n轮状病毒数输出 Sample Inpu ...

  8. Matlab绘图系列之高级绘图

    Matlab绘图系列之高级绘图 原帖地址: http://blog.163.com/enjoy_world/blog/static/115033832007865616218/ Matlab绘图 20 ...

  9. Github、Jekyll 搭建及优化静态博客方法指南

    尝试自己写 Blog 的人,一般会经历三个阶段. 第一阶段,刚接触 Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客. 第三阶段,觉 ...

  10. Jamie's Contact Groups

    poj2289:http://poj.org/problem?id=2289 题意:给定一个规模为n的名单,要将名单中的人归到m个组中,给出每个人可能的分组号,需要确定一种分配方案,是的最大规模的组最 ...