开打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添加GetList方法给视图的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);
}

其实有心的童鞋会发现下载的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"}
]}

我们看到示例中的Demo Json格式，后台必须返回符合Easyui读取的Json格式数

Datagrid接收JSON数据格式的更多相关文章

  1. EasyUI + ajax + treegrid/datagrid 接收 json 数据，显示树状/网状表结构

    最后一更了,时间间隔有点久了~~ EasyUI作为一个成熟的前端框架,封装了ajax,对于数据的处理配合datagrid组件的使用,使其非常适合后台管理界面的开发(目前来说界面有点过时了). 通过aj ...

  2. spring接收json格式的多个对象参数（变通法）

    两种方法 方法1 如果使用spring mvc同客户端通信,完全使用json数据格式,需要如下定义一个RequestMapping @Controller public class TestContr ...

  3. MyEclipse开发JAX-RS架构WebServices收发JSON数据格式

    最近因项目需求,开始学习WebServices. 1.开发环境: MyEclipse2013 2.客户端发送的JSON数据格式为 {persons:[{"name":"a ...

  4. ThinkPHP中使用ajax接收json数据的方法

    本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...

  5. 一、Ajax 二、JSON数据格式 三、Ajax+Jquery 四、分页的实现

    一.Ajax概述###<1>概述 ###<2>组成 以XMLHttpRequest为核心,发送Ajax请求和接收处理结果 以javascript为语言基础 以XML/JSON作 ...

  6. AJAX发送json，SpringMVC 接收JSON，@RequestBody

    需求:JQuery ajax前台,采用 POST请求 发送json,后台使用SpringMVC接收json并处理 前台: $.ajax({ url:"请求地址", type:&qu ...

  7. XML和JSON数据格式对比

    概念 XML 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语 ...

  8. VS快速生成JSON数据格式对应的实体

          有固定好的Json数据格式,你还在手动敲对应的实体吗?有点low了!步入正题,这是一个json字符串,先去验证JSON数据格式(http://www.bejson.com/)如下: { & ...

  9. jQuery EasyUI：根据数据库内容生成适合于easyui-tree的JSON数据格式

    1,jQuery EasyUI中easyui-tree特定的JSON数据格式 [ {"id":1,"text":"某公司","ch ...

随机推荐

  1. Oracle 11G RAC For ASM 利用RMAN COPY进行存储迁移

    转载请注明出处 一.需求背景 客户数据库存储空间接近存满,需购置一台新的存储,进行数据迁移,客户允许少量停机时间. 二.实施方法讨论 利用ASM rebalance 进行迁移 可以实现0宕机进行迁移, ...

  2. php中session和cookie的使用及区别

    1.cookie的使用 什么是 Cookie? cookie 常用于识别用户.cookie 是服务器留在用户计算机中的小文件.每当相同的计算机通过浏览器请求页面时,它同时会发送 cookie.通过 P ...

  3. h5 页面 禁止网页缩放

    //禁用双指缩放: document.documentElement.addEventListener('touchstart', function (event) { if (event.touch ...

  4. python版 定时任务机制

    定时任务的原理 服务器执行一个python脚本 这个脚本,循环执行配置的定时任务地址 Python请求地址, 该地址应该返回, 下次再来执行的秒数. 也就是任务的频率 比如任务希望每3秒执行一次, 那 ...

  5. 【ITOO 5】启用MSDTC后的各种问题，以及解决方案

    导读:在上篇博客中说到,通过启动微软的msdtc来实现分布式事务处理,随后,问题就来了,现在,一一总结这个过程中的问题. 一.已禁用对分布式事务管理器(MSDTC)的网络访问. 1.1,问题描述 已禁 ...

  6. [vijos1246]文科生的悲哀(二)

    [vijos1246]文科生的悲哀(二) 试题描述 化学不及格的Matrix67无奈选择了文科.他必须硬着头皮艰难地进行着文科的学习. 这学期的政治.历史和地理课本各有n章.每一科的教学必须按章节从前 ...

  7. SeaJS项目完整实例【转】

    index.html——主页面. sea.js——SeaJS脚本. init.js——init模块,入口模块,依赖data.jquery.style三个模块.由主页面载入. data.js——data ...

  8. Flex嵌入HTML页面

    这段时间一直在苦心研究Flex,今天突然想,我们平时都是把swf放到网页中,怎么才能把网页嵌入到Flex中呢?我查了一些资料,然后经过自己的不懈努力,终于搞定. 为了方便,写了个嵌入HTML页面的代理 ...

  9. as3corelib Tutorial:How to Use ArrayUtil Class in Flex

    ArrayUtil class contains static utility methods for manipulating and working with Arrays. Note that ...

  10. 前端学习之- Ajax

    Ajax:页面不做刷新,直接将数据悄悄提交到后台,然后通过回调函数处理返回结果. $.Ajax({ # 提交到后台 url:'/host', # 提交到哪里 type:'POST' # 提交方式 da ...