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
相关产品推荐
相关产品推荐

