冻结列中的jqGrid错误

时间:2013-09-26 10:39:05

标签: jquery css jqgrid

我有第一列冻结的网格。当我移动水平滚动时,网格标题中的此列被冻结,但在网格的主体中,所有列都可以水平移动,第一列不会被冻结。我已经完成了我的代码一百次而且很好。我的项目中没有任何其他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');

1 个答案:

答案 0 :(得分:0)

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

jQuery("#single").triggerHandler("jqGridAfterGridComplete");
jQuery("#single").jqGrid('setFrozenColumns');后直接

。我多次描述这个问题。在帖子here之后,错误在github上的jqGrid代码中得到修复(请参阅修复here)。因此,如果您使用新版本的jqGrid(版本高于当前版本4.5.2),您可以稍后删除该行。