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/