当前位置:编程学习 > asp >>

jQuery Asp.Net datagrid表头固定,表内容滚动代码实现

[javascript]
//整体思路还是老样子:在前面插入一个新table,里面只有表头,然后设置数据表格的高度使其滚动即可。 
[javascript]
//由于table的表头的宽度会根据内容或者下面行的内容改变,所以我们需要用的col标记来固定他的宽度,格式如:<col width='200px'></col> 
[javascript]
//方法调用:直接传进去表格的id和想要滚动的高度就可以了 
jQuery.fn.outerHTML = function (s) { 
    return s 
            ? this.before(s).remove() 
            : jQuery("<p>").append(this.eq(0).clone()).html(); 
};//这个是获取元素的全部html,下面复制表头的时候要用到,因为复制表头的时候需要把样式也复制过去(如果里面没任何样式就免了。。) 
 
 
 
function fixHeader(tableID,height) { 
    var table = $("#" + tableID); 
    var headers = table.find("th").length > 0 
                ? table.find("th") 
                : table.find("tr:first"); 
 
 
    var colHTML = ""; 
 
 
    //最后一个col不用管,让它自己去适应 
    for (var i = 0; i < headers.find("td").length - 1; i++) { 
        colHTML += "<col width = '" + headers.find("td:eq(" + i + ")").width() + "'></col>"; 
    } 
 
 
    //插入表头 
    table.before("<table class='thead'>" + colHTML + "<tbody>" + headers.outerHTML() + "</tbody></table>"); 
 
 
    //重置表头的宽度 
    $(".thead").width(table.width()); 
 
 
    //原表中插入col标记 
    table.find("tbody").before(colHTML);    
 
 
    table.css("display", "block").height(height).css("overflowY", "scroll"); 
     
    if ($.browser.msie) { 
        //IE下表格不能通过设置表格高度来实现滚动 
        table.wrap("<div class='tablewrap'></div>");         
        //$(".tablewrap").width(table.width(); 
        $(".tablewrap").height(height).css("overflowY", "auto").css("overflowX", "hidden");        
    } 
 
 
    //删除第一行 
    headers.height(0).find("td").html("").height(0); 

 
//自己写的方法,,菜鸟作品,如果有Bug,还望指正。。 



摘自 万明博客
补充:Web开发 , 其他 ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,