Jsf 丰富的扩展数据表列宽
我对RichFaces扩展数据表有异议 如果列数超过20,则不会显示水平滚动条,而是压缩列数 我试着用%px表示列宽,但没有用 有人熟悉这个吗Jsf 丰富的扩展数据表列宽,jsf,richfaces,Jsf,Richfaces,我对RichFaces扩展数据表有异议 如果列数超过20,则不会显示水平滚动条,而是压缩列数 我试着用%px表示列宽,但没有用 有人熟悉这个吗 <rich:column label="Select" sortable="false" width="10%"> <f:facet name="header"> <h:selectBooleanCheckbox id="chk" align="center" value="#{bean.selec
<rich:column label="Select" sortable="false" width="10%">
<f:facet name="header">
<h:selectBooleanCheckbox id="chk" align="center"
value="#{bean.selectAll}" onclick="selectAll();"/>
</f:facet>
<input id="part_#{rowKey}" type="checkbox"
name="selectedParts" value="#{listVar.id}" />
</rich:column>
您应该指定不带“px”或“%”的宽度,例如
Extended Datatable具有水平滚动功能,但您可以指定固定的表格宽度(以像素为单位),然后将表格放入一个div中,并将overflow-x设置为滚动。
确实不能很好地处理水平滚动。事实上,开发人员似乎打算让水平滚动变得几乎不可能
您可以在启用水平滚动的情况下将
放入
中,但如果您将其保持在该状态,它将无法工作。
(div.extdt-innerdiv
)中的一个嵌套的
被绝对定位,将其从文档流中删除
作为参考,这是
的基本输出结构,假设有三个宽度为100px的
元素和两条记录:
<div id="form_id:edt_id" class="extdt-maindiv rich-extdt-maindiv">
<div id="form_id:edt_id:od" class="extdt-outerdiv">
<div id="form_id:edt_id:innerd" class="extdt-innerdiv">
<table id="form_id:edt_id:tu" class="extdt-table-layout">
<colgroup id="form_id:edt_id:colgroup:header">
<col width="100" />
<col width="100" />
<col width="100" />
</colgroup>
<thead id="form_id:edt_id:header" class="extdt-thead">
<tr class="extdt-subheader rich-extdt-subheader">
<th id="form_id:edt_id:column_1_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 1</th>
<th id="form_id:edt_id:column_2_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 2</th>
<th id="form_id:edt_id:column_3_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 3</th>
</tr>
<tr class="extdt-table-filterrow rich-extdt-subheader"> <!-- only if filtering is enabled -->
<th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
<th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
<th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">
<div id="form_id:edt_id:sd" class="extdt-content">
<table id="form_id:edt_id:n" class="extdt-table-layout">
<colgroup id="form_id:edt_id:colgroup:body">
<col width="100" />
<col width="100" />
<col width="100" />
</colgroup>
<tbody id="form_id:edt_id:tb">
<tr id="form_id:edt_id:n:0" class="extdt-firstrow rich-extdt-firstrow">
<td id="form_id:edt_id:0:column_1_id" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">Column 1, Row 1</div>
</td>
<td id="form_id:edt_id:0:column_2_id" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">Column 2, Row 1</div>
</td>
<td id="form_id:edt_id:0:column_3_id" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">Column 3, Row 1</div>
</td>
</tr>
<tr id="form_id:edt_id:n:1" class="extdt-firstrow rich-extdt-firstrow">
<td id="form_id:edt_id:1:column_1_id" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">Column 1, Row 2</div>
</td>
<td id="form_id:edt_id:1:column_2_id" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">Column 2, Row 2</div>
</td>
<td id="form_id:edt_id:1:column_3_id" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">Column 3, Row 2</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
<tfoot id="form_id:edt_id:footer">
<tr class="extdt-footer rich-extdt-footer">
<td class="extdt-footercell rich-extdt-footercell" scope="colgroup" colspan="3">
<!-- table footer goes here if defined -->
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div id="form_id:edt_id:column_1_idmenu">
<script type="text/javascript">
// context menu script snipped for example purposes
</script>
</div>
<div id="form_id:edt_id:column_2_idmenu">
<script type="text/javascript">
// context menu script snipped for example purposes
</script>
</div>
<div id="form_id:edt_id:column_3_idmenu">
<script type="text/javascript">
// context menu script snipped for example purposes
</script>
</div>
</div>
然后,在
的页脚中,我禁用了CalculateWidthFromRatios()
函数:
<rich:extendedDataTable id="edtId">
<!-- rest of extended data table -->
<f:facet name="footer">
<script type="text/javascript">
jQuery(function() {
// Disable ratio-based column resizing.
ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios = function() {};
});
</script>
</f:facet>
</rich:extendedDataTable>
jQuery(函数(){
//禁用基于比率的列大小调整。
ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios=函数(){};
});
我使用表的页脚,以便在每次重新加载组件时强制执行此JavaScript
即使使用此解决方案,用户也无法手动扩展列的宽度,因为extended-data-table.js中的JavaScript阻止列的大小调整为大于mainDiv.element.boxWidth
。为了实现这样的大小调整,我们不妨向JBoss提交一个补丁来修复
,因为目前没有计划修改RichFaces 3.X中的行为(根据JBoss社区JIRA)
祝你好运。要启用水平滚动条,请参阅此处的解决方法
要在显示水平滚动条时调整列的大小,请参见此图。我综合了各种想法,得出以下结论: 正如前面提到的,有很多事情需要解决。一个是超过表格宽度100%的可滚动性,第二个是滚动条本身。因此,我将有一些js文件来修复大小调整问题,并有一些css来添加滚动条 xhtml-您的页面中包含一些扩展dt
<head>
<a4j:loadStyle
src="resource:///org/company/project/css/ExtendedDatatableFix.css"
media="screen" />
<a4j:loadScript
src="resource:///org/company/project/js/ExtendedDataTableHeaderFixScrollable.js" />
</head>
<body>
<!-- prevent IE to come up with ExtendedDataTable-bla not defined-js-error -->
<rich:extendedDataTable id="dummy_table_for_extended_datatable_fix" rendered="false">
</rich:extendedDataTable>
<rich:extendedDataTable id="here_goes_your_datatable">
<!-- your ext-dt -->
</rich:extendedDataTable>
</body>
ExtendedDataTableHeaderFixScrollable.js-从此处复制:
ExtendedDataTable.DataTable.header.prototype.OnSepMouseMove=函数(事件){
if(this.dragColumnInfo&&this.dragColumnInfo.mouseDown){
如果(!this.dragColumnInfo.dragStarted){
this.dragColumnInfo.dragStarted=true;
this.\u showSplitter(this.dragColumnInfo.srcement.columnIndex);
}
var delta=Event.pointerX(事件)-
this.dragColumnInfo.startX
if(δthis.maxDelta){
delta=this.maxDelta;
}*/
var x=this.dragColumnInfo.originalX+delta;
var finalX=x—this.minColumnWidth—6//6代表sep跨度宽度;
这个.columnspilter.moveToX(finalX);
事件。停止(事件);
}
}
ExtendedDataTable.DataTable.header.prototype.OnSepMouseUp=函数(事件){
事件。停止(事件);
停止观察(文档'mousemove',this.eventSepMouseMove);
事件停止观察(文档'mouseup',this.eventSepMouseUp);
if(this.dragColumnInfo&&this.dragColumnInfo.dragStarted){
this.dragColumnInfo.dragStarted=false;
this.dragColumnInfo.mouseDown=false;
var delta=Event.pointerX(事件)-
this.dragColumnInfo.startX;
if(δthis.maxDelta){
delta=this.maxDelta;
}*/
var columnIndex=this.dragColumnInfo.srcement.columnIndex;
var newWidth=this.getColumnWidth(columnIndex)+delta;
this.extDt.setColumnWidth(columnIndex,newWidth);
此.setColumnWidth(columnIndex,newWidth);
this.extDt.updateLayout();
if(this.extDt.onColumnResize){
//将该值正确设置为this.columnWidths
this.extDt.columnWidths=“”;
对于(i=0;i最大宽度){
*c[c.length-2].width-=(totalWidth-maxWidth);
* }
*/
};
根据本例:
宽度是这样使用的(检查xhtml的源代码):
FYI:how to post code:i give的宽度超过了您查看正在生成的HTML所需的宽度。发布一个精简版本(即没有所有javascript)作为对原始问题的编辑。哦,您是否将表状态存储在任何位置?extendedDataTable的一个很好的功能是,它可以保留列宽etc+1@abishek。如果您不指定单位,宽度值将被忽略。为宽度添加px。
<rich:extendedDataTable id="edtId">
<!-- rest of extended data table -->
<f:facet name="footer">
<script type="text/javascript">
jQuery(function() {
// Disable ratio-based column resizing.
ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios = function() {};
});
</script>
</f:facet>
</rich:extendedDataTable>
<head>
<a4j:loadStyle
src="resource:///org/company/project/css/ExtendedDatatableFix.css"
media="screen" />
<a4j:loadScript
src="resource:///org/company/project/js/ExtendedDataTableHeaderFixScrollable.js" />
</head>
<body>
<!-- prevent IE to come up with ExtendedDataTable-bla not defined-js-error -->
<rich:extendedDataTable id="dummy_table_for_extended_datatable_fix" rendered="false">
</rich:extendedDataTable>
<rich:extendedDataTable id="here_goes_your_datatable">
<!-- your ext-dt -->
</rich:extendedDataTable>
</body>
.extdt-maindiv {
margin-bottom: 17px;
}
.extdt-outerdiv {
overflow-x:auto !important;
overflow-y:hidden;
height: 108% !important;
}
.extdt-innerdiv {
height: 100% !important;
}
.extdt-content{
overflow-x:hidden;
overflow-y:scroll;
}
ExtendedDataTable.DataTable.header.prototype.OnSepMouseMove = function(event) {
if(this.dragColumnInfo && this.dragColumnInfo.mouseDown) {
if(!this.dragColumnInfo.dragStarted) {
this.dragColumnInfo.dragStarted = true;
this._showSplitter(this.dragColumnInfo.srcElement.columnIndex);
}
var delta = Event.pointerX(event) -
this.dragColumnInfo.startX
if (delta < this.minDelta) {
delta = this.minDelta;
}
/*if (delta > this.maxDelta) {
delta = this.maxDelta;
}*/
var x = this.dragColumnInfo.originalX + delta;
var finalX = x - this.minColumnWidth - 6 //6 stands for sep span width;
this.columnSplitter.moveToX(finalX);
Event.stop(event);
}
}
ExtendedDataTable.DataTable.header.prototype.OnSepMouseUp = function(event) {
Event.stop(event);
Event.stopObserving(document, 'mousemove', this.eventSepMouseMove);
Event.stopObserving(document, 'mouseup', this.eventSepMouseUp);
if(this.dragColumnInfo && this.dragColumnInfo.dragStarted) {
this.dragColumnInfo.dragStarted = false;
this.dragColumnInfo.mouseDown = false;
var delta = Event.pointerX(event) -
this.dragColumnInfo.startX;
if (delta < this.minDelta) {
delta = this.minDelta;
}
/*if (delta > this.maxDelta) {
delta = this.maxDelta;
}*/
var columnIndex = this.dragColumnInfo.srcElement.columnIndex;
var newWidth = this.getColumnWidth(columnIndex) + delta;
this.extDt.setColumnWidth(columnIndex, newWidth);
this.setColumnWidth(columnIndex,newWidth);
this.extDt.updateLayout();
if (this.extDt.onColumnResize){
//set properly value to this.columnWidths
this.extDt.columnWidths = "";
for (i=0; i<this.columnsNumber; i++){
this.extDt.columnWidths += "" + this.getColumnWidth(i) + ";";
}//for
this.extDt.onColumnResize(event, this.extDt.columnWidths);
}
}
this._hideSplitter();
}
ExtendedDataTable.DataTable.prototype.calculateWidthsFromRatios = function() {
LOG.debug('firing calculateWidthsFromRatios');
var c = this.getColumns();
var scrollbarWidth = this.getScrollbarWidth();
this._scrollbarWidth = scrollbarWidth;
LOG.debug('Scrollbar: ' + scrollbarWidth);
var mainDivWidth = this.mainDiv.getWidth();
LOG.debug('Main DIV: ' + mainDivWidth);
var maxWidth = mainDivWidth - scrollbarWidth;
LOG.debug('Width to spread: ' + maxWidth);
var totalWidth = 0;
for (i = 0; i < c.length - 1; i++) {
LOG.debug('Column[' + i + '] ratio: ' + this.ratios[i]);
var w = Math.round(this.ratios[i] * maxWidth);
if (w < parseInt(this.minColumnWidth)) {
w = parseInt(this.minColumnWidth);
}
LOG.debug('setting column ' + i + ' to width: ' + w);
this.setColumnWidth(i, w);
this.header.setColumnWidth(i, w);
totalWidth += w;
}
/*
* if (totalWidth > maxWidth) {
* c[c.length - 2].width -= (totalWidth - maxWidth);
* }
*/
};
<rich:column filter="#{carsFilteringBean.mileageFilterImpl}" width="150px"