Question

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

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

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

Answer 1

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

备选方案，您可以使用custom button（请参阅this answer作为示例）。

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

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

Answer 2

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

如果您还有其他问题，可以在此处提出。我确实在我的客户（机密）网站中使用了一些这样的例子，因此很容易根据您的需要进行操作。

希望它有所帮助。

Answer 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); }

jqGrid自定义编辑对话框

3 个答案: