jQuery 操作仅一次（JSF，Primefaces）答案

【问题标题】：jQuery manipulation only once (JSF, Primefaces)jQuery 操作仅一次（JSF，Primefaces）
【发布时间】：2012-05-17 23:04:05
【问题描述】：

我有一个要修改字体大小的 DataTable。用户可以使用 selectOneMenue 组件设置字体大小。

现在如果我用 jQuery 更新它，这只会在第一次发生。如果我想通过 selectOneMenue 更改字体大小，则字体大小设置为默认值，如果我进行刷新 (F5)，则字体大小将成功更改。但我不想要这种行为。

所以我在脚本部分添加了 reload() 函数。如果我这样做，如果我想重新加载，我总是会收到这条 Firefox 消息.....然后它会以默认大小呈现表格，并在呈现正确的字体大小后不久。所以最终产品没问题，但我不希望出现这个必须提交的 firefox 消息，我还想关闭使用默认字体大小的表格的预渲染。

现在我有了这个代码

<script>
        jQuery(document)
                .ready(
                        function() {
                            jQuery('#dtSummary')
                                    .css('cssText',
                                            'font-size:#{summaryBean.selectedFont}px !important');

                        });

        function changeFont() {
            document.getElementById("dtSummary").style.fontSize = "#{summaryBean.selectedFont}px !important;}";
            window.location.reload(true);
        }
    </script>


<h:form id="form" prependId="false">
        <h:panelGroup>
            <h:panelGrid columns="3" styleClass="rainstar-form-inline"
                columnClasses="rainstar-form-column-left rainstar-form-column-right">


                <p:selectOneMenu id="targ" effect="fade"
                    styleClass="rainstar-input-small2"
                    value="#{summaryBean.selectedFont}"
                    valueChangeListener="#{summaryBean.selectionFont_change}"
                    onchange="changeFont()">
                    <f:selectItems value="#{summaryBean.fontCollection}" />
                    <p:ajax update="dtSummary" />
                </p:selectOneMenu>
            </h:panelGrid>
            <p:commandButton value="#{msg.button_print}" icon="ui-icon-print"
                styleClass="rainstar-button-right"
                action="#{summaryBean.generatePdf()}" ajax="false" />


            <p:dataTable id="dtSummary" styleClass="rainstar-form-margin-top"
                value="#{summaryBean.eintragList}"
                selection="#{summaryBean.selectedEintrag}" selectionMode="multiple"
                var="eintrag" rowKey="#{eintrag.it1}">

                <p:column id="header" styleClass="ui-state-default">
                    <div class="ui-dt-c">#{eintrag.it1}</div>
                </p:column>

                <p:column styleClass="rainstar-table-item"
                    headerText="#{tableBundleBean.summary_table_nozzles} [mm]">
                    <h:outputText value="#{eintrag.it2}" />
                </p:column>

            </p:dataTable>

        </h:panelGroup>


    </h:form>

【问题讨论】：

标签： jquery jsf primefaces

【解决方案1】：

这里你真的不需要 jquery。试试：

<p:column styleClass="rainstar-table-item"
          headerText="#{tableBundleBean.summary_table_nozzles} [mm]">
   <h:outputText value="#{eintrag.it2}" style="font-size:#{summaryBean.selectedFont}px !important"/>
</p:column>

如果您出于性能原因想要避免服务器往返和渲染，那么 Jquery 将是有意义的。在这种情况下，selectMenu 小部件不应导致页面刷新。

【讨论】：

Maaannnn ^^ 谢谢！！我不知道为什么我认为如此复杂......但我稍微改变了你的解决方案。我不在列级别使用样式属性。我在桌子上用过。所以我只需要写一次。

【解决方案2】：

我不太确定会为您的选择框生成哪个 ID，但假设它会获得 id 'targ'，如下所示应该可以：

$(document).ready(
  changeFontSize
)

function changeFontSize() {
  $('#dtSummary').css('fontSize', $('.targ').val() + 'px !important');
}

【讨论】：