的jqGrid - 行寬在添加/編輯莫代爾

Question

在我的jqGrid添加/編輯莫代爾我想安排在這樣的領域，如下面的圖片之一：

感謝奧列格我從his post已經知道，如何排列在多欄中的字段。但我想要在添加/編輯模式下執行rowspan，如下圖所示

Answer 1

我爲您創建的small demo基於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"); 
    } 
}); 

它顯示的結果就像