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/

jqGrid - formoptions rowpos和colpos用于创建3列视图表单。你怎么能让1行的数据字段全扫描/

1 个答案: