这个人杀了我。我已经经历了很多的Oleg的意见,并通过documentation,但我想我忽视的东西的真正的简单阅读
我通过调用返回JSON的webmethod来填充jqGrid。我们在那里很好。我正在使用导航器添加“添加”按钮,并使用onSelectRow
w / jqGrid.editRow()
进行编辑。
单击“添加”按钮时出现对话框,可以填写所有内容。但是,单击“提交”按钮后,我收到error Status: 'Internal Server Error'. Error code: 500
返回消息。使用Firebug,Response
为{"Message":"Invalid JSON primitive: FileType.","StackTrace":....
。而Post
是FileType=3&ExportDate=12%2F29%2F2010&oper=add&id=_empty
。
显然,我的帖子没有被“jsonified”。我尝试使用serializeEditData
和beforeSubmit
尝试手动返回JSON.stringify(eparams);
,但没有任何效果。请参阅下面的代码。
WEBMETHOD
<WebMethod()> _
<ScriptMethod()> _
Public Sub ModifyFileLog(ByVal FileType As String, _
ByVal ExportDate As Nullable(Of Date), _
ByVal oper As String, ByVal id As String)
Try
' blah
Catch ex As Exception
Throw New Exception(ex.Message)
End Try
End Sub
JS - Globals
jQuery.extend(
jQuery.jgrid.defaults, {
type: "POST",
mtype: "POST",
datatype: "json",
ajaxGridOptions: { contentType: "application/json" },
ajaxRowOptions: { contentType: "application/json" },
rowNum: 10,
rowList: [10, 20, 30],
serializeGridData: function(data) {
return JSON.stringify(data);
},
gridview: true,
viewrecords: true,
sortorder: "asc"
},
jQuery.jgrid.edit, {
ajaxEditOptions: { contentType: "application/json" },
recreateForm: true,
serializeEditData: function(postData) {
return JSON.stringify(postData);
}
}
);
JS - jqGrid
var tblName = "tblFiles";
var pager1 = '#pagerFiles';
var grid = $("#" + tblName);
grid.jqGrid({
url: 'WebService.asmx/GetFileLog',
colNames: ['ID', 'File Type', 'Report Date', 'Export Date', 'EE Count'],
ajaxGridOptions: {
success: function(data, textStatus) {
if (textStatus == "success") {
ReceivedClientData(JSON.parse(getMain(data)).rows, grid); // populates grid
endGridRequest(tblName); // hides the loading panel
}
},
error: function(data, textStatus) {
alert(textStatus);
alert('An error has occured retrieving data!');
}
},
editurl: "WebService.asmx/ModifyFileLog",
serializeEditData: function(postData) {
return JSON.stringify(postData);
},
recreateForm: true,
pager: pager1,
...
}); // end .jqGrid()
grid.jqGrid('navGrid', pager1, { add: true, del: false, edit: true, view: false, refresh: true, search: false },
{}, // use default settings for edit
{
//beforeSubmit: submitAddFileLog,
closeAfterAdd: false,
closeAfterEdit: true
}, // use default settings for add
{}, // delete instead that del:false we need this
{multipleSearch: false }, // enable the advanced searching
{closeOnEscape: true} /* allow the view dialog to be closed when user press ESC key*/
); // end grid/jqGrid('navGrid')
请注意:我开始使用$.ajax()
通过的方式填充datatype: function(data)
,但想到我会回到最简单的例子来得到这个工作。如果您想要使用$.ajax()
而不是简单地使用grid.jqGrid({ url: blah });
来表达您对使用{{1}}的优势的想法,我很乐意了解更多信息。否则,请告诉我是否更适合将其作为单独的问题发布。
另外,如果我以错误的方式做这件事,请告诉我。我没有被任何一种方法完成任务。我宁愿是错误的,并学习如何做这个正确的方式,而不是“正确”在我自己的心情,继续通过它来破解我的方式。
任何帮助,以及示例,将非常感激。
答案 0 :(得分:2)
在我看来,你的主要问题是 JS - Globals 。您以错误的方式使用jQuery.extend功能。你应该更换一个电话
jQuery.extend(
jQuery.jgrid.defaults, {
// ...
},
jQuery.jgrid.edit, {
// ...
}
);
两个单独的电话:
jQuery.extend(
jQuery.jgrid.defaults, {
// ...
}
);
jQuery.extend(
jQuery.jgrid.edit, {
// ...
}
);
之后,对服务器的编辑请求将为{"FileType":3,"ExportDate"="12/29/2010","oper":"add","id":"_empty"}
,而不是FileType=3&ExportDate=12%2F29%2F2010&oper=add&id=_empty
。
接下来,我不确定您是否可以将ExportDate
用作Date
(DateTime
???)类型。您可能应该从String
类型开始,然后将输入数据转换为您需要的数据类型。
下一个评论。确保ModifyFileLog
返回JSON数据。例如,您可以使用<ScriptMethod(ResponseFormat:=ResponseFormat.Xml)>
代替<ScriptMethod()>
。如果使用.NET 4.0,您可以通过许多其他方式实现相同的目标。
还有一件事。 ModifyFileLog
应为Function
而不是Sub
,并返回新添加的对象的Id
。在编辑或del操作的情况下,将忽略返回值。
因为ModifyFileLog
Function
将返回JSON数据,您必须解码/解析它。你几乎可以用我描述here的方式做到这一点。如果是ASMX Web服务,您可以执行以下操作:
jQuery.extend(
jQuery.jgrid.edit, {
ajaxEditOptions: { contentType: "application/json" },
recreateForm: true,
serializeEditData: function(postData) {
return JSON.stringify(postData);
},
afterSubmit: function (response, postdata) {
var res = jQuery.parseJSON(response.responseText);
return [true, "", res.d];
}
}
);