jquery - jqGrid 卡住列中出现错误

Question

我有一个第一列被卡住的网格。当我移动水平滚动时，网格标题中的这一列被卡住，但在网格主体中，所有列都可以水平移动，第一列不会卡住。我已经把我的代码检查了一百遍了，没问题。我的元素中没有任何其他 css 或 javascript，它出现在 IE8、Firefox 和 Chrome 中。我正在使用最新版本的 jQgrid。

这是我的代码:

jQuery("#single").jqGrid({
                    data : mydata,
                    datatype : "local",
                    height : 115, //Define el alto total del listado
                    width : 650, //Define el ancho total del listado
                    colNames : [ 'Index', 'Date', 'Code', 'Amount' ], //Nombres de las cabeceras de las columnas.
                    colModel : [ {
                        name : 'item_id', // Prop. name del modelo de datos
                        index : 'item_id',
                        width : 100,
                        sorttype : 'int',
                        align: 'center',
                        frozen:true
                    }, {
                        name : 'item_date',
                        index : 'item_date',
                        width : 450,
                        formatter : 'date',
                        formatoptions : {
                            newformat : 'd/M/Y'
                        },
                        datefmt : 'd/M/Y',
                        align: 'center'

                    }, {
                        name : 'item_cd',
                        index : 'item_cd',
                        width : 400
                    }, {
                        name : 'amount',
                        index : 'amount',
                        width : 400,
                        formatter: "integer", //Define el tipo de dato. Imprescindible cuando queremos crear una celda de totales. 
                        align: 'right',     //Alineación del texto dentro de la celda.
                        editrules : {
                            edithidden : true
                        },
                        editoptions : {
                            /*disabled : 'disabled',*/
                            size : '10',
                            maxlength : '8',
                        }
                    } ],
                    rowNum : 10,
                    rowTotal : 2000,
                    rowList : [ 5, 10, 20, 30 ],
                    loadonce : true,
                    mtype : "GET",
                    rownumbers : false, // Mostrar/ocultar el nº de fila.
                    rownumWidth : 40, // Ancho de la columna que muestra el nº de fila.
                    gridview : true,
                    pager : '#psingle', //Id de la capa que contiene el paginador.
                    sortname : 'item_id', // Columna inicial sobre la que realiza la ordenación. ini
                    viewrecords : true, // Muestra/Oculta  el mensaje de: "Mostrando 1 de..." 
                    sortorder : "desc",
                    editurl : './listado.html',
                    caption : "Tabla de datos editables", //Titulo del listado.
                    align: 'center',
                    //shrinkToFit : true,
                    footerrow : true, // Activa el pie del listado. Imprescible si se quiere visualizar.
                    userDataOnFooter : true,
                    edit : {
                        top : '100px',
                        left : '100px',
                        addCaption : "Add Record",
                        editCaption : "Modificar registro",
                        bSubmit : "Modificar",
                        bCancel : "Cancelar",
                        bClose : "Cerrar",
                        saveData : "Data has been changed! Save changes?",
                        bYes : "Yes",
                        bNo : "No",
                        bExit : "Cancel"
                    },
                });

                /* Botones de edición */
                jQuery("#single").jqGrid('navGrid', '#psingle', {
                    del : true,
                    add : true,
                    edit : true
                });

                /* Activa la funcionalidad de las columnas fijas. Se usa en combinación con el atributo "frozen:true"
                    en la columna. */
                jQuery("#single").jqGrid('setFrozenColumns');

Answer 1

问题的原因是jqGrid的setFrozenColumns方法中的错误。如果您从 datatype : "local" 填充 jqGrid，或者在调用 setFrozenColumns 方法之前已经填充了数据，则该方法 setFrozenColumns 工作不正确。作为解决方法，您可以包含该行

jQuery("#single").triggerHandler("jqGridAfterGridComplete");

直接在 jQuery("#single").jqGrid('setFrozenColumns'); 之后。我多次描述了这个问题。发帖后here该错误已在 github 上的 jqGrid 代码中修复(请参阅修复 here )。因此，如果您要使用新版本的 jqGrid(版本高于当前的 4.5.2)，您可以稍后删除该行。