MVC 插件jqGrid

jqGrid 是一个免费的Jquery  编写的插件，用joson进行数据传输；

 

 

一、下载jqGrid控件;

 

二、创建项目；

　　加入jqGrid，如图（选中部分）

 

三、创建数据实体，并构建josn数据

　　namespace WT.JqGrid.Models { public class JqGridModel { public object GridData(string sidx, string sord, int page, int rows) { IList<GridModelInfo> gridDataList = this.LoadData(); int pageIndex = Convert.ToInt32(page) - 1; int pageSize = rows; int totalRecords = gridDataList.Count; int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize); var jsonData = new { total = totalPages, page = page, records = totalRecords, rows = ( from item in gridDataList select new { id = item.Old, cell = new string[] { item.Name.ToString(), item.Old.ToString() } }).ToArray() }; return jsonData; } private IList<GridModelInfo> LoadData() { IList<GridModelInfo> list = new List<GridModelInfo>(); for (int i = 1; i <= 100; i++) { list.Add(new GridModelInfo { Name = "wt" + i.ToString(), Old = 25 }); } return list; } } public class GridModelInfo { public string Name { get; set; } public int Old { get; set; } } }

　　

  四、　页面中使用

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> <link href="../../Content/jqGrid/themes/steel/grid.css" mce_href="Content/jqGrid/themes/steel/grid.css" rel="stylesheet" type="text/css" /> <mce:script src="../../Scripts/jquery-1.4.1.js" mce_src="Scripts/jquery-1.4.1.js" type="text/javascript"></mce:script> <mce:script src="../../Scripts/jquery.jqGrid.js" mce_src="Scripts/jquery.jqGrid.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- jQuery(document).ready(function () { jQuery("#list").jqGrid({ url: '/Home/GetJsonData', datatype: 'json', mtype: 'GET', colNames: ['姓名', '年龄'], colModel: [ { name: 'Name', width: 100, align: 'left' }, { name: 'Old', width: 100, align: 'left' } ], pager: jQuery('#pager'), rowNum: 10, rowList: [5, 10, 20, 50], sortname: 'OrderId', sortorder: "desc", viewrecords: true, imgpath: '/Content/jqGrid/themes/steel/images', caption: '用户' }); }); // --></mce:script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2> <%: ViewBag.Message %></h2> <table id="list" class="scroll" cellpadding="0" cellspacing="0"> </table> <div id="pager" class="scroll" style="text-align: center;" mce_style="text-align: center;"> </div> </asp:Content>

 

 

 结果图：

 

代码下载

 

遇到问题：

1.　对象不支持“jqGrid”属性或方法

　　原因：jquery.jqGrid.js 里的 function jqGridInclude()  中　有个设置需要js的地方，我的目录结构与默认设置不符，改变即可。

　　function jqGridInclude() { var pathtojsfiles = "/Scripts/js/"; // need to be ajusted 　　　.......

　　　

收费么？

“Tony developed jqGrid and made it available for free as a way of making a contribution to the open-source community. In addition to the free jqGrid, Trirand also develops commercially-available, server-side grid components for PHP and ASP.NET. These components are not required for jqGrid to work, but they speed up the process of making complete grid solutions, and they save developers the effort of writing server-side code. ”

 

深入学习资源：

wiki: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs 

jqgrid网站：http://www.trirand.com/blog/