Question

我的表设计是它将有大约100列，该部分将有大约4行

我正在尝试使用固定标头并冻结某些列。我可以通过使用CSS表达式来实现这一点。

CSS表达式在IE10中破坏并使页面变得非常慢，所以我试图使用Jquery实现相同的目标，但我无法实现它

我附加了HTML（为了清晰起见，删除了大部分内容）和CSS。锁定类是定义锁定

的类

div id="main-container" style="overflow: scroll; height: 366px; width: 1023">                   
    <table id="tbl" style="table-layout: fixed"> 
        <thead id="mainTbleHdId">
            <tr>
                <th class="locked"></th>
                <th class="locked"></th>
                <th class="locked">Item Details</th>
                <th class="locked"></th>
                <th></th>
                .
                .
                .
                .
                <th></th>
            </tr>
            <tr class="xxxxx">
                <th class="locked">Select Item(s)</th>
                <th class="locked">Select Decision</th>
                <th class="locked">Select Select</th>                                   
                <th class="locked">Select Description</th>

                .
                .
                .               
                <th >Select Prep</th>                                       
            </tr>
            <tr>         
                <th id="itemView" class="locked" >
                    <input name="selectAll" id="selectAll" type="checkbox">All</th>
                <th class="locked"></th>
                <th class="locked"></th>
                <th class="locked"></th>
                .
                .
                .
                .
                <th ></th>
            </tr>
            <tr >
                <th class="locked"></th>
                <th class="locked"></th>
                <th class="locked"></th>
                <th class="locked"></th>
                .
                .
                .
                .
                <th >Select Calc</th>
            </tr>
        </thead>
        <tbody id="mainTbleBoyId">           
            <tr class="Rows"> 
                <td id="singleSelctcheckboxtd0" class="locked">
                    <input name="Checkbox" type="checkbox">
                </td>
                <td class="locked"> 
                    <select name="selectNamebuyerDecision"> 
                        <option value="Please Select" name="buyerCheck" selected="selected">Please Select</option>                      
                    </select>
                </td> 
                <td class="locked" id="dpcitd0">
                    <input type="text" value="98070702">
                </td>
                <td class="locked" id="genDesctd0">
                    <input type="text" value="ATHLETIC">
                </td>   
                .
                .
                .
                .
                <td class="InputType" id="liquidationPreptd0">
                    <input type="text" value="0">
                </td>
            </tr>             
        </tbody>
    </table>
</div>

CSS

 TABLE#tbl {
     BORDER-COLLAPSE: collapse; TABLE-LAYOUT: fixed
}
THEAD TH {
    POSITION: relative;  
}
 THEAD TR.nosort TD {
        POSITION: relative; 
}
THEAD  TH.first{

}
Table#tbl THEAD TD {
    Z-INDEX: 20;   TOP: expression(document.getElementById("main-container").scrollTop-2) 
}
Table#tbl THEAD TH {
    Z-INDEX: 20;   TOP: expression(document.getElementById("main-container").scrollTop-2) 
}
Table#tbl THEAD TH.locked {
    Z-INDEX: 30 
}
Table#tbl THEAD TD.locked {
    Z-INDEX: 30
}
TD.locked {
    Z-INDEX: 5; POSITION: relative;   LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft)
}
TH.locked {
    Z-INDEX: 5; POSITION: relative;  LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft)
}
Table#tbl THEAD TH.locked {
    POSITION: relative; TEXT-ALIGN: center; BACKGROUND-COLOR: #60487A; COLOR: black;  CURSOR: default;  border-bottom: 1px solid black;border-right: 1px solid black;
}
Table#tbl THEAD TD.locked {
    POSITION: relative; 
}
 Table#tbl TBODY TD.locked {
    POSITION: relative; TEXT-ALIGN: center; BACKGROUND-COLOR:white; COLOR: black; CURSOR: default;
  }

我试图通过做这样的事情来模拟Jquery中的锁定

 $("#main-container").scroll(function() {
    var xx = document.getElementById("main-container").scrollTop-2;     
    $("#mainTbleHdIdtr").each(function () {
        $(this).find("th").each(function () {
            $(this).css({'zIndex':20,"TOP":xx});            
        });
    });
});

但它似乎没有用我尝试了一些插件和数据表，问题是当我使用固定列时，数据表使页面非常慢

先谢谢

Answer 1

过去我必须解决此问题，并且能够使用此工具完成此操作：http://datatables.net/当我包含FixedColumns额外时：http://datatables.net/extras/fixedcolumns/

性能非常稳定，带有样式的行和列标题。

使用JQuery修复了标题和列

1 个答案: