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" target="_blank" rel="external nofollow" mce_href="Content/jqGrid/themes/steel/grid.css" target="_blank" rel="external nofollow" 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/