jqGrid - formoptions rowpos和colpos正用於創建3列視圖窗體。你如何使1行的數據字段colspan全角/

Question

如果我已經配置了formoptions來創建一個6列的表單（標籤爲3，數據爲3），並且我希望表單中的1行有2列（ 1表示標籤，1表示表單全寬數據），我該怎麼做？

我試過使用colSpan並看着this的例子，但不能得到它的工作。

這裏是我的jqGrid的結構：

colModel :[ { 
     label: 'Row 1 Column 1', 
     name: 'a', 
     formoptions: { 
     colpos: 1, // the position of the column 
     rowpos: 1, // the position of the row 
     } 
    }, { 
     label: 'Row 1 Column 2', 
     name: 'b', 
     formoptions: { 
     colpos: 2, // the position of the column 
     rowpos: 1, // the position of the row 
     } 
    }, { 
     label: 'Row 1 Column 3', 
     name: 'c', 
     formoptions: { 
     colpos: 3, // the position of the column 
     rowpos: 1, // the position of the row 
     } 
    }, { 
     label: 'Row 2 Full Width', 
     name: 'd', 
     formoptions: { 
     colpos: 1, // the position of the column 
     rowpos: 2, // the position of the row 
     }], 

和視圖的配置形式選項

 { 
      //edit options 
     }, 
     { 
      //add options 
     }, 
     { 
      //del options 
     }, 
     { 
      //search options 
     }, 
     { 
      //view options 
      width : 1000, 
      labelswidth :50, 
      viewPagerButtons : false, 
      closeOnEscape : true, 
      beforeShowForm: function(form) { 
       var dlgDiv = $("#viewmod" + mygrid[0].id); 
       var parentDiv = dlgDiv.parent(); 
       var dlgWidth = dlgDiv.width(); 
       var parentWidth = parentDiv.width(); 
       var dlgHeight = dlgDiv.height(); 
       var parentHeight = parentDiv.height(); 
       dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px"; 
       dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px"; 
       var $tr = $("#trd_d"), // 'name' is the column name 
       $label = $tr.children("td.CaptionTD"), 
       $data = $tr.children("td.DataTD"); 
       $data.attr("colspan", "5");        
       $data.children("input").css("width", "95%"); 
       $label.hide();          
     } 
}; 

Answer 1

你需要隱藏視圖的第二行中的一些不必要的列。的beforeShowForm的代碼可以像下面

beforeShowForm: function ($form) { 
    var $captionTds = $("#trv_d>td.CaptionTD"), 
     $dataTds = $("#trv_d>td.DataTD"); 

    $captionTds.filter(":gt(0)").hide(); 
    $dataTds.filter(":gt(0)").hide(); 
    $dataTds.first().attr("colspan", 5); 
} 

我建議你還用formViewing選項來指定視圖選項。它使代碼更具可讀性。請參閱https://jsfiddle.net/OlegKi/4xyf0adw/