zoukankan
html css js c++ java
纯脚本搞掂DataGrid表表头不动,表身滚动。(转自THIN(仁与渣))
先看效果:
孟子以前也做过这事,不过他的方法前台后台都要弄,还是VB的(^-^),好像也不支持像我的自动生成列的DataGrid,所以还是自己动手,纯脚本搞掂,其实很简单,就几行:
function
ScrollDataGrid()
{
var
tb
=
document.getElementById(
"
tbHeader
"
);
var
dg
=
document.getElementById(
"
dgSearchResult
"
);
if
(dg
!=
null
)
{
var
dv
=
document.getElementById(
"
dvBody
"
);
var
th
=
dg.rows[
0
];
for
(
var
i
=
0
; i
<
th.cells.length;i
++
)
th.cells[i].width
=
th.cells[i].clientWidth;
var
tr
=
th.cloneNode(
true
);
//
tr.applyElement(tb);
tb.createTHead();
var
tbh
=
tb.tHead;
tbh.appendChild(tr);
tr
=
tbh.rows[
0
];
var
td
=
tr.insertCell();
td.style.width
=
19
;
td.width
=
19
;
td.innerHTML
=
tr.cells[
0
].innerHTML;
th.style.display
=
'none';
if
(dg.scrollHeight
<
300
)
dv.style.height
=
dg.scrollHeight
*
1
+
2
;
}
<
table
width
="100%"
border
="0"
id
="tbHeader"
cellpadding
="4"
cellspacing
="0"
>
</
table
>
<
div
style
="OVERFLOW-Y: scroll; HEIGHT: 300px"
id
="dvBody"
>
<
asp:datagrid
id
="dgSearchResult"
style
="BORDER-COLLAPSE: collapse"
runat
="server"
Width
="100%"
CellPadding
="4"
DataKeyField
="编号"
BorderWidth
="1px"
BorderStyle
="Solid"
BorderColor
="RoyalBlue"
GridLines
="None"
>
<
SelectedItemStyle
ForeColor
="SlateGray"
></
SelectedItemStyle
>
<
ItemStyle
VerticalAlign
="Middle"
></
ItemStyle
>
<
HeaderStyle
HorizontalAlign
="Center"
></
HeaderStyle
>
<
Columns
>
<
asp:ButtonColumn
Text
="选择"
HeaderText
="<font face=webdings>6</font>"
CommandName
="Delete"
>
<
HeaderStyle
Wrap
="False"
Width
="40px"
></
HeaderStyle
>
<
ItemStyle
Wrap
="False"
HorizontalAlign
="Center"
></
ItemStyle
>
<
FooterStyle
Wrap
="False"
></
FooterStyle
>
</
asp:ButtonColumn
>
</
Columns
>
</
asp:datagrid
></
div
>
发表于 2005-05-27 17:04 THIN(仁与渣)
其实使用Style-Expression更简单
<style>
TD.lockedhead { POSITION: relative; ; TOP: expression(lockhead(this)) }
</style>
<script language="javascript">
function lockhead(cell)
{
var table=cell.parentElement.parentElement;
while(table&&table.tagName.toLowerCase()!="table")
table=table.parentElement;
var _div=table.parentElement;
return _div.scrollTop+(cell.parentElement.rowIndex)*(parseInt(table.border)+parseInt(table.cellSpacing)-1);
}
</script>
<script language="javascript">
function LockHead(table,cnt)
{
if(table&&table.rows.length>=cnt)
{
for(k=0;k<cnt;k++)
{
for(i=0;i<table.rows[k].cells.length;i++)
{
table.rows[k].cells[i].className="lockedhead";
}
}
}
}
LockHead(Form1.all.DataGrid1,1);
</script>
这个是使用CodeProject上的一个版本:
这个是css:
.DataGridFixedHeader {
position: relative;
top: expression(this.offsetParent.scrollTop);
background-color: blue
}
这个是应用:
...
<HeaderStyle Font-Bold="True" CssClass="ms-formlabel DataGridFixedHeader" BackColor="#80AFEF">
</HeaderStyle>
...
原文:
http://www.cnblogs.com/thinhunan/archive/2005/05/27/163704.html
查看全文
相关阅读:
嵌入式操作系统-小型任务调度的理解(转)
数据分析-pandas基础入门(一)
硬件电路设计——低通滤波器的应用
Docker
AWK总结
DNS解析
TCP/IP
Mysql优化部分总结
Nginx配置文件释义备查
时间模块
原文地址:https://www.cnblogs.com/dagon007/p/165356.html
最新文章
java三大框架之一hibernate使用入门
IT在线笔试总结(一)
Android开发者必须掌握的知识技能清单
关于安卓开发工具你不得不知的几件事
浏览器适配
形变
音频和视屏
表格表单
过度及动画
高级布局
热门文章
练习:W3C页面制作
盒模型布局
伪类选择器
标签a,img,list.md
添加树莓派python程序自启动的方法
机器学习练习(二)-机器学习的四大应用领域
机器学习练习(一)-使用jupyter notebook
区块链课程笔记-第一课哈希算法在加密中的应用
智能体脂称方案的实现
一个简单python爬虫的实现——爬取电影信息
Copyright © 2011-2022 走看看
<style>
TD.lockedhead { POSITION: relative; ; TOP: expression(lockhead(this)) }
</style>
<script language="javascript">
function lockhead(cell)
{
var table=cell.parentElement.parentElement;
while(table&&table.tagName.toLowerCase()!="table")
table=table.parentElement;
var _div=table.parentElement;
return _div.scrollTop+(cell.parentElement.rowIndex)*(parseInt(table.border)+parseInt(table.cellSpacing)-1);
}
</script>
<script language="javascript">
function LockHead(table,cnt)
{
if(table&&table.rows.length>=cnt)
{
for(k=0;k<cnt;k++)
{
for(i=0;i<table.rows[k].cells.length;i++)
{
table.rows[k].cells[i].className="lockedhead";
}
}
}
}
LockHead(Form1.all.DataGrid1,1);
</script>
这个是使用CodeProject上的一个版本:
这个是css:
.DataGridFixedHeader {
position: relative;
top: expression(this.offsetParent.scrollTop);
background-color: blue
}
这个是应用:
...
<HeaderStyle Font-Bold="True" CssClass="ms-formlabel DataGridFixedHeader" BackColor="#80AFEF">
</HeaderStyle>
...
原文:http://www.cnblogs.com/thinhunan/archive/2005/05/27/163704.html