1

私の JSF 2.1 プロジェクトでは、ヘッダーに問題があるテーブルを使用しています。ヘッダーとデータの両方に 1 つのテーブルを使用すると、ヘッダーがデータと共にスクロールします。

ヘッダーとデータに別のテーブルを使用すると、配置の問題が発生します。

ヘッダーとデータに単一のテーブルを使用してヘッダーをフリーズするタグまたは可能な方法はありますか?

4

1 に答える 1

3

HTML については、これに対する適切な答えがあります:ヘッダーが固定された HTML テーブル? . JSF がプレーンな HTML を生成することを覚えておく必要があります。その回答のコードを適応させると、このソリューションが付属します（注：FaceletsのJavaScriptで「<」と「>」を使用するには、CDATA検証を追加する必要があります）：

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"> 
    <h:head>
        <title>Table Body Scroll Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
        </script>

        <script>
        /* <![CDATA[ */
            function scrolify(tblAsJQueryObject, height) {
                var oTbl = tblAsJQueryObject;
                // for very large tables you can remove the four lines below
                // and wrap the table with <div> in the mark-up and assign
                // height and overflow property
                var oTblDiv = $("<div/>");
                oTblDiv.css('height', height);
                oTblDiv.css('overflow','scroll');
                oTbl.wrap(oTblDiv);
                // save original width
                oTbl.attr("data-item-original-width", oTbl.width());
                oTbl.find('thead tr td').each(function() {
                    $(this).attr("data-item-original-width",$(this).width());
                });
                oTbl.find('tbody tr:eq(0) td').each(function() {
                    $(this).attr("data-item-original-width",$(this).width());
                });
                // clone the original table
                var newTbl = oTbl.clone();
                // remove table header from original table
                oTbl.find('thead tr').remove();
                // remove table body from new table
                newTbl.find('tbody tr').remove();
                oTbl.parent().parent().prepend(newTbl);
                newTbl.wrap("<div/>");
                // replace ORIGINAL COLUMN width
                newTbl.width(newTbl.attr('data-item-original-width'));
                newTbl.find('thead tr td').each(function() {
                    $(this).width($(this).attr("data-item-original-width"));
                });
                oTbl.width(oTbl.attr('data-item-original-width'));
                oTbl.find('tbody tr:eq(0) td').each(function() {
                    $(this).width($(this).attr("data-item-original-width"));
                });
            }

            $(document).ready(function() {
                scrolify($('#tblNeedsScrolling'), 160); // 160 is height
            });
        /* ]]> */
        </script>
    </h:head>
    <h:body>
        <h:form id="myForm" prependId="false">
            <div style="width:300px;border:6px green solid;">
                <h:dataTable id="tblNeedsScrolling" value="#{tableScroll.data}" var="data" border="1" width="100%">
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Data" />
                        </f:facet>
                        <h:outputText value="#{data}" />
                    </h:column>
                </h:dataTable>
            </div>
        </h:form>
    </h:body>
</html>

例のマネージド Bean:

@ManagedBean
@RequestScoped
public class TableScroll {
    private List<String> data;
    public TableScroll() {
        data = new ArrayList<String>();
        for(int i = 1; i <= 20; i++) {
        data.add("Name" + i);
        }
    }

    public List<String> getData() {
        return data;
    }

    public void setData(List<String> data) {
        this.data = data;
    }
}
于 2012-11-11T18:24:46.957 に答える