Question

在我的JSF 2.1项目中，我使用的表格中存在标题问题。如果我对标题和数据使用单个表，则标题将与数据一起滚动。

如果我对标题和数据使用单独的表，则会出现对齐问题。

那么是否有任何标记或任何可能的方法来使用单个表来冻结标题和数据？

Answer 1

对HTML有一个很好的答案：HTML table with fixed headers?。您只需要记住JSF将生成纯HTML。根据该答案调整代码，它附带此解决方案（注意：您需要添加CDATA验证才能在Facelets中的JavaScript中使用“＆lt;”和“＆gt;”）：

<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;
    }
}

Answer 2

只需将扩展名从jsp更改为xhtml。

如何在JSF中冻结表的头

2 个答案: