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

最新推荐文章于 2017-12-18 15:28:31 发布

原创最新推荐文章于 2017-12-18 15:28:31 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #jquery #asp.net #table #function #scroll

c# 同时被 2 个专栏收录

11 篇文章

订阅专栏

asp.net

10 篇文章

订阅专栏

该博客介绍了如何使用jQuery在Asp.Net环境下实现Datagrid的表头固定，当内容区域滚动时，表头始终保持可见。通过在原始表格前插入一个新的包含固定表头的表格，并利用col标记固定列宽，调整样式和高度实现滚动效果。此方法适用于处理含有大量数据的表格，保持用户友好界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//整体思路还是老样子：在前面插入一个新table，里面只有表头，然后设置数据表格的高度使其滚动即可。

//由于table的表头的宽度会根据内容或者下面行的内容改变，所以我们需要用的col标记来固定他的宽度，格式如：<col width='200px'></col>

//方法调用：直接传进去表格的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，还望指正。。