jqGrid-formoptions rowpos和colpos用于创建3列视图表单。你怎么能排成一行'；s数据字段colspan全宽/

如果我已将formoptions配置为创建一个包含6列（3列用于标签，3列用于数据）的表单，并且我希望表单中的一行包含2列（1行用于标签，1行用于表单的全宽数据），我该如何操作

我尝试使用colSpan并查看示例，但无法使其工作

以下是我的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();                                      
         }
};

---

您需要在视图的第二行中隐藏一些不需要的列。showForm之前的

代码如下

beforeShowForm:函数（$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）；
}

另外，我建议您使用
formview
选项来指定视图选项。它使代码更具可读性。请参见
BTW-我还必须重写我使用的引导CSS，因为它有
.form control{display:block}
，这会阻止colspan工作。为了彻底解决此问题，我将其改写为
.form control{display:table cell}
。@不客气！感谢您对Bootstrap中的
.form control
的评论-这些信息可能对其他开发人员有所帮助。@MarkT:I修复了
.filter（：gt（1）”）
到
.filter（：gt（0）”
。此外，我还发布了GitHub，这将改进Bootstrap和jQueryUI的视图表单外观，并使表单看起来更接近。请测试更改，如果您在免费jqGrid的最新代码中发现任何问题，请通知我。见和。可以添加
.ui jqdialog content.form view data{white space:pre；}
以防止在视图中包装数据form@MarkT：是包含编辑和查看表单的演示谢谢。这似乎很有效。到目前为止，我还没有看到任何问题，但如果我看到了，我会让你知道。