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
查看全文
相关阅读:
winserver-性能监视器计数器介绍
winserver-性能监视器
winserver-凭据管理(credential manager)
The operation could not be performed because OLE DB provider "SQLNCLI11" for linked server "server_name" was unable to begin a distributed transaction.
pandas-排序
SQL SERVER-跟踪标记
WinSCP
SSL证书
Powershell-修改文件夹权限
fiddler 插件开发
原文地址:https://www.cnblogs.com/dagon007/p/165356.html
最新文章
统计图钻取的明细报表在非模态窗口中显示
行式填报之主键设置
填报表之数据留痕
如何通过报表单元格右键控制报表跳转到不同链接地址
数据报表多种序号生成方式
报表也可以根据单元格计算后结果进行排序
尺码类报表的制作
web 报表工具如何自适应
填报表中也可以添加 html 事件
如何通过脚本实现数据动态更新
热门文章
arcgis engine 基础代码
vs2013_arcgis_developer_kit_101_install
Kettle6使用
PDF表单域(FormField)在HTML显示与提交数据到服务器
oracle client与ODAC的字符集
转:探讨跨域请求资源的几种方式
oracle 游标示例
VS2013连接不上TFS,TF31002记录
oracle11g空表不能导出记录
ZebraDesigner-设计label
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