好的,我回来了。我将问题完全简化为三个简单的字段,但仍然使用addJSONData方法停留在同一行上。我已经坚持了好几天,无论我如何重新处理ajax调用,json字符串,等等等等……我都无法使它正常工作!手动添加一行数据时,我什至无法将其用作功能。任何人都可以发布可与ASP.NET和JSON一起使用的jqGrid的工作示例吗?您能否包括2-3个字段(最好是字符串,整数和日期?),我很高兴看到jqGrid的工作示例,而只是使用addJSONData方法手动添加JSON对象。非常感谢!!如果我能正常工作,我将为所有其他发布发布完整的代码示例,以寻求ASP.NET的帮助,JSON用户也坚持这样做。再次。谢谢!!
tbl.addJSONData(objGridData); // err:tbl.addJSONData不是函数!!
这是我收到此消息时Firebug显示的内容:
•objGridData对象总数= 1页= 1记录= 5行= [5] ○页“ 1” 记录“ 5” 总数“ 1” 行[对象ID = 1 PartnerID = BCN,对象ID = 2 PartnerID = BCN,对象ID = 3 PartnerID = BCN,还有2个… 0 =对象1 =对象2 =对象3 =对象4 =对象] (索引)0 (prop)ID(值)1(prop)PartnerID(值)“ BCN”( prop)DateTimeInserted(value)Thu May 29 2008 GMT-0700(太平洋夏令时) *还有三行
这是变量tbl(值)“ Table.scroll”的值
<TABLE cellspacing="0" cellpadding="0" border="0" style="width: 245px;" class="scroll grid_htable"><THEAD><TR><TH class="grid_sort grid_resize" style="width: 55px;"><SPAN> </SPAN><DIV id="jqgh_ID" style="cursor: pointer;">ID <IMG src="http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images/sort_desc.gif"/></DIV></TH><TH class="grid_resize" style="width: 90px;"><SPAN> </SPAN><DIV id="jqgh_PartnerID" style="cursor: pointer;">PartnerID </DIV></TH><TH class="grid_resize" style="width: 100px;"><SPAN> </SPAN><DIV id="jqgh_DateTimeInserted" style="cursor: pointer;">DateTimeInserted </DIV></TH></TR></THEAD></TABLE>
这是完整的功能:
$('table.scroll').jqGrid({ datatype: function(postdata) { mtype: "POST", $.ajax({ url: 'EDI.asmx/GetTestJSONString', type: "POST", contentType: "application/json; charset=utf-8", data: "{}", dataType: "text", //not json . let me try to parse success: function(msg, st) { if (st == "success") { var gridData; //strip of "d:" notation var result = JSON.parse(msg); for (var property in result) { gridData = result[property]; break; } var objGridData = eval("(" + gridData + ")"); //creates an object with visible data and structure var tbl = jQuery('table.scroll')[0]; alert(objGridData.rows[0].PartnerID); //displays the correct data //tbl.addJSONData(objGridData); //error received: addJSONData not a function //error received: addJSONData not a function (This uses eval as shown in the documentation) //tbl.addJSONData(eval("(" + objGridData + ")")); //the line below evaluates fine, creating an object and visible data and structure //var objGridData = eval("(" + gridData + ")"); //BUT, the same thing will not work here //tbl.addJSONData(eval("(" + gridData + ")")); //FIREBUG SHOWS THIS AS THE VALUE OF gridData: // "{"total":"1","page":"1","records":"5","rows":[{"ID":1,"PartnerID":"BCN","DateTimeInserted":new Date(1214412777787)},{"ID":2,"PartnerID":"BCN","DateTimeInserted":new Date(1212088125000)},{"ID":3,"PartnerID":"BCN","DateTimeInserted":new Date(1212088125547)},{"ID":4,"PartnerID":"EHG","DateTimeInserted":new Date(1235603192033)},{"ID":5,"PartnerID":"EMDEON","DateTimeInserted":new Date(1235603192000)}]}" } } }); }, jsonReader: { root: "rows", //arry containing actual data page: "page", //current page total: "total", //total pages for the query records: "records", //total number of records repeatitems: false, id: "ID" //index of the column with the PK in it }, colNames: [ 'ID', 'PartnerID', 'DateTimeInserted' ], colModel: [ { name: 'ID', index: 'ID', width: 55 }, { name: 'PartnerID', index: 'PartnerID', width: 90 }, { name: 'DateTimeInserted', index: 'DateTimeInserted', width: 100}], rowNum: 10, rowList: [10, 20, 30], imgpath: 'http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images', pager: jQuery('#pager'), sortname: 'ID', viewrecords: true, sortorder: "desc", caption: "TEST Example")};
这是一个简单的例子…
您需要使用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>