jqGrid自定义编辑对话框

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

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

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

来源

2010-09-28 Andrei

您可以使用的editfunc或addfunc选项。例如，如果定义了editfunc，则将代替editGridRow jqGrid将被称为editfunc，并将所选行的id作为参数。

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

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

修订：如果你只需要让你可以使用beforeShowForm为次修改的编辑对话框的布局进行一些修改。

来源

2010-09-28 08:14:55 Oleg

谢谢，但它似乎不工作:(，我尝试像这样：...）。navGrid（ '＃纳维德'， {编辑：真正}，{ editfunc：功能（ID）{警报（ID）;}，高度：600， reloadAfterSubmit：假的， jqModal：真实， closeOnEscape：真 }）; – Andrei 2010-09-28 15:14:37

@Andrei：以这种方式无法工作editfunc或addfunc是navGrid的选项而NOT **是prmEdit参数的一部分。所以你应该尝试'...）。navGrid（'＃navId'，{edit：true，editfunc：function（id）{alert（id）;}}）;' – Oleg 2010-09-28 15:30:27

谢谢，它很好用！ – Andrei 2010-09-28 17:41:54

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

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

希望它有帮助。

来源

2010-09-28 07:47:49

谢谢，但我都准备好了看着他们。我需要的是一个自定义编辑对话框，与网格中的字段无关。编辑行应向我发送行ID，并且我将返回将在对话框中显示的HTML和JS代码。 – Andrei 2010-09-28 07:55:33

@Andrei - 你在“行编辑”类中检查了所有5个例子吗？其中还有代码片段，位于右侧面板中的每个示例下方。 – 2010-09-28 08:03:26

我的编辑对话框中有太多的领域，因此成为过高，所以我不得不把场并排两列。我做了如下：

我试过各种方式，使用wrap（）等，但发现如果您修改原始表结构的值不会发布到服务器。所以我刚刚克隆了tr元素，将它们放在新的表格中，并隐藏了旧的元素。我没有隐藏整个表格，所以验证仍然可见。我对克隆的元素进行了更新以更新旧元素。这很好。参数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); }

来源

2012-02-20 09:06:59 Lomak

jqGrid自定义编辑对话框

回答

相关问题