丰富的扩展数据表列宽
Posted
技术标签:
【中文标题】丰富的扩展数据表列宽【英文标题】：Rich Extended DataTable column widths 【发布时间】：2010-12-14 09:10:18 【问题描述】：我对 RichFaces 扩展数据表有疑问
如果列多于 20，则列会被压缩，而不是水平滚动条。
我尝试以 %, px 为单位给出列宽。但没有用。
有谁熟悉这个？
<rich:column label="Select" sortable="false" >
<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>
【问题讨论】：
<rich:extendedDataTable> 确实不能很好地处理水平滚动。事实上，开发人员似乎着手让水平滚动几乎不可能。
您可以在启用水平滚动的情况下将<rich:extendedDataTable> 放入<div>，但如果您留在那里，它将不起作用。 <rich:extendedDataTable> (div.extdt-innerdiv) 中嵌套的 <div>s 之一是绝对定位的，将其从文档流中移除。
作为参考，这是<rich:extendedDataTable>的基本输出结构，假设三个<rich:column>元素，宽度为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 />
<col />
<col />
</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 />
<col />
<col />
</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>
您可以将水平滚动添加到 div.extdt-innerdiv，但 <rich:extendedDataTable> 的列自动调整大小功能 (ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios()) 基本上会被此混淆，调整从组件的 maxWidth 开始的所有列的大小（源自div.extdt-maindiv) 的初始宽度为 20px 宽。
我试过了……
用<div> 元素包装<rich:extendedDataTable> 并设置以下内容：
position: relative;
width: 100%;
overflow-x: auto;
所需的高度，否则由于下一个要点，您只会看到滚动条。
使div.extdt-maindiv绝对定位
同时提供 div.extdt-outerdiv 和 div.extdt-innerdiv 静态定位和自动宽度
...但这似乎没有任何效果。
我认为这可能是因为我在 Firebug 中进行了大部分更改，而mainDiv.getWidth()（来自calculateWidthsFromRatios()）正在检索缓存值mainDiv.element.boxWidth。该值在ClientUI.common.box.Box.setWidth() (common-scrollable-data-table.js) 中设置，并且只调用一次；如果我调整浏览器窗口的大小（在我的情况下，<rich:extendedDataTable> 的宽度为 100%），它不会再次被调用。
我将尝试在我的 CSS 文件中进行这些更改，看看是否一切都可以神奇地工作。不过，<rich:extendedDataTable> 的 JavaScript 相当复杂，而且没有记录在案，所以我可能在某处遗漏了一些东西。我会跟进我的结果。
编辑：在我的 CSS 中进行更改后，我仍然遇到了列缩短问题。
因此，为了避免创建包装 div，我向 div.extdt-innerdiv 添加了水平滚动：
.extdt-innerdiv overflow-y: hidden; overflow-x: auto !important;
然后，在<rich:extendedDataTable> 的页脚，我禁用了calculateWidthsFromRatios() 功能：
<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>
我使用表格的页脚来强制每次重新渲染组件时执行此 JavaScript。
即使使用此解决方案，用户也无法手动扩展列的宽度，因为 extended-data-table.js 中的 JavaScript 会阻止将列的大小调整为比 mainDiv.element.boxWidth 更宽。为了能够像这样调整大小，不妨向 JBoss 提交一个补丁来修复 <rich:extendedDataTable>，因为目前没有计划在 RichFaces 3.X 中修改其行为（根据 JBoss 社区 JIRA 中的 #RF-4871 )。
祝你好运。
【讨论】：
【参考方案2】：您应该指定不带“px”或“%”的宽度，例如
<rich:column label="Select" sortable="false" >
扩展数据表具有水平滚动的issues，但您可以指定一个固定的表格宽度（以像素为单位）并将表格放在一个div中，并将overflow-x设置为滚动。
【讨论】：
我给了我综合了各种想法，得出以下结论：
如前所述，有一些问题需要解决。一个是超过 100% 表格宽度的可滚动性，第二个是滚动条本身。所以我会有一些 js 文件来解决调整大小问题和一些 css 来添加滚动条......
page.xhtml - 你的页面里面有一些extended-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>
ExtendedDatatableFix.css - 不是那么准确，但是嘿 - 有改进的余地
.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;
ExtendedDataTableHeaderFixScrollable.js - 从这里复制： http://community.jboss.org/thread/146108
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);
*
*/
;
【讨论】：
【参考方案4】：要启用水平滚动条，请参阅此处的解决方法https://jira.jboss.org/jira/browse/RF-4871。
要在显示水平滚动条时调整列的大小，请参阅http://community.jboss.org/message/518878#518878。
【讨论】：
【参考方案5】：根据这里的例子：
RichFaces Showcase
宽度是这样使用的（查看xhtml的来源）：
<rich:column filter="#carsFilteringBean.mileageFilterImpl"
对我来说它没有问题。
您好。
【讨论】：
以上是关于丰富的扩展数据表列宽的主要内容，如果未能解决你的问题，请参考以下文章