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

时间:2015-01-25 16:49:17

标签: forms jqgrid modal-dialog

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

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

通常这很容易简单地重新编辑Edit函数,但由于Edit正在使用中,我不知道如何做到这一点。 jqGrid是否有适当的方法来创建显示模态表单的新自定义操作,就像编辑一样?

1 个答案:

答案 0 :(得分:0)

最后,我无法通过“核心”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>