我一直在使用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
与下一个问题非常相似,但没有答案
我尝试了一些CSS的东西,但它没有工作,很抱歉打扰你的用户,问候。
编辑:Primefaces 6.2 作为 pnd primefaces 扩展 6.2.11
我想发布这个问题的部分解决方案,在休息并分析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);
});
}
感谢您的帮助。