asp.net mvc+jqgrid

最新推荐文章于 2016-12-03 06:02:00 发布

转载最新推荐文章于 2016-12-03 06:02:00 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/alfrag/p/5473122.html

文章标签：

#测试 #javascript #json #ViewUI

本文详细介绍了在使用jqgrid进行数据展示时，遇到的将后台数据转换为JSON格式并正确显示的问题，并提供了两种数据加载方式的实现方法。重点讨论了如何避免字符串格式错误导致的数据显示不出问题，以及字符串与对象格式的转换方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚开始用jqgrid的时候，还是遇到了不少的问题，所以边学边写东西，以供自己以后可用，入门的朋友可以做参考，对于老鸟就没有价值了

先说依赖的环境，asp.net mvc5+官网下载的最新的jqgrid5.1+jquery ui 最新的 jquery asp新建项目自会自带

接下来就引用css和js，jquery.js一定要在前面，要不会报错，至于网上引用的jquery-ui-custom.css，我压根就没找到，不知道是不是最新的jquery-ui没有了或者名字改了

接下来就是定义一个<table></table>和<div></div>了，这两个元素是必须要有的

选择数据源的方式有几种，官网有很详细的说明，一种是后台的数据，一种是前台的数组，前台数组的方式很简单，就不说了，改这个只需要改datatype就可以了，在使用本地数组的时候就没有必须写url了，

我在使用本地数组的时候还是很顺利的吗，但是在测试后台json的时候遇到了麻烦，搞了很久，今天就把这种方式记录下来，给遇到相同问题的朋友一点思路，

开始的时候是像官网一样，自己模拟数据，用字符串的方式，然后返回JsonResult， return Json(jsondata, JsonRequestBehavior.AllowGet);

字符串形式是这样的：

string jsondata = "{\"page\":1,"
                + " \"total\":2,"
                + " \"records\":13,"
                + " \"rows\":"
                + " ["
                + "{ \"id\": 1,\"cell\":[\"12\",\"地震\",\"2007 - 10 - 01\",\"test\",\"note\",\"1200.00\",\"10.00\",\"210.00\"] },"
                + "{ \"id\": 2,\"cell\":[\"11\",\"地震\",\"2007 - 10 - 01\",\"test\",\"note\",\"1200.00\",\"10.00\",\"210.00\"] },"
                + "{ \"id\": 3,\"cell\":[\"10\",\"地震\",\"2007 - 10 - 01\",\"test\",\"note\",\"1200.00\",\"10.00\",\"210.00\"] }"
                //+ "{ id: \"汶川地震\", type: \"地震\",invdate: \"2007 - 10 - 01\", name: \"test\", note: \"note\", amount: 1200.00, tax: 10.00, total: 210.00 },"
                //+ "{ id: \"汶川地震\", type: \"地震\",invdate: \"2007 - 10 - 01\", name: \"test\", note: \"note\", amount: 1200.00, tax: 10.00, total: 210.00 },"
                //+ "{ id: \"汶川地震\", type: \"地震\",invdate: \"2007 - 10 - 01\", name: \"test\", note: \"note\", amount: 1200.00, tax: 10.00, total: 210.00 },"
                //+ "{ id: \"汶川地震\", type: \"地震\",invdate: \"2007 - 10 - 01\", name: \"test\", note: \"note\", amount: 1200.00, tax: 10.00, total: 210.00 },"
                //+ "{ id: \"汶川地震\", type: \"地震\",invdate: \"2007 - 10 - 01\", name: \"test\", note: \"note\", amount: 1200.00, tax: 10.00, total: 210.00 },"
                //+ "{ id: \"汶川地震\", type: \"地震\",invdate: \"2007 - 10 - 01\", name: \"test\", note: \"note\", amount: 1200.00, tax: 10.00, total: 210.00 },"
                //+ "{ id: \"汶川地震\", type: \"地震\",invdate: \"2007 - 10 - 01\", name: \"test\", note: \"note\", amount: 1200.00, tax: 10.00, total: 210.00 },"
                //+ "{ id: \"汶川地震\", type: \"地震\",invdate: \"2007 - 10 - 01\", name: \"test\", note: \"note\", amount: 1200.00, tax: 10.00, total: 210.00 },"
                //+ "{ id: \"汶川地震\", type: \"地震\",invdate: \"2007 - 10 - 01\", name: \"test\", note: \"note\", amount: 1200.00, tax: 10.00, total: 210.00 },"
                //+ "{ \"id\": \"2\", \"type\": \"地震\",\"invdate\": \"2007 - 10 - 01\", \"name\": \"test\", \"note\": \"note\", \"amount\": \"1200.00\", \"tax\": \"10.00\", \"total\": \"210.00\" }"
                + " ],"
                + " \"userdata\":{\"amount\":\"3220\",\"tax\":\"342\",\"total\":\"3564\",\"name\":\"Totals:\"}" + " }";

但是一直显示不出来数据，不知道为什么，开始的时候以为是json格式的问题，于是我测试了很多种json格式，没有一个成功，网上也没有类似的问题，

后来在官网的一个链接里面看到了一种方式，不用字符串，就像下面这种：

            var jsonData = new
            {
                page = 2,
                total = 4,
                record = 15,
                rows = new[]
                {
                    new {id=1,cell=new [] {"4","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=2,cell=new [] {"5","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=3,cell=new [] {"6","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=4,cell=new [] {"7","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=5,cell=new [] {"8","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=6,cell=new [] {"9","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=7,cell=new [] {"1","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=2,cell=new [] {"5","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=3,cell=new [] {"6","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=4,cell=new [] {"7","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=5,cell=new [] {"8","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=6,cell=new [] {"9","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=7,cell=new [] {"1","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=2,cell=new [] {"5","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=3,cell=new [] {"6","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=4,cell=new [] {"7","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=5,cell=new [] {"8","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=6,cell=new [] {"9","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=7,cell=new [] {"1","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}},
                    new {id=8,cell=new [] {"2","2007-10-04","Client 3","150.00","0.00","150.00","tax at all"}}
                },
                userdata = new { amount = "3220", tax = "342", total = "3453", name = "Totals" }
            };