如何为 jqGrid jsonify“添加”帖子/参数

这个人要杀了我。我读过很多Oleg https://stackoverflow.com/users/315935/oleg的评论，并通过文档 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#adding_row，但我想我忽略了一些东西really simple.

我有一个通过调用返回 JSON 的 webmethod 填充的 jqGrid。我们那里很好。我使用导航器作为“添加”按钮，并使用onSelectRow w/ jqGrid.editRow()供我编辑。

单击“添加”按钮时出现对话框，可以填写所有内容。但是，我得到一个error Status: 'Internal Server Error'. Error code: 500单击“提交”按钮后返回消息。使用Firebug，Response is {"Message":"Invalid JSON primitive: FileType.","StackTrace":....。和Post is FileType=3&ExportDate=12%2F29%2F2010&oper=add&id=_empty.

显然，我的帖子没有被“json化”。我尝试过使用serializeEditData, and beforeSubmit试图手动返回JSON.stringify(eparams);，但没有任何效果。请参阅下面我的代码。

网络方法

<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-全局变量

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 });，我很想了解更多。否则，请告诉我将其作为单独的问题发布是否更合适。

另外，如果我只是以错误的方式这样做，请告诉我。我不会被任何一种方法所束缚。我宁愿犯错并学习如何以正确的方式做到这一点，而不是在我自己的想法中“正确”并继续破解它。

任何帮助以及示例，将不胜感激。

我认为你的主要问题在于JS-全局变量。你用jQuery.扩展 http://api.jquery.com/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 as a Date (DateTime？？？） 类型。也许你应该从String输入然后将输入数据转换为您需要的数据类型。

下一句话。请确保ModifyFileLog返回 JSON 数据。例如你可以使用<ScriptMethod(ResponseFormat:=ResponseFormat.Xml)>代替<ScriptMethod()>。如果您使用 .NET 4.0，您可以通过许多其他方式实现相同的目的。

还有一件事。这ModifyFileLog应该Function代替Sub并返回Id新添加的对象。在编辑或删除操作的情况下，返回值将被忽略。

Because ModifyFileLog Function将返回 JSON 数据，您必须对其进行解码/解析。您几乎可以按照我描述的相同方式执行此操作here https://stackoverflow.com/questions/4076834/jqgrid-editurl-controller-action-parameters/4077902#4077902。对于 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];
        }
    }
);