jqGrid

Question

如果我已将表单选项配置为创建一个包含 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/

jqGrid - formoptions rowpos 和 colpos 用于创建 3 列视图表单。如何使 1 行的数据字段 colspan 整个宽度/

jqGrid - formoptions rowpos and colpos is being used to create 3 column View form. How can you make 1 row's data field colspan the full width/

free-jqgrid