jqGrid - 自定义操作的模态表单

Posted 2023-02-24

【中文标题】jqGrid - 自定义操作的模态表单

【英文标题】：jqGrid - modal forms for custom operations

【发布时间】：2015-01-25 16:49:16

【问题描述】：

在我的大多数网格中，如果我想执行“自定义操作”，以 jqGrid 模式形式显示一些数据并允许用户单击“提交”来做某事，我可以简单地利用现有的“编辑”操作并根据我的需要进行调整。

但是，我正在处理一个网格，其中添加、编辑和删除操作都在使用中，我需要一个额外的“自定义操作”来打开一个 jqGrid 模式表单来显示几个列以及一个提交按钮将密钥 ID 发送到目标 URL。

通常这很容易简单地重新分配编辑功能，但由于正在使用编辑，我不确定如何执行此操作。 jqGrid 是否有适当的方法来创建新的自定义操作，就像 Edit 一样显示模态表单？

【问题讨论】：

您的网格中的所有行都需要这个对话框吗？

自定义模态表单数据将基于所选行（就像 NavGrid 编辑一样）。用户将选择该行，单击 NavGrid 中的“自定义按钮”，然后会出现一个 jqGrid 模态表单，其中有几个处于只读模式的列，以及一个提交按钮

我可以建议您一个解决方案，通过行 ID 从服务器获取您的表单。它对您来说足够好吗？

听起来可能行得通。

【参考方案1】：

最后，我无法通过“核心”jqGrid 功能找到实现此目的的方法，最后只是简单地向网格中添加了一个新按钮，该按钮打开了我自己的自定义模式框。

jqGrid 的多选功能还用于允许用户在单击新按钮时选择多条记录以传递给此自定义函数。

这是将按钮添加到 jqGrid 的代码。 AJAX 调用检索正在填充的模式的 html 内容（JSON 格式）：

        .navButtonAdd('#listAllSupplierPurchasesGridPager', 
        caption: "Mark Paid",
        buttonicon: "ui-icon-add",
        onClickButton: function () 

            var s;
            s = $("#listAllSupplierPurchasesGrid").jqGrid('getGridParam', 'selarrrow');

            if (s.length > 0) 
                // Make AJAX call to get the dynamic form content
                $.ajax(
                    cache: false,
                    async: true,
                    type: 'POST',
                    url: "/TargetItems/MarkPurchasesPaidRequest",
                    data: 
                        PurchaseIds: JSON.stringify(s)
                    ,
                    success: function (content) 
                        // Add the content to the div
                        $('#MarkPurchasePaidModal').html(content);
                        // Display the modal
                        $("#MarkPurchasePaidModal").dialog("open");
                    ,
                    error: function (res, status, exception) 
                        alert(status + ": " + exception);
                    ,
                    modal: true
                );
            
        ,
        position: "first"
    )

用于设置基本模态框的jQuery：

        $("#MarkPurchasePaidModal").dialog(
        autoOpen: false,
        width: 768,
        autoheight: true,
        show: 
            effect: "blind",
            duration: 250
        ,
        modal: true
    );

以及用于保存模态的 div HTML：

<div id="MarkPurchasePaidModal" role="dialog" title="Mark Purchases Paid" class="container"></div>