PFE 表如何防止 PF7 中冻结列调整大小

问题描述 投票:0回答:1

我一直在使用primefaces,工作表组件满足了我完成工作所需的大部分要求,做了一些研究并添加了上下文菜单和其他功能,但我的主要问题是视觉问题,如果我固定一些列,我向右移动所有行都会自动调整大小,我决定避免固定列,但无论如何,如果我将光标向右移动几列,行的高度就会调整大小。

这是我的代码:(很多西班牙语单词,因为它是我的母语)

我添加的一些自定义内容

 <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>   

这是我的桌子:

<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>

正常尺寸

右侧几列之后:

其他尺寸

面孔版本:2.1.17

编辑:Primefaces 6.2 作为 pnd primefaces 扩展 6.2.11

与下一个问题非常相似,但没有答案

Primefaces 表如何删除行调整大小功能

我尝试了一些CSS的东西,但它没有工作,很抱歉打扰你的用户,问候。

编辑:Primefaces 6.2 作为 pnd primefaces 扩展 6.2.11

jsf primefaces handsontable
1个回答
0
投票

我想发布这个问题的部分解决方案,在休息并分析sheet primeface扩展中的js代码后发现可以提供帮助的属性,在我的例子中只需要将“rowHeights”键覆盖到设置变量中。

键“rowHeights”由该扩展的 js 文件中定义的钩子“modifyRowHeight”调用,因此,如果我们能找到最适合我们值的值,则这样做可以避免“调整大小”,并保持相同所有行的高度。

var $settings = {
            rowHeights: 80, //<--- this is the value to overwrite
            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() { //Defining the sheetExtender function

           
            this.cfg.trimWhitespace = true;                
            
            $(document).ready(function () {                    
                var $hot = PF('sheetWidget1').ht;
                $hot.updateSettings($settings);
            });
            
        }

感谢您的帮助。

© www.soinside.com 2019 - 2024. All rights reserved.