这是一个简单的例子…
您需要使用https://github.com/douglascrockford/JSON-
js/blob/master/json2.js 才能正常工作…
当然还有常用的jquery文件。
将此粘贴到Web服务
// The lower case properties here are required to be lower case// I cant find a way to rename them when they are serialized to JSON// XmlElement("yournamehere") does not work for JSON :(public class JQGrid{ public class Row { public int id { get; set; } public List<string> cell { get; set; } public Row() { cell = new List<string>(); } } public int page { get; set; } public int total { get; set; } public int records { get; set; } public List<Row> rows { get; set; } public JQGrid() { rows = new List<Row>(); }}[WebService(Namespace = "http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][scriptService]public class MyWebService : System.Web.Services.WebService{ [WebMethod(EnableSession = true)] [scriptMethod(ResponseFormat = ResponseFormat.Json)] public JQGrid GetJQGrid(int page, int pageSize, string sortIndex, string sortDirection) { DataSet ds = SqlHelper.ExecuteDataset(SqlHelper.CONN_STRING, "udsp_GetMyData",pageIndex, pageSize); if (ds == null || ds.Tables.Count < 1) throw new Exception("Unable to retrieve data."); JQGrid jqGrid = new JQGrid(); int i = 1; foreach (DataRow dataRow in ds.Tables[0].Rows) { JQGrid.Row row = new JQGrid.Row(); row.id = Convert.ToInt32(dataRow["MyIdColumn"]); row.cell.Add(dataRow["MyIdColumn"].ToString()); row.cell.Add(dataRow["MyColumn"].ToString()); projectGrid.rows.Add(row); } jqGrid.page = 1; // Set this when you are actually doing paging... this is just a sample jqGrid.records = jqGrid.rows.Count; jqGrid.total = jqGrid.rows.Count; // Set this to total pages in your result... return jqGrid; }}将此粘贴到您的aspx页面
<script type="text/javascript">function getData(pdata) { var params = new Object(); params.page = pdata.page; params.pageSize = pdata.rows; params.sortIndex = pdata.sidx; params.sortDirection = pdata.sord; $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "/CLM/CLM.asmx/GetProjectGrid2", data: JSON.stringify(params), dataType: "json", success: function(data, textStatus) { if (textStatus == "success") { var thegrid = $("#testGrid")[0]; thegrid.addJSonData(data.d); } }, error: function(data, textStatus) { alert('An error has occured retrieving data!'); } });}var gridimgpath = '/clm/css/ui-lightness/images';$(document).ready(function() { $("#testGrid").jqGrid({ datatype: function(pdata) { getData(pdata); }, colNames: ['My Id Column', 'My Column'], colModel: [ { name: 'MyIdColumn', index: 'MyIdColumn', width: 150 }, { name: 'My Column', index: 'MyColumn', width: 250 } ], rowNum: 10, rowList: [10, 20, 30], imgpath: gridimgpath, pager: jQuery('#pagerdt'), sortname: 'id', viewrecords: false, sortorder: "desc", caption: "Projects", cellEdit: false });});</script>
