You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Primefaces Sheet冻结列/横向滚动时行高自动调整问题求助

PrimeFaces Sheet组件横向滚动后行高异常问题求助

我使用PrimeFaces进行开发,Sheet组件基本满足业务需求,已添加右键菜单等功能,但遇到视觉问题:设置冻结列后向右滚动时所有行高度自动调整;取消冻结列后,横向滚动几列仍会出现行高变化。

以下是我的代码(部分内容为西班牙语):

自定义扩展代码

<ui:define name="head">

    <script type="text/javascript">

        var $settings = {
            contextMenu: {
                callback: function (key, options) {
                    if (key === 'borrar') {
                        eliminar();
                    } else if (key === 'editar') {
                        setTimeout(function () {
                            verDetalleProducto();
                        }, 100);
                    }
                },
                items: {
                    "borrar": {name: 'Eliminar linea'},
                    "editar": {name: 'Ver Detalles Adicionales'}
                }
            }
        };

        function sheetExtender() {
            // this = widget
            // this.cfg = JSON configuration
            this.cfg.trimWhitespace = true;

            $(document).ready(function () {
                var $hot = PF('sheetWidget1').ht;
                console.log($hot);
                $hot.updateSettings($settings);
            });
        };

        function sheetExtender2() {
            // this = widget
            // this.cfg = JSON configuration
            this.cfg.trimWhitespace = true;

            $(document).ready(function () {
                var $hot2 = PF('sheetWidget2').ht;
                console.log($hot2);
                $hot2.updateSettings($settings);
            });
        };
    </script>

</ui:define>

Sheet组件代码

<pe:sheet id="sheet1" 
          widgetVar="sheetWidget1" 
          value="#{sheetController.productosExcel}" 
          var="row"    

          rowKey="#{row}"
          showRowHeaders="true"
          resizableCols="true"                                                    
          resizableRows="false"
          readOnly="false"                                                 
          height="#{(sheetController.productosExcel.size() le 5) ?  (75 + sheetController.productosExcel.size() *50) : 75 + 5 * 50}"
          rowStyleClass="#{ row.cantidad gt 0 and row.precioUnitario gt 0 ? 'correcto' : 'incorrecto'  }"                                               
          extender="sheetExtender"                               
          >

    <f:facet name="header">
        <h:outputText style="color: white;" value="Productos Agregados"/>
    </f:facet>

    <p:ajax event="change" update="tabs:sheet1 :form:growl" listener="#{sheetController.cellChangeEvent}"/>
    <p:ajax event="rowSelect" update=":form:growl" listener="#{sheetController.rowSelectEvent}"/>
    <p:ajax event="cellSelect" update=":form:growl" listener="#{sheetController.rowSelectEvent}"/>

    <pe:sheetcolumn headerText="Código Insumo"
                    readOnly="true"          
                    colType="numeric"
                    value="#{row.idProducto}"                                                            
                    colWidth="100"
                    numericPattern="00000000"
                    >
    </pe:sheetcolumn>

    <pe:sheetcolumn headerText="Renglón"                                                
                    readOnly="true"          
                    colType="numeric"                                                
                    value="#{row.idRenglon}"                                                                                                                                                                 
                    colWidth="80">
    </pe:sheetcolumn>

    <pe:sheetcolumn headerText="Insumo"                                                
                    readOnly="true"          
                    colType="text"                                                
                    value="#{row.nombre}"                                                                                                                                                               
                    colWidth="80">
    </pe:sheetcolumn>

    <pe:sheetcolumn headerText="Presentacion"                                                
                    readOnly="true"          
                    colType="text"                                                
                    value="#{row.presentacion}"                                                                                                                                                               
                    colWidth="120">
    </pe:sheetcolumn>                                         

    <pe:sheetcolumn headerText="Comentario"
                    readOnly="false"
                    colType="text"
                    value="#{row.comentario}"                                               
                    colWidth="250"/>                                       

    <pe:sheetcolumn headerText="Cantidad Enero"
                    readOnly="false"                                                                
                    colType="numeric"
                    value="#{row.enero}"    
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Cantidad Febrero"
                    readOnly="false"          
                    colType="numeric"
                    value="#{row.febrero}"    
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Cantidad Marzo"
                    readOnly="false"          
                    colType="numeric"
                    value="#{row.marzo}"    
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Cantidad Abril"
                    readOnly="false"          
                    colType="numeric"
                    value="#{row.abril}"    
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Cantidad Mayo"
                    readOnly="false"          
                    colType="numeric"
                    value="#{row.mayo}"    
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Cantidad Junio"
                    readOnly="false"          
                    colType="numeric"
                    value="#{row.junio}"    
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Cantidad Julio"
                    readOnly="false"          
                    colType="numeric"
                    value="#{row.julio}"    
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Cantidad Agosto"
                    readOnly="false"          
                    colType="numeric"
                    value="#{row.agosto}"    
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Cantidad Septiembre"
                    readOnly="false"          
                    colType="numeric"
                    value="#{row.septiembre}"    
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Cantidad Octubre"
                    readOnly="false"          
                    colType="numeric"
                    value="#{row.octubre}"    
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Cantidad Noviembre"
                    readOnly="false"          
                    colType="numeric"
                    value="#{row.noviembre}"    
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Cantidad Diciembre"
                    readOnly="false"          
                    colType="numeric"
                    value="#{row.diciembre}"    
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Cantidad Anual"
                    readOnly="true"
                    colType="numeric"
                    numericPattern="0.00"
                    value="#{row.cantidad}"                                               
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Costo Unitario"
                    readOnly="false"
                    colType="numeric"
                    numericPattern="0,0.00"
                    value="#{row.precioUnitario}"                                               
                    colWidth="150"/>

    <pe:sheetcolumn headerText="Total"
                    readOnly="true"
                    colType="numeric"
                    numericLocale="es-GT"
                    numericPattern="0,0.00"
                    value="#{row.precioUnitario * row.cantidad}"                                               
                    colWidth="150"/>

</pe:sheet>

状态截图

  • 正常状态:正常状态
  • 横向滚动后:横向滚动后

使用版本

  • JSF 2.1.17
  • PrimeFaces 6.2
  • PrimeFaces Extension 6.2.11

该问题与StackOverflow上某无答复问题类似,尝试过CSS调整但无效,特此求助。

内容的提问来源于stack exchange,提问作者Paublo Martínez Gómez

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.21 20:27:03