jquery - 如何修复 displaytag 表中的列标题

Question

我已经使用 displaytag 创建了一个表。我想让表标题或列标题固定，并且只有表的正文应该滚动。我能够使包含表的 div 为可滚动的。但是当滚动时，表格的标题也会滚动。它并没有保持固定。我尝试了一些方法。但我没有得到任何运气。有人可以帮助我吗？提前致谢。

我的代码:

<div id="ratesTableDiv" style="overflow-y: auto;height:250px;" >
                <display:table class="tablesorter" export="false" id="data" class="displayTableBorder"
                    summary="This is the only table in the rates tab. It has the rates data for the selected plan." style="width:700px;" 
                    name="PlanSummaryDTO.planRateList" uid="rates" rules="rows"
                    requestURI="PlanSummary"
                    decorator="com.cgi.hix.web.decorators.PortalHomePlansDecorator">
                    <display:setProperty name="paging.banner.placement" value="bottom" />
                    <display:setProperty name="basic.empty.showtable" value="true" />
                    <display:setProperty name="paging.banner.onepage" value="" />
                    <display:setProperty name="paging.banner.no_items_found" value="" />
                    <display:setProperty name="paging.banner.one_item_found" value="" />
                    <display:setProperty name="paging.banner.all_items_found" value="" />
                    <display:setProperty name="paging.banner.some_items_found" value="" />
                    <display:setProperty name="paging.banner.group_size" value="5" />
                    <display:setProperty name="paging.banner.full"
                        value='<p><span id="hix-pagination"><span> <a id="doublePrevRates" class="prev" href="{1}">&#9668;&#9668;</a> <a id="singlePrevRates" class="prev" href="{2}">&#9668;</a> {0} <a id="singleNextRates" class="next" href="{3}">&#9658;</a> <a id="doubleNextRates" class="next" href="{4}">&#9658;&#9658; </a></span></span></p>' />
                    <display:setProperty name="paging.banner.first"
                        value='<p><span id="hix-pagination"><span> <a id="doublePrevRates" class="prev" href="{1}">&#9668;&#9668;</a> <a id="singlePrevRates" class="prev" href="{2}">&#9668;</a> {0} <a id="singleNextRates" class="next" href="{3}">&#9658;</a> <a id="doubleNextRates" class="next" href="{4}">&#9658;&#9658; </a></span></span></p>' />
                    <display:setProperty name="paging.banner.last"
                        value='<p><span id="hix-pagination"><span> <a id="doublePrevRates" class="prev" href="{1}">&#9668;&#9668;</a> <a id="singlePrevRates" class="prev" href="{2}">&#9668;</a> {0} <a id="singleNextRates" class="next" >&#9658;</a> <a id="doubleNextRates" class="next" >&#9658;&#9658; </a></span></span></p>' />
                    <display:caption media="html" class="captionHide">Rates</display:caption>
                    <display:setProperty name="paging.banner.page.separator"
                        value=" | " />
                    <display:setProperty name="paging.banner.group_size" value="4" />
                    <display:column property="age" scope="colgroup" headerScope="colgroup" title="${age}"
                        headerClass="hixTableHeader "
                        style="width: 10%;align: center;" class="displayTagtd" />
                    <display:column property="usesTobacco" scope="colgroup" headerScope="colgroup" title="${tobacco}"
                        headerClass="hixTableHeader" style="width: 30%;align: center;"
                        class="displayTagtd" />
                    <display:column property="rateAreaId" scope="colgroup" headerScope="colgroup" title="${ratingArea}"
                        headerClass="hixTableHeader" style="width: 15%;align: center;"
                        class="displayTagtd" />
                    <display:column property="rateAmount" scope="colgroup" headerScope="colgroup" title="${individualRate}"
                        headerClass="hixTableHeader"
                        style="width: 20%;align: center;" class="displayTagtd" />
                    <display:column property="individualTobaccoRate" scope="colgroup" headerScope="colgroup" title="${individualTobaccoRate}"
                        headerClass="hixTableHeader"
                        style="width: 30%;align: center;" class="displayTagtd" />
                </display:table>
    </div>

使用 div 并设置溢出 y 和高度，我可以获得滚动条。但是表格的表头也会滚动。如何使表头固定？

我尝试了以下代码:

现在标题已固定，并且不会随正文滚动。但是每个列标题的宽度与每个列主体的宽度不同。有什么办法解决这个问题吗？

$(document).ready(function() 
 {       scrolify($('#ratesTableDiv'), 250);
});

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-y','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"));
    });                 
}

Answer 1

要固定标题并查看 tbody 滚动基本上可以实现设置:tbody {display:block;height:XX;overflo:scroll;} 但是您会在 thead 和 tbody 之间松散单元格对齐。

您可以通过类来调整它并最终克隆页脚。如果你的标题有一些 colspans，这个选项应该更好。

看看:http://codepen.io/gcyrillus/pen/aJysI对于带有页眉(页脚)固定的滚动表。尝试一下代码，我相信您会理解其用途。 :)