jquery - 无法使 JQgrid 4.5.2 卡住列正常工作——只有标题在移动

标签 jquery html css jqgrid frozen-columns

我已经尝试通过阅读像这样的其他问题来自己修复它 => 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>

具有正确数据加载 + 固定 header 的生成数据 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;
}

最佳答案

我建议你包括这条线

$(gridId).triggerHandler("jqGridAfterGridComplete");

在 $(gridId).jqGrid('setFrozenColumns'); 行之后。请参阅我的错误报告和相应的建议 here了解更多信息。顺便说一下，相应的 4.5.2 后修复已经在主代码 jqGrid 中(参见 here)。所以这个问题应该会在下一个版本的 jqGrid 中得到解决。

对您的代码的补充说明:请不要在循环中使用 addRowData 来填充具有 datatype: "local" 的网格。取而代之的是，您可以为 data 数组的每个元素设置额外的 id 属性，并使用 jqGrid 的 data: data 选项。它允许您使用数据创建jqGrid。如果您使用 gridview: true 选项，那么这种网格填充将更加有效。参见 the answer了解更多详情。

关于jquery - 无法使 JQgrid 4.5.2 卡住列正常工作——只有标题在移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17284994/

上一篇：css - 可能的 Chrome li 宽度渲染问题

下一篇：html - 从表中的表中删除样式

相关文章：

javascript - 如何: radio button changing opacity of image

html - 在此测试用例中禁用边框折叠

javascript - 向 Ajax 提交表单中没有属性

html - CSS3 - HTML Navlist 背景问题

javascript - 如何在 vis.js 中限制 Y 轴和 X 轴的值

html - 在浏览器中查看电子邮件并转发给 friend

css - 使用 withStyles 和 material ui 的通用类

jquery - 隐藏消息或淡出警报消息

javascript - 如何以编程方式查询 CKEDITOR 内容？

jquery - 奇怪的 z-index 在 safari 中带有 rotateY 但在 chrome 和 firefox 中没有

©2024 IT工具网  联系我们