jqgrid隐藏分组列 - 对齐问题IE浏览器

时间:2011-05-10 06:55:22

标签: jquery jqgrid

亥, 我在IE浏览器中遇到对齐问题 场景:
1.将组列隐藏(groupColumnShow:[false])
2.隐藏任何列,(隐藏:true)
附加屏幕截图。enter image description here

[截图] http://uatdemo.sify.net:4080/jqgrid.png

请帮忙解决。

jQuery("#list48").jqGrid({
    data: mydata,
    datatype: "local",
    height: 'auto',
    rowNum: 30,
    rowList: [10,20,30],
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date",
             formatter:"date"},
        {name:'name',index:'name', width:100, editable:true},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float",
             formatter:"number", editable:true},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float",
             editable:true},        
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    pager: "#plist48",
    viewrecords: true,
    sortname: 'name',
    grouping:true,
    groupingView : {
        groupField : ['name'],
        groupColumnShow : [false]
    },
    caption: "Hide Grouping Column"
});

5 个答案:

答案 0 :(得分:1)

我无法重现您描述的问题。您可以将代码与the demo进行比较,然后尝试查找错误。

答案 1 :(得分:1)

我有完全相同的问题。我找到的解决方案如下:

  1. 将所有隐藏字段放在最后(在colModel中)
  2. 定义此功能:

    function resolveAlignmentJqgridBug() {  
      /*  
      Without the below line, the "jqgfirstrow" has child <TD> for every hidden column.  
      These <TD>s have non zero width and with "display: none".  
      Setting the style of these <TD>s to "width: '0px', display: 'block'" resolves the problem. */
      jQuery(".jqgfirstrow").find(":hidden").css({width: '0px', display: 'block'});  
    }
    
  3. 在网格定义之后和每次更改分组时调用此函数(我有动态分组更改):

    jQuery("#list").jqGrid({
    ...
    datatype: "json",  
        colNames:['not hidden field','hidden field'],  
        colModel:[  
        ...  
        {name:'typeId', hidden:false},  
            {name:'url', hidden:true}  
        ],  
        autowidth: true,   
        shrinkToFit:true,  
    ...  
    grouping: true,  
        groupingView : {  
        groupField : ['statusDesc'],  
        groupColumnShow : [true],  
        groupText : ['<b>{0}</b> ({1})'],  
        groupCollapse : false,  
        groupOrder: ['asc'],  
        groupSummary : [false],  
        groupDataSorted : false   
         },  
    ...  
    });  
    
    resolveAlignmentJqgridBug();
    }  
    

答案 2 :(得分:1)

可以通过在HTML代码顶部添加指令来解决此错误:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

答案 3 :(得分:0)

试试这个:

jQuery("#list48").jqGrid('hideCol', "yourColumnName");

答案 4 :(得分:0)

最后调用JQGrid事件的加载完成

loadComplete: function () {
  jQuery(".jqgfirstrow").find(":hidden").css("cssText", "width:0px!important;height:0px!important;display:none!important");        
}