jqGrid 自定义编辑对话框答案

【问题标题】：jqGrid Custom Edit DialogjqGrid 自定义编辑对话框
【发布时间】：2011-04-18 03:46:01
【问题描述】：

我正在开发一个使用 jqGrid 的应用程序。问题是应该在行编辑时出现的编辑对话框必须具有特定的布局。所以我宁愿通过 ajax 加载它，然后手动将数据发送回 jqGrid。我在论坛上搜索了很多，但我找不到如何做到这一点的例子。

所以，我只需要 jqGrid 来使用 PHP 脚本中的自定义内容填充编辑对话框弹出窗口。

更新：我的想法是我有一个表单生成器，用户可以在其中设置编辑字段的位置/宽度/高度/可见性......这必须在编辑对话框中使用。

【问题讨论】：

标签： php jquery jqgrid

【解决方案1】：

您可以查看Tutorial，这是jqGrid Plugin的官方演示网站。我确信在该类别中有一些“行编辑”的例子。您还可以在此演示网站中查看许多其他 jqGrid 示例。
您也可以查看Home page。

如果还有问题，可以在这里提问。我确实在我的客户（机密）网站之一中使用了其中一些示例，因此可以根据您的需要轻松操作。

希望对你有帮助。

【讨论】：

谢谢，但我已经准备好查看它们了。我需要的是一个自定义编辑对话框，它与网格中的字段无关。编辑行应该向我发送行 ID，我将返回将在对话框中显示的 HTML 和 JS 代码。
@Andrei - 您检查过“行编辑”类别中的所有 5 个示例吗？在右侧面板中的每个示例下方也有代码 sn-ps。

【解决方案2】：

您可以使用navGrid 的editfunc 或addfunc 选项。例如，如果定义了 editfunc，那么 jqGrid 将被称为 editfunc，而不是 editGridRow，并将所选行的 id 作为参数。

您也可以使用custom button（以this answer 为例）。

要在自定义编辑对话框后修改表格中的数据，您可以使用setRowData 函数。

更新：如果您只需要对编辑对话框的布局进行一些修改，您可以使用beforeShowForm 进行修改。

【讨论】：

谢谢，但它似乎不起作用:(，我试过这样：...).navGrid('#navId', {edit:true},{ editfunc: function(id) { alert(id); }, height:600, reloadAfterSubmit:false, jqModal:true, closeOnEscape:true });
@Andrei: 这样它不能工作editfunc 或addfunc 是navGrid 的选项和NOT 的一部分prmEdit 参数。所以你应该试试...).navGrid('#navId', {edit:true, editfunc: function(id){ alert(id); }});

【解决方案3】：

我的编辑对话框有太多字段，因此变得太高，所以我不得不将字段并排放在 2 列中。我是这样做的：

我尝试了各种方法，使用wrap()等，但发现如果修改原始表结构，值不会发布到服务器。所以我只是克隆了 tr 元素，将它们放在新表中，并隐藏了旧表。我没有隐藏整个表格，因此验证仍然可见。我对克隆的元素进行了 onchange 以更新旧元素。这很好用。参数 tableName 是你的 jqgrid 元素 id。

var splitFormatted = false;
function SplitFormatForm(tableName, add) {
  if (!splitFormatted) {
    splitFormatted = true;
    $("#FrmGrid_" + tableName).append('<table><tr><td><table id="TblGrid_' + tableName + '_A" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td><td><table id="TblGrid_' + tableName + '_B" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td></tr></table>');

    var cc = $("#TblGrid_" + tableName + "> tbody").children("tr").length;
    var s = (cc / 2) - 1;

    var x = $("#TblGrid_" + tableName + "> tbody").children("tr");
    var i = 0;
    x.each(function (index) {
        var e = $(this).clone();
        var oldID = e.attr("id") + "";
        var newID = oldID;
        if (oldID.substring(0, 3) === "tr_") {
            newID = "clone_" + oldID;
            $(this).css("display", "none");
            e.change(function () { $("#" + oldID + " > .DataTD > .FormElement").val($("#" + newID + " > .DataTD > .FormElement").val()); });
            e.attr("id", newID);

            if (i++ < s) {
                $("#TblGrid_" + tableName + "_A").append(e);
            }
            else {
                $("#TblGrid_" + tableName + "_B").append(e);
            }
        }
    });

    //This hack makes the popup work the first time too
    $(".ui-icon-closethick").trigger('click');
    var sel_id = "'new'";
    if (!add) {
        sel_id = jQuery('#'+tableName).jqGrid('getGridParam', 'selrow');
    }
    jQuery('#'+tableName).jqGrid('editGridRow', sel_id, { closeAfterAdd: true, width: 800, afterSubmit: function (response, postdata) { return [response.responseText == 'OK', response.responseText]; } });
}}

在您的 editOptions 中调用此代码，如下所示：

afterShowForm: function () { SplitFormatForm("SiteAccountsGrid", false); }

【讨论】：