0

フォント サイズを変更したい 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>
4

2 に答える 2

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 ウィジェットによってページが更新されないようにする必要があります。

于 2012-05-09T12:35:53.550 に答える
0

選択ボックスに対してどの ID が生成されるかはよくわかりませんが、id 'targ' が取得されると仮定すると、次のように動作するはずです。

$(document).ready(
  changeFontSize
)

function changeFontSize() {
  $('#dtSummary').css('fontSize', $('.targ').val() + 'px !important');
}
于 2012-05-09T12:46:47.310 に答える