从命令按钮单击更改富表面扩展可调整高度

时间：2013-11-18 19:46:38

标签： javascript css jsf richfaces facelets

我是RichFaces和Facelets的新手。我试图增加我的项目中定义的ExtendedDataTable的高度。我在xhtml中有一个名为“Expand”的命令按钮。当我点击“展开”时，我希望扩展数据表的高度发生变化（例如从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>

3 个答案:

答案 0 :(得分：0)

您可以简单地将高度保留在变量中，然后更新它并重新渲染表格。

它也可以通过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>

但这可能并不总是有效（即数据的某些功能仍然可以使用旧值）。

答案 1 :(得分：0)

这张小脸的豆子：

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>

我的faces-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>

答案 2 :(得分：0)

@Makhiel ..非常感谢您的建议!!我试图调试导致上面陈述的A4J脚本相关错误的原因......结果是因为扩展数据表重新呈现失败了。搜索了一下后，我发现了这个答案：Datatable not rendering with ajax call in jsf

有类似的问题。我将Rich Panel和组件包含在a和bam中！它工作!!

非常感谢您的建议..这真的帮助我理解了一些丰富的面孔和面孔!!

相关问题
最新问题