无法使JQgrid 4.5.2冻结列正常工作 - 只有标题正在移动

时间：2013-06-24 20:58:57

标签： jquery html css jqgrid frozen-columns

我已经尝试通过阅读其他一些问题来解决这个问题，比如这个问题=＆gt; why doesn't Jqgrid frozen column seem to work with filter rows and filter heading?

但我猜到网格自那时起已经发生了变化，因为我无法调用完整的方法（或者我做错了）。

所以现在只有一个标题的副本正在移动而不是数据，标题的高度也不正确，但我认为这是因为我旋转标题并在javascript中调整高度。它是开箱即用的，除了旋转标题但没有它不能正常工作:(

我做了一个干净的代码示例，所以帮助会更容易一点，在我的情况下我也使用一些自定义代码来旋转我的标题，但即使没有它，冻结列也不起作用。

任何帮助将不胜感激：）

Html 

<html>
<head>
    <title>Jqgridtest</title>
    <link rel="stylesheet" type="text/css" media="screen" href="styles/jquery-ui/jquery-ui-1.10.3.custom.css" />
    <link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" type="text/css" />  
     <link rel="stylesheet" href="styles/demo.css" type="text/css" />  
    <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>   
    <script src="jqgrid/js/i18n/grid.locale-nl.js" type="text/javascript"></script>
   <script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="scripts/generatedata.js"></script>    

</head>
<body>
    <div>
        <table id="jqgrid">

        </table>
    </div>
</body>
</html>

带有正确数据加载+固定标题的generatedata javascript 

$(document).ready(function() {
    processDataToGrid('#jqgrid') ;
});


function getInternetExplorerVersion()
// Returns the version of Windows Internet Explorer or a -1
// (indicating the use of another browser).
{
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer') {
        var ua = navigator.userAgent;
        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat(RegExp.$1);
    }
    return rv;
}

var fixPositionsOfFrozenDivs = function () {
    var $rows;
    if (typeof this.grid.fbDiv !== "undefined") {
        $rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
        $('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
            var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
            if ($(this).hasClass("jqgrow")) {
                $(this).height(rowHight);
                rowHightFrozen = $(this).height();
                if (rowHight !== rowHightFrozen) {
                    $(this).height(rowHight + (rowHight - rowHightFrozen));
                }
            }
        });
        $(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
        $(this.grid.fbDiv).css($(this.grid.bDiv).position());
    }
    if (typeof this.grid.fhDiv !== "undefined") {
        $rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
        $('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
            var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
            $(this).height(rowHight);
            rowHightFrozen = $(this).height();
            if (rowHight !== rowHightFrozen) {
                $(this).height(rowHight + (rowHight - rowHightFrozen));
            }
        });
        $(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
        $(this.grid.fhDiv).css($(this.grid.hDiv).position());
    }
};



function processDataToGrid(gridId) {

    var data = [ 
    {id:1, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:2, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:3, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: true, x14 : false, x15:true  } ,
    {id:4, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:5, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: true, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:6, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:false, x13: false, x14 : false, x15:true  } ,
    {id:7, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:8, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:9, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: true, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:10, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:11, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:12, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: true, x14 : false, x15:true  } ,
    {id:13, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:14, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:15, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:false, x13: false, x14 : false, x15:true  } ,
    {id:16, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true  } ,
    {id:17, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:18, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:19, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: true, x3:false, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:20, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:21, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:22, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:false, x13: false, x14 : false, x15:true  } ,
    {id:23, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true  } ,
    {id:24, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:25, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:26, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:27, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:28, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:29, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true  } ,
    {id:30, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:31, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:32, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:33, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:34, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:35, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:36, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:37, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:38, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:39, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:40, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: true, x14 : true, x15:true  } ,
    {id:41, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:42, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    ];



    $(gridId).jqGrid({
        datatype: "local",
        gridview: true,
        forcefit: false,
        data:data,
        shrinkToFit: false,
        width: 780,
        height: 400,
        rowNum: 100,
        columnsheight: 150,
        colNames: ['Fixed1', 'Fixed2' ,'Col1', 'Col2', 'Col3' ,  'Col4', 'Col5','Col6', 'col7', 'Col8', 'Col9', 'Col10',  'Col11',  'Col12', 'Col13', 'Col4', 'Col15'  ],
        ignoreCase: true,
        colModel: [
        { name: 'fixed1', sorttype: 'text', search:true, width:300, align: 'left', frozen : true ,sortable:false },
        { name: 'fixed2', sorttype: 'text', search: true, width: 130, align: 'left', frozen: true, sortable: false },
        { name: 'x1', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x2', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x3', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x4', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x5', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x6', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x7', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x8', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x9', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x10', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x11', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x12', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x13', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x14', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x15', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },


        ]
    });



    //enable group headers
    $(gridId).jqGrid('setGroupHeaders', {
        groupHeaders: [
    { startColumnName: 'x1', numberOfColumns: 10, titleText: 'TopHeader1' },
    { startColumnName: 'x10', numberOfColumns: 3, titleText: 'TopHeader2' },
    { startColumnName: 'x13', numberOfColumns: 1, titleText: 'TopHeader3' }
  ]
    });

    $(gridId).jqGrid('setGroupHeaders', {

        groupHeaders: [
    { startColumnName: 'x1', numberOfColumns: 7, titleText: 'SubHeader1' },
    { startColumnName: 'x8', numberOfColumns: 2, titleText: '' },
    { startColumnName: 'x10', numberOfColumns: 6, titleText: 'Subheader2' },
  ]
    });

    $(gridId).jqGrid('setFrozenColumns');


   RotateColumnHeaders($(gridId), 150, 100);
    //enable search and contains searchmethod
    $(gridId).jqGrid('filterToolbar', { searchOnEnter: false, defaultSearch: 'cn' });
        $(gridId).triggerHandler("jqGridAfterGridComplete");
    fixPositionsOfFrozenDivs.call($(gridId)[0]);
}


// Rotates the (x1-x24) columnheaders  90 degrees
var RotateColumnHeaders = function (grid, headerHeight, headerWidth) {
    var trHead = $("thead:first tr")[3];
    var cm = grid.getGridParam("colModel");

    $("th", trHead).height(headerHeight);

    for (var iCol = 0; iCol < cm.length; iCol++) {
        var cmi = cm[iCol];
        //check if name starts with x because our modelnames that should be rotated start with x as well    
        if (cmi.name.match("^x")) {
            var headDiv = $("th:eq(" + iCol + ") div", trHead);
            headDiv.addClass("VerticalHeader");
            headDiv.css("overflow", "initial");
            var ieVersion = getInternetExplorerVersion();
            if (ieVersion != -1 && ieVersion <= 9) {
                headDiv.addClass("VerticalHeaderIE");
                //set height to prevent text clipping
                headDiv.height(23);
                //set background color of parent since background color of child element has been set so the text is readable
                //and the parent color is different = very ugly so set parent color 
                headDiv.parent().css("background", "#EDEDED");
            }
        }
    }

};


function boolFormatter(cellvalue, options, rowObject) {

            if (cellvalue == "*") {
                return '<span class="BoolCell Talks">*</span>'; /* null*/
            }
            else if (cellvalue) {
                return '<span class="BoolCell Allowed">&#x25CF;</span>'; /* true */
            }
            else {
                return '<span class="BoolCell NotAllowed">-</span>'; /* false */
            }

    return new_format_value
}

我的自定义css旋转标题

.VerticalHeader
{
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);  
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    margin-top:-40px;
    position: relative;
    font-size: 0.8em;

}

.VerticalHeaderIE  /* _EXTRA_ style voor VerticalHeader in IE */
{
    text-align:left;
    width:150px;
    height:50px;
    margin-top:-40px;
    margin-left: 20px;
    background-color: #EDEDED;

    zoom: 1;
}

1 个答案:

答案 0 :(得分：2)

我建议你加入

行 
$(gridId).triggerHandler("jqGridAfterGridComplete");
在行$(gridId).jqGrid('setFrozenColumns');之后

。有关详细信息，请参阅我的错误报告以及相应的建议here。顺便说一下，相应的帖子4.5.2修复已经在主代码jqGrid中了解（参见here）。所以问题应该在下一版本的jqGrid中修复。

对您的代码的补充说明：请不要在循环中使用addRowData来填充datatype: "local"的网格。您可以为id数组的每个项设置额外的data属性，并使用jqGrid的data: data选项。它允许您使用数据创建jqGrid 。如果您使用gridview: true选项，那么此类网格填充将更有效。有关详细信息，请参阅the answer。

相关问题
最新问题