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开发 , 其他 ,