锁定DataGrid某些列或标题栏（作者：海雅）

最新推荐文章于 2024-06-25 13:57:59 发布

hiyavip

最新推荐文章于 2024-06-25 13:57:59 发布

阅读量2.2k

点赞数

分类专栏： ASP.NET 文章标签： datagrid header table

本文链接：https://blog.csdn.net/hiyavip/article/details/408378

版权

ASP.NET 专栏收录该内容

65 篇文章 0 订阅

订阅专栏

一、锁定列
1、先在网页上添加一个ID为DataGrid_container的容器
<DIV id="DataGrid_Container" ><DIV>并在容器中添加一个DataGrid
设定容器的样式（指定为DataGrid_Container容器）
DIV#DataGrid_Container{
   OVERFLOW: auto; WIDTH: 600px;  HEIGHT: 252px;
   }
没有该样式，滚动条就不会出现（注意设置适当的宽度和高度）。
2、设定锁定样式
.Lock_Col {LEFT: expression(document.getElementById("DataGrid_Container").scrollLeft); POSITION: relative;
}
3、在网页的<HEAD></HEAD>之间添加如下代码：
<SCRIPT type="text/javascript">
function lockCol(Table_ID)
{
   var table = document.getElementById(Table_ID);
   var cTR = table.getElementsByTagName("TR");
   for (i = 0; i < cTR.length; i++)
      {
      var tr = cTR.item(i);
      for(j = 0; j < 4; j++)
         {
            tr.cells[j].className = 'Lock_Col'//将j列样式设定为Lock_Col，该列被锁定
         }
      }
}
</SCRIPT>
例如单独锁定某列：cTR.item(0).cells[5].className = 'Lock_Col'
上例中对0～3列的锁定即完成了。
二、锁定标题栏
1、添加样式
.Lock_Header
{
POSITION: relative;
Z-INDEX: 30;  TOP: expression(document.getElementById("DataGrid_Container").scrollTop-2);
}
2、定义DataGrid的HEADER的CssClass为该样式即可
<HeaderStyle CssClass="Lock_Header"></HeaderStyle>

锁定某些列的图像效果如下：