如果您不介意使用一个 jquery 插件,那么它可能会节省您的时间。我知道我曾经在我的早期项目之一中使用 css 表达式和 javascript 解决方案尝试过互联网上的所有建议,但它总是在一个或其他浏览器中中断,并且标题列宽度和行列宽度可能无法动态对齐数据长度。
链接到 GridViewScrollDemo这使得这项工作非常完美。
这是我在我的应用程序中使用它的方式,它运行得完美无缺。参考我的另一个answer对于类似的问题。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="gridviewScroll.min.js"></script>
<link href="GridviewScroll.css" rel="stylesheet" />
function pageLoad(sender, args) {
gridviewScroll ();
}
function gridviewScroll() {
gridView1 = $('#GridView1').gridviewScroll({
width: 915,
height: 449,
railcolor: "#F0F0F0",
barcolor: "#CDCDCD",
barhovercolor: "#606060",
bgcolor: "#F0F0F0",
freezesize: 5,
arrowsize: 30,
varrowtopimg: "../../../images/arrowvt.png",
varrowbottomimg: "../../../images/arrowvb.png",
harrowleftimg: "../../../images/arrowhl.png",
harrowrightimg: "../../../images/arrowhr.png",
headerrowcount: 1,
onScrollVertical: function (delta) {
// store the scroll offset outside of this function in a hidden field and restore if you want to maintain vertical scroll position
},
onScrollHorizontal: function (delta) {
//store the scroll offset outside of this function in a hidden field and restore if you want to maintain horizontal scroll position
}
});
}
以及屏幕打印显示冻结网格标题在我的应用程序中的外观。如果您有较长的行数据,您可以事件冻结网格的某些列。从图像中,灰色的列是我的应用程序中被冻结的列。
![enter image description here](https://i.stack.imgur.com/AXigX.png)