jqGrid - 添加/编辑模式中的行跨度答案

【问题标题】：jqGrid - Row Span in Add/Edit ModaljqGrid - 添加/编辑模式中的行跨度
【发布时间】：2015-03-25 09:48:41
【问题描述】：

在我的一个 jqGrid 添加/编辑模式中，我想以如下图所示的方式排列字段：

感谢 Oleg，我已经从 his post 知道了如何在多列中排列字段。但我想在添加/编辑模式中进行行跨度，如下图所示

【问题讨论】：

【解决方案1】：

我根据the answer 的演示为您创建了small demo。该演示有隐藏列flag，它提供了图片 URL 的信息。我定义了如下所示的列

{ name: "flag", index: "flag", width: 55, hidden: true,
    edittype: "image", editrules: { edithidden: true },
    editoptions: { src: "", style: "margin-left: 20px" },
    formoptions: { label: "", rowpos: 1, colpos: 2}}

编辑表单使用beforeInitData，它根据flag 的值设置src 属性，然后在beforeShowForm 中设置编辑表单的所有必需属性。如果需要支持编辑表单的 Next/Prev 按钮，那么也应该使用 afterclickPgButtons 回调。最终代码如下

$grid.jqGrid("navGrid", "#pager", {add: false, del: false, search: false}, {
    recreateForm: true,
    width: 450,
    beforeInitData: function () {
        var $self = $(this),
            cm = $self.jqGrid("getColProp", "flag"),
            selRowId = $self.jqGrid("getGridParam", "selrow"),
            lang = $self.jqGrid("getCell", selRowId, "flag");
        cm.editoptions.src = "http://www.ok-soft-gmbh.com/img/flag_" + lang + ".gif";
    },
    beforeShowForm: function ($form) {
        var $formRows = $form.find(".FormData");
        $formRows.eq(0).children("td.DataTD").eq(1).attr("rowspan", "3"); //.css("text-align", "center");
        $formRows.eq(1).children("td.DataTD").eq(1).hide();
        $formRows.eq(2).children("td.DataTD").eq(1).hide();
    },
    afterclickPgButtons: function () {
        var $self = $(this),
            selRowId = $self.jqGrid("getGridParam", "selrow"),
            lang = $self.jqGrid("getCell", selRowId, "flag");
        $("#flag").attr("src", "http://www.ok-soft-gmbh.com/img/flag_" + lang + ".gif");
    }
});

它显示类似的结果

【讨论】：