jqGrid 自定义编辑对话框

Question

jqGrid 自定义编辑对话框

phpjqueryjqgrid

10

我正在开发一个使用jqGrid的应用程序。问题是在行编辑时，应该出现特定布局的编辑对话框。因此，我希望通过ajax加载它，然后手动将数据发送回jqGrid。我在论坛上搜索了很多，但找不到如何实现的示例。

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

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

- Andrei

3个回答

0

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

我尝试了各种方法，使用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); }

- Lomak

0

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

如果您有任何问题，可以在这里提问。我曾在我的一个客户（保密）的网站中使用了其中一些示例，因此根据您的需求进行操作将会很容易。

希望能对您有所帮助。

- Knowledge Craving

谢谢，但我已经查看过它们了。我需要的是一个自定义编辑对话框，与网格中的字段无关。编辑行应该向我发送行ID，然后我将返回在对话框中显示的HTML和JS代码。 - Andrei

@Andrei - 你有检查“行编辑”类别中的所有5个示例吗？在右面板中的每个示例下面也有代码片段。 - Knowledge Craving

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleg · Accepted Answer

您可以使用navGrid的editfunc或addfunc选项。例如，如果定义了editfunc，那么在选择行的ID作为参数时，将调用editfunc代替editGridRow jqGrid。

另外，您还可以使用自定义按钮（请参考此答案）。

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

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