jqGrid

Question

在我的一个 jqGrid Add/Edit 模态中，我想按照下图所示的方式排列字段：

感谢 Oleg，我已经从 his post 了解到如何在多列中排列字段。但我想在 Add/Edit 模态中执行 rowspan，如下图

Answer 1

我为你创造small demo based on the demo from the answer。该演示有隐藏列 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");
    }
});

它显示的结果类似于

jqGrid - Add/Edit 模式中的行跨度

jqGrid - Row Span in Add/Edit Modal

javascript

jquery