Javascript 从命令按钮更改rich faces extendeddatatable高度单击_Javascript_Css_Jsf_Richfaces_Facelets

Javascript 从命令按钮更改rich faces extendeddatatable高度单击

javascript css jsf

Javascript 从命令按钮更改rich faces extendeddatatable高度单击,javascript,css,jsf,richfaces,facelets,Javascript,Css,Jsf,Richfaces,Facelets,我不熟悉RichFaces和Facelets。我试图增加项目中定义的ExtendedDataTable的高度。我在xhtml中有一个名为“展开”的命令按钮。当我点击“扩展”时，我希望扩展数据表的高度改变（例如从200px到700px）。这可能吗？如果是这样，怎么做？建议将不胜感激我使用的是richfaces-3.3.3 以下是Facelets页面代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

我不熟悉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>


富人
来源
零件号
零件说明
高温超导
优先
旗帜
地位
更新日期
用户Id

您只需将高度保留在变量中，然后进行更新并重新输入表格即可

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


expandTable=功能（高度）{
var edt=#{rich:component（'table'）}，
div=edt.mainDiv，
body=edt.scrollingTable，
divHeight=div.getHeight（）+高度，
bodyHeight=body.getHeight（）+高度；
表.设置高度（表高）；
车身。设置高度（车身高度）；
}

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

此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>


富人
来源
零件号
零件说明
高温超导
优先
旗帜
地位
更新日期
用户Id

My 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>


com.sun.facelets.FaceletViewHandler
结果菜豆
com.richfacesstart.example.ResultListBean
一场

@Makhiel。。非常感谢你的建议！！我试图调试是什么导致了上面提到的A4J脚本相关错误。。。原来是因为扩展数据表重新呈现失败。在搜索了一下之后，我找到了这个答案：

也有类似的问题。我将Rich面板和组件封装在一个和bam中！！成功了

非常感谢你的建议。。它真的帮助我了解了一点这些丰富的面孔和面容

Makhiel，h:outputScript应该定义为外部Java脚本吗？另外，您能否指导我如何定义高度变量并重新输入extendeddatatable？您可以将

outputScript

放在页面上，或将其内容放在外部文件中，这无关紧要。变量将在bean中定义，然后您只需像其他变量一样访问它，即

height=“#{bean.tableHeight}”

。让

a4j:commandButton

更改值（

action=“#{bean.changeHeight（）}”

），然后使用

reRender=“partsSearchResultsTable”

更新表。我尝试通过在bean中指定高度并使用方法进行更改来实现这一点。但我一直收到以下错误：Message:Object required行：201 Char:440 Code:0 URI:。不确定这是否与我的语法有关，或者我是否犯了任何明显的错误。有什么建议吗？我可以在下面的回答部分发布bean和修改的小面。如果你刚刚开始使用JSF和Ri饰相，你应该考虑使用较新的版本，RF 3是相当过时的。