如何在 jqGrid 的内联编辑中为编辑/删除指定不同的 URL 或参数？

Question

我们正在使用 jqGrid 在我们的网站上显示一个交互式列表。我们有一个用于此列表的 ajax 数据调用的访问层文件——它接收特定格式的参数并返回 JSON 结果。此访问层需要 url 参数 functionName 和 functionParams（参数的 json 集合）。

我们在网格中提供内联编辑和删除功能，但问题是您只能为两者设置一个 URL。

真的，我们需要编辑 URL 看起来像这样：

editurl: 'ListAjaxAccess.cfm?functionName=editMember&functionParams={"id":"341","firstName":"John","lastName":"Smith"}'

删除 URL 看起来像这样：

editurl: 'ListAjaxAccess.cfm?functionName=deleteMember&functionParams={"id":"341"}'

但是，您只能使用 editurl 为内联编辑和内联删除设置一个 URL，它将表单与“操作”参数一起发布到页面以进行区分。在定义 editurl 时，我似乎找不到访问操作参数或表单值的方法，以便我可以动态构建 url。

我能看到的唯一解决方法是创建另一个文件 inlineListProcessing.cfm，将 editurl 设置为该文件，该文件将构造正确的格式并调用 ListAjaxAccess。我不想创建额外的中间文件 - 还有其他选择吗？有没有办法调用不同的url或者根据操作动态构建url字符串？

Answer 1

需要使用HTTP POST，但将参数放在URL中，这有点奇怪。 URL 中的参数通常只在 HTTP GET 请求中使用，但 HTTP GET 通常会被缓存（因为它不受 HTTP 标头禁止）。无论如何，一切皆有可能。

我将从删除开始。重要的是要了解formatter:'actions' 在内部使用表单编辑delGridRow，其中描述了哪些选项和回调here。 url 选项指定 Ajax 请求中使用的 URL，mtype 选项可用于指定 HTTP 方法。默认为mtype: "POST"。要制作动态 URL，您可以使用例如onclickSubmit 回调，第一个参数(options) 是对delGridRow 内部选项的引用。您可以修改options 的url 属性，然后jqGrid 将在将发送到服务器的Ajax 请求中使用修改后的URL。重要的是要了解onclickSubmit 的主要目标是使用附加信息扩展 postdata。如果不需要发送其他数据，则应返回空对象{}。 onclickSubmit 的第二个参数是 id 或逗号分隔的 id 列表（如果使用 multiselect: true）。我想你不使用multiselect: true 选项，只需要删除一行。 onclickSubmit 回调的结果代码如下：

onclickSubmit: function (options, rowid) {
    options.url = "ListAjaxAccess.cfm?functionName=deleteMember&functionParams=" +
            JSON.stringify({id: rowid});
}

如果你会使用免费的 jqGrid 比你可以设置回调的地方很容易。见the article。您可以在属性中包含 jqGrid 选项 formDeleting：

formDeleting: {
    onclickSubmit: function (options, rowid) {
        options.url = "ListAjaxAccess.cfm?functionName=deleteMember&functionParams=" +
                JSON.stringify({id: rowid});
    }
}

现在任何删除行方法delGridRow的调用都将使用回调（包括formatter: "actions"）。

如果你必须使用旧的 jqGrid 4.6 并且你使用 formatter: "actions"，那么你应该检查 formatter: "actions" here 的选项。代码中的相应更改将位于定义formatter: "actions" 的列内。首先你应该永远不要使用 name: ''。每列的name 应该对应HTML 中id 的规则，并且值必须是唯一的。你可以使用类似的东西

{
    formatter: "actions",
    formatoptions: {
        delOptions: {
            onclickSubmit: function (options, rowid) {
                options.url = "ListAjaxAccess.cfm?functionName=deleteMember&functionParams=" +
                        JSON.stringify({id: rowid});
            }
        }
    }
}

现在回到第二个问题：设置内嵌编辑的动态URL。这可能相对棘手，因为正如我所写，在 URL 中放置参数对于 HTTP POST 绝对不典型。可以使用beforeSaveRow回调动态修改URL，但是回调的选项没有修改结果。因此，您应该确认您确实需要将数据作为 URL 的参数，并且将相同的数据放在 HTTP POST 的正文中不是您的选择。

更新：如果您需要使用 HTTP GET 进行内联编辑，那么您应该首先添加代码

$.jgrid = $.jgrid || {};
$.jgrid.inlineEdit = $extend(true, $.jgrid.inlineEdit, {mtype: "GET"});

代码开头的某处。它将用于内联编辑的默认 HTTP 方法从“POST”更改为“GET”。这是必需的，因为旧 jqGrid 4.6 版本的formatter: "actions" 无法指定内联编辑的mtype 选项。在免费的 jqGrid 中，可以在 formatter: "actions" 的 formatoptions 属性内使用 mtype: "GET"，或者在 jqGrid 的 inlineEditing 选项内使用：inlineEditing: { mtype: "GET" }。

要对内联编辑的参数进行自定义格式，可以使用 jqGrid 的serializeRowData 回调（参见here）：

editurl: "ListAjaxAccess.cfm",
serializeRowData: function (postData) {
    return {
        functionName: "editMember",
        functionParams: JSON.stringify(postData)
    }
}

要使用 HTTP GET 进行删除，您可以将mtype: "GET" 选项添加到上述delOptions。或者，您可以使用另一种形式：

{
    formatter: "actions",
    formatoptions: {
        delOptions: {
            mtype: "GET",
            serializeDelData: function (postData) {
                return {
                    functionName: "deleteMember",
                    functionParams: JSON.stringify({id: postData.id});
            }
        }
    }
}

Edit 和 Delete 都将使用 editurl: "ListAjaxAccess.cfm"，但会使用不同的 URL 参数。

我必须指出，HTTP GET 默认会缓存在 Web 浏览器中。为确保不使用缓存，我建议您在 URL 的服务器响应中设置 Cache-Control: private, max-age=0 HTTP 标头。