Mikel
[转载]jqGrid + JSON + WebService 完整示例 – 瑞雪年 – 博客园.
真没找到这样的例子，于是自已写了个，分享出来。
第一步，首先在WebService上，添加[System.Web.Script.Services.ScriptService]属性标签，让WebServer支持JSON.
namespace jqGrid_JSON_WebService_Sample.Services
{
///
<summary> /// Summary description for WebServiceGrid
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebServiceGrid : System.Web.Services.WebService
{
}
}
接着，添加ajax调用的后端代码，获取数据，返回JSON对象:
[WebMethod]
public object Grid(bool? _search, string nd, int page, int rows, string sidx, string sord, string searchField, string searchString, string searchOper)
{
int count;
var data = dc.Query(string.IsNullOrWhiteSpace(searchField) ? null : new string[] { searchField }, new string[] { searchOper }, new object[] { searchString }, null, new string[] { string.IsNullOrWhiteSpace(sidx) ? "IssueID" : sidx }, new string[] { sord }, (page - 1) * rows, rows, out count);
return (new
{
total = Math.Ceiling((float)count / (float)rows),
page = page,
records = count,
rows = data.Select(item => new { id = item.IssueID, cell = new object[] { item.IssueID, item.Title, item.Description, item.Progress, item.CreateTime, item.Locked } })
});
}
第二步，添加前台页面，首先添加各种的js,css引用，然后添加jqGrid所需的
和js代码：
<script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script><script type="text/javascript" src="/Scripts/jquery-ui-1.8.11.min.js"></script>
<script type="text/javascript" src="/Scripts/i18n/grid.locale-en.js"></script><script type="text/javascript" src="/Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(function ()
{
$("#list #grid").jqGrid(
{
url: '/Services/WebServiceGrid.asmx/Grid',
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData)
{
if (postData.searchField === undefined) postData.searchField = null;
if (postData.searchString === undefined) postData.searchString = null;
if (postData.searchOper === undefined) postData.searchOper = null;
return JSON.stringify(postData);
},
jsonReader:
{
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
},
datatype: "json",
colNames:
[
'IssueID',
'Title',
'Description',
'Progress',
'CreateTime',
'Locked'
],
colModel:
[
{ name: 'IssueID', width: 100, index: 'IssueID' },
{ name: 'Title', width: 100, index: 'Title' },
{ name: 'Description', width: 300, index: 'Description' },
{ name: 'Progress', width: 150, index: 'Progress' },
{ name: 'CreateTime', width: 100, index: 'CreateTime', formatter:'date', sorttype:'datetime', datefmt:'M d h:i' },
{ name: 'Locked', width: 100, index: 'Locked' }
],
rowNum: 10,
rowList: [10, 15, 20, 25, 40],
pager: '#pager',
viewrecords: true,
sortorder: "desc",
width: 900,
height: 240,
});
$("#list #grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
});
// ]]></script>
</div>
<div id="list">
<div id="pager"></div>
注意jqGrid函数据前面的部分代码：
url: '/Services/WebServiceGrid.asmx/Grid',
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
通过url指定WebService方法，mtype指定使用POST方法，contentType指定为json，这样WebService才会返回json对象。
可是，返回的数据是放在一个属性名为d的对象里，所以还要添加 jsonReader，来作数据映射:
jsonReader:
{
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
},
最后，为了保证查询时能够POST正确的参数，还要对POST的参数值进行检查：
serializeGridData: function (postData)
{
if (postData.searchField === undefined) postData.searchField = null;
if (postData.searchString === undefined) postData.searchString = null;
if (postData.searchOper === undefined) postData.searchOper = null;
return JSON.stringify(postData);
},
到此，一个完整的jqGrid示例就完成了，成果展示：
