Question

我正在使用jQgrid，其中几个列标题已分组。数据内容和列标题未对齐。使用jquery.1.6.4，jquery-ui-1.8.16版本的相同代码没有问题，但在升级到jquery-1.11.0之后，jquery-ui-1.10.4版本的数据未对齐。

jQgrid版本4.4.0已被使用

以下是用于生成网格的脚本代码段

function displayGrid(data){

var gridId = testGrid.attr('id');
testGrid.jqGrid('GridUnload');
testGrid= $('#' + gridId);

var colNames =['','Col1','Col2',"Col3",'Col4','Col5',
               'Col6','Col7','Col8','Col9,'Col10];
var colModels = [{name : 'id',index : 'id',align : "center",hidden : true},
                 {name : 'col1',index : 'col1',sortable : true,width : 35,align : "center"},
                 {name : 'col2',index : 'col2',sortable : true,editable : true,title:true,
                          align : "center",width:170,
                          resizable:false},
                {name : 'col3',index : 'col3',sortable : false,title : false,width : 40,align : "center",resizable : false},
                {name : 'col4',index : 'col4',sortable : false,align : "center",title : false,width : 30,resizable : false},
                {name : 'col5',index : 'col5',sortable : false,title : false,enable:"true",align : "center",width : 30,resizable : false},
                {name : 'col6',index : 'col6',sortable : true,editable : true,editoptions: { style: "text-transform: uppercase" },title : true,width :120,align : "center",resizable : false},
                {name : 'col7',index : 'col7',sorttype : true,editable : true,title : true,editoptions: { style: "text-transform: uppercase" },width : 120,align : "center",resizable : false},
                {name : 'col8',index : 'col8',width : 40,title : false,editable : true,editoptions : {maxlength : 3},hidden : false,align : "center",sortable : true,resizable : false},                    
                {name : 'col9',index : 'col9',sortable : true,title : false,width : 35,align : "center",resizable : false},
                {name : 'col10',index : 'col10',sortable : true,title : false,width : 35,align : "center",resizable : false}];
var groupColParamsHeaders = new Array();
var groupcolParams = {startColumnName :'col6',numberOfColumns :2,titleText : 'Group Header'};

jQuery("#testGrid").jqGrid('GridUnload');
testGrid.jqGrid({
                    datatype : "local",
                    data  : data,
                    altRows : true,
                    height : 'auto',
                    autowidth: true,
                    viewrecords : true,                     
                    'cellEdit': cellEditOverrideVal,
                    'cellsubmit' : 'clientArray',
                    'editurl': 'clientArray',
                    rowNum : data.length,
                    colNames : colNames,
                    colModel : colModels,
            });

//通过对标题分组进行评论，网格对齐似乎没问题，但是对其进行分组会使其不对齐

  testGrid.jqGrid('setGroupHeaders', {
    useColSpanStyle : true,
    groupHeaders : groupcolParams
});

}

这是HTML代码

<div style="overflow: auto; height: 400px;" id="divConfig" class="tms-display-block">
            <table id="testGrid"><tr><td/></tr></table> 
</div>

请在下方找到未对齐的快照任何人都可以帮我解决这个问题吗？提前致谢

jQgrid数据内容和标题列未对齐

0 个答案: