jqGrid-添加/編輯模態中的行跨度

Question

在我的jqGrid添加/編輯模態之一中，我想像下面的圖片那樣安排字段：

多虧了Oleg，我已經從他的帖子中知道了如何在多列中排列字段。 但是我想像下面的圖片一樣在“添加/編輯”模式中進行行跨

Answer 1

我根據答案中的演示為您創建了一個小演示 。 該演示具有隱藏的列flag ，該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內部設置編輯表單的所有必需屬性。 如果需要支持編輯表單的“下一個/上一個”按鈕，則也應使用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");
    }
});

它顯示結果如