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

Вам нужно, чтобы скрыть некоторые ненужные столбцы во второй строке View. Код 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 параметр, чтобы указать View вариантов. Это делает код более читаемым. См. https://jsfiddle.net/OlegKi/4xyf0adw/