通过命令按钮单击更改丰富面可扩展数据表高度
Changing rich faces extendeddatatable height from a command button Click
我是RichFaces和Facelets的新手。我正在尝试增加在我的项目中定义的ExtendedDataTable的高度。我在xhtml中有一个名为"展开"的命令按钮。当我点击"扩展"时，我希望扩展数据表的高度改变（例如从200px到700px）。这可能吗？如果是这样的话，怎么做呢？建议将不胜感激！！
我正在使用richfaces-3.3.3。
这是Facelets页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<title>RichFaces</title>
</head>
<body>
<rich:panel id="searchResultsPanel" header="Search Results Panel" bodyClass="no-padding">
<table cellpadding="0px" cellspacing="0px">
<tr>
<td colspan="2"><rich:extendedDataTable var="result" enableContextMenu="true" height="200px" width="935px" cellspacing="0" cellpadding="0" id="partsSearchResultsTable" rows="4" selectionMode="none">
<rich:column sortable="false" width="50">
<f:facet name="header">
Source
</f:facet>
<h:outputText value="TestColumn1" />
</rich:column>
<rich:column sortable="false" width="125">
<f:facet name="header">
Part Number
</f:facet>
<h:outputText value="TestColumn2" />
</rich:column>
<rich:column sortable="false" width="225">
<f:facet name="header">
Part Description
</f:facet>
<h:outputText value="TestColumn3" />
</rich:column>
<rich:column sortable="false" width="100">
<f:facet name="header">
HTS
</f:facet>
<h:outputText value="TestColumn4" />
</rich:column>
<rich:column sortable="false" width="65">
<f:facet name="header">
Priority
</f:facet>
<h:outputText value="TestColumn5" />
</rich:column>
<rich:column sortable="false" width="65" style="text-align: center;">
<f:facet name="header">
Flags
</f:facet>
<h:outputText value="TestColumn6" />
</rich:column>
<rich:column sortable="false" width="65">
<f:facet name="header">
Status
</f:facet>
<h:outputText value="TestColumn7" />
</rich:column>
<rich:column sortable="false" width="95">
<f:facet name="header">
Update Date
</f:facet>
<h:outputText value="TestColumn8" />
</rich:column>
<rich:column sortable="false" width="75">
<f:facet name="header">
User Id
</f:facet>
<h:outputText value="TestColumn9" />
</rich:column>
<rich:datascroller id="datascroller" for="partsSearchResultsTable" selectedStyle="font-weight:bold" />
</rich:extendedDataTable></td>
</tr>
<tr>
<td align="center"><h:panelGroup id="resultListButtonGroup">
<a4j:commandButton value="Remove" styleClass="button" />
<h:commandButton id="archiveOrActivateBtn" value="Archive" styleClass="button" style="margin-left: 10px; margin-right: 10px;" />
<h:commandButton id="psExportBtn" value="Export Selected" styleClass="long-btn" />
<h:commandButton id="psExportXnumBtn" value="Export 15,000" styleClass="long-btn" style="margin-left: 10px;" />
<a4j:commandButton value="Expand" styleClass="button" style="margin-left: 10px;" />
</h:panelGroup></td>
</tr>
</table>
</rich:panel>
</body>
</html>
您可以简单地将高度保存在一个变量中，然后更新它并重新提交表格。
它也可以通过JavaScript来完成，比如：
<h:outputScript>
expandTable = function (height) {
var edt = #{rich:component('table')},
div = edt.mainDiv,
body = edt.scrollingTable,
divHeight = div.getHeight() + height,
bodyHeight = body.getHeight() + height;
table.setHeight(tableHeight);
body.setHeight(bodyHeight);
}
</h:outputScript>
但这可能并不总是有效（即，数据表的某些功能可能仍然适用于旧值）。
这个facelet的Bean：
package com.richfacesstart.example;
公共类ResultListBean｛
String height;
public ResultListBean() {
super();
height = "200px";
}
public String getHeight() {
return height;
}
public void setHeight(String height) {
this.height = height;
}
public void changeHeight() {
setHeight("700px");
}
}
改进的Facelet：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<title>RichFaces</title>
</head>
<body>
<rich:panel id="searchResultsPanel" header="Search Results Panel"
bodyClass="no-padding">
<table cellpadding="0px" cellspacing="0px">
<tr>
<td colspan="2"><rich:extendedDataTable var="result"
enableContextMenu="true" height="#{ResultListBean.height}"
width="935px" cellspacing="0" cellpadding="0"
id="partsSearchResultsTable" rows="4" selectionMode="none">
<rich:column sortable="false" width="50">
<f:facet name="header">
Source
</f:facet>
<h:outputText value="TestColumn1" />
</rich:column>
<rich:column sortable="false" width="125">
<f:facet name="header">
Part Number
</f:facet>
<h:outputText value="TestColumn2" />
</rich:column>
<rich:column sortable="false" width="225">
<f:facet name="header">
Part Description
</f:facet>
<h:outputText value="TestColumn3" />
</rich:column>
<rich:column sortable="false" width="100">
<f:facet name="header">
HTS
</f:facet>
<h:outputText value="TestColumn4" />
</rich:column>
<rich:column sortable="false" width="65">
<f:facet name="header">
Priority
</f:facet>
<h:outputText value="TestColumn5" />
</rich:column>
<rich:column sortable="false" width="65"
style="text-align: center;">
<f:facet name="header">
Flags
</f:facet>
<h:outputText value="TestColumn6" />
</rich:column>
<rich:column sortable="false" width="65">
<f:facet name="header">
Status
</f:facet>
<h:outputText value="TestColumn7" />
</rich:column>
<rich:column sortable="false" width="95">
<f:facet name="header">
Update Date
</f:facet>
<h:outputText value="TestColumn8" />
</rich:column>
<rich:column sortable="false" width="75">
<f:facet name="header">
User Id
</f:facet>
<h:outputText value="TestColumn9" />
</rich:column>
<rich:datascroller id="datascroller" for="partsSearchResultsTable"
selectedStyle="font-weight:bold" />
</rich:extendedDataTable></td>
</tr>
<tr>
<td align="center"><h:panelGroup id="resultListButtonGroup">
<a4j:commandButton value="Remove" styleClass="button" />
<h:commandButton id="archiveOrActivateBtn" value="Archive"
styleClass="button"
style="margin-left: 10px; margin-right: 10px;" />
<h:commandButton id="psExportBtn" value="Export Selected"
styleClass="long-btn" />
<h:commandButton id="psExportXnumBtn" value="Export 15,000"
styleClass="long-btn" style="margin-left: 10px;" />
<a4j:commandButton value="Expand" styleClass="button"
style="margin-left: 10px;"
action="#{ResultListBean.changeHeight}"
reRender="partsSearchResultsTable" />
</h:panelGroup></td>
</tr>
</table>
</rich:panel>
</body>
</html>
我的脸-config.xml：
<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
<managed-bean>
<managed-bean-name>ResultListBean</managed-bean-name>
<managed-bean-class>com.richfacesstart.example.ResultListBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>
@Makhiel。。非常感谢你的建议！！我试图调试是什么导致了我上面提到的A4J脚本相关的错误。。。原来是因为扩展数据表的重新渲染失败。经过一番搜索，得到了这样的答案：在jsf-中，Datatable没有使用ajax调用进行渲染
它也有类似的问题。我把Rich Panel和组件放在一个盒子里！！成功了！！
非常感谢你的建议。。它真的帮助我了解了这些丰富的面孔和小脸蛋！！
相关文章：
- 如何根据某些条件向可编辑的jquery数据表添加或删除按钮
- 谷歌可视化数据表间歇性问题
- 如何为表构建可扩展的子行(jQuery/Javascript）
- 以编程方式透视谷歌可视化数据表
- 扩展详细信息Jquery数据表的持久性
- 对象文字数据表中的 Google 可视化样式角色
- AJAX使用jQuery可排序(非表单）发布附加数据
- 如何在两个不同的选项卡(jQuery数据表）上同步处理可排序表
- 通过命令按钮单击更改丰富面可扩展数据表高度
- 如何在 android 中的可扩展列表视图组和子项中加载 json 数据
- 数据表 b可排序列定义问题
- 反应路由器:使用 <链接> 作为可点击的数据表行
- 数据表可编辑插件在数据表中动态添加行后不起作用
- 谷歌可视化数据表过滤器行
- 如何在jsf中鼠标悬停时高亮显示扩展数据表的行
- 在引导中可扩展的表行
- jQuery可扩展的表行
- jQuery数据表-带有子表或可扩展行的表
- 如何建立可折叠/可扩展的表行像news.google.com
- 扩展数据表”;fnInitComplete”;
