ASP.NET MVC and jqGrid 学习笔记 2-如何从本地获得数据

上回说到jqgrid的基本配置，同时演示了显示数据的一种方法——datatype: "local"。这种方法是从本地获取的，确切地说是在前端页面的javascript里写的硬编码。

本回说到的也是一种硬编码，只不过是在后台的Controller里写的，也是一种快速演示的方法，我们用ArrayList来填充数据。同时，jqgrid里要使用url参数以指定是从哪个action获得数据。

View：

@{
    ViewBag.Title = "GetDataFromLocal";
}

<h2>GetDataFromLocal</h2>

<script type="text/javascript">
    $(function () {
        jQuery("#grid").jqGrid({
10             url: "/Home/GetData",
11             datatype: "json",           
            mtype:"get",
            colNames: ['Inv No', 'Date', 'Client'],
            colModel: [
                { name: 'id', index: 'id', width: 60, sorttype: "int" },
                { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
                { name: 'name', index: 'name', width: 100 }
            ],
            caption: "jqGrid data",
            rowNum: 5,
            pager: "pager",
            viewrecords: true,
            width: 300, height: "auto",
            jsonReader:{repeatitems: false}
        });
    });
</script>

<table id="grid"></table>
<div id="pager"></div>

Controller：

 　　　　public ActionResult GetDataFromLocal()
        {
            return View();
        }

        public JsonResult GetData(int? page, int? rows)
        {  //把数据放到一个动态数组里
            ArrayList list = new ArrayList();
            list.Add(new { id = "1", invdate = "2007-10-01", name = "test" });
            list.Add(new { id = "2", invdate = "2007-10-02", name = "test" });
            list.Add(new { id = "3", invdate = "2007-10-02", name = "test" });
            list.Add(new { id = "4", invdate = "2007-10-02", name = "test" });
            list.Add(new { id = "5", invdate = "2007-10-02", name = "test" });
            list.Add(new { id = "6", invdate = "2007-10-02", name = "test" });
            list.Add(new { id = "7", invdate = "2007-10-02", name = "test" });
            list.Add(new { id = "8", invdate = "2007-10-02", name = "test" });
            list.Add(new { id = "9", invdate = "2007-10-02", name = "test" });
            list.Add(new { id = "10", invdate = "2007-10-02", name = "test" });
            list.Add(new { id = "11", invdate = "2007-10-02", name = "test" });
            list.Add(new { id = "12", invdate = "2007-10-02", name = "test" });

            var myData = list.ToArray();//便于下面用linq分页

            //jqgrid的参数
            int pageNum = page.HasValue ? page.Value : 1;//当前显示哪一页
            int pageSize = rows.HasValue ? rows.Value : 10;  //每一页显示多少条记录
            int totalRecords = list.Count;//总记录数
            int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);//总页数
            var jsonData = new
            {
                total = totalPages,
                page = pageNum,
                records = totalRecords,
                rows = myData.Skip((pageNum - 1) * pageSize).Take(pageSize)//分页
            };

            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }

--End--