asp.net GridView冻结头部

首先我们先创建一个GridView控件并且给他们嵌套一个div，和创建一个存放头部的div

html代码：

 <div class="DataShowBox">//用来存放要冻结头部的容器<div class="fixedHead"></div><asp:GridView ID="grdview_BakingRecord" runat="server" AutoGenerateColumns="False"><Columns><asp:BoundField DataField="ID" ItemStyle-CssClass="txtCenter" HeaderText="编号" ItemStyle-Width="80px" ></asp:BoundField><asp:BoundField DataField="Name" ItemStyle-CssClass="txtCenter" HeaderText="姓名" ItemStyle-Width="105px"  ></asp:BoundField><asp:BoundField DataField="Age" ItemStyle-CssClass="txtCenter" HeaderText="年龄" ItemStyle-Width="70px" ></asp:BoundField><asp:BoundField DataField="Class" ItemStyle-CssClass="txtCenter" HeaderText="班级" ItemStyle-Width="50px" ></asp:BoundField></Columns><HeaderStyle Height="30px" /><RowStyle Height="30px" /><PagerStyle CssClass="PagerStyle" /><AlternatingRowStyle BackColor="PeachPuff" /></asp:GridView>

创建完成之后我们再写css，用来美化以及定位用来存放要冻结头部的容器

*{margin:0;padding:0;font-family:"微软雅黑";
}
.DataShowBox{height:70%;width:100%;overflow:auto;position:relative;
}
.DataShowBox table{width:1500px;margin-bottom:10px;
}
.fixedHead{width:1500px;position:absolute;
}
.DataShowBox{width:100%;height:400px;padding-left:10px;border:1px solid black;
}

之后我们在后台进行模拟数据的操作

我们可以先创建一个实体类

public class Students
{public int ID { get; set; }public string Name { get; set; }public int Age { get; set; }public string Class { get; set; }
}

然后在加载事件中进行绑定数据的操作

 //加载事件protected void Page_Load(object sender, EventArgs e){//判断是否为第一次加载if (!IsPostBack){List<Students> lst = new List<Students>();for (int i = 0; i < 50; i++){if (i<=20){lst.Add(new Students { ID = i + 1, Name = "小民" + (i + 1), Age = 8, Class = "二年级三班" });}else if(i<=40&&i>20){lst.Add(new Students { ID = i + 1, Name = "小王" + (i + 1), Age = 10, Class = "三年级三班" });}else{lst.Add(new Students { ID = i + 1, Name = "小紫" + (i + 1), Age = 9, Class = "二年级四班" });}}//grdview_BakingRecord是gridview控件的IDgrdview_BakingRecord.DataSource = lst;grdview_BakingRecord.DataBind();}}

我们进行绑定了之后就回到javaScript写冻结列的代码

 $(function () {//获取存放头部的容器var div = $(".fixedHead");//获取头部$("#grdview_BakingRecord tr:eq(0) th").each(function () {//进行复制var th = $(this)[0].cloneNode(true);//获取gridview中头部的样式赋值给复制后的头部var style = getStyle(this);$(th).css("width", style.width);$(th).css("height", style.height);$(th).css("background-color", "white");$(th).css("text-align", style.textAlign);$(th).css("border", style.border);$(th).css("border-right", "0px solid black");$(th).css("vertical-align", style.verticalAlign);$(th).css("font-size", "14px");$(th).css("font-weight", "900");$(th).css("padding-left", "1px");//追加到存放头部容器中div.append(th);});$("#grdview_BakingRecord tr:eq(0)").css("color", "white");//设置div滚动元素时触发的事件$(".DataShowBox").scroll(function () {var div = $(".fixedHead");//判断如果滚动的时候这存放头部容器不在顶端，就设置外边距，实现跟随。if (div.position().top < 0) {div.css("margin-top", $(".DataShowBox").scrollTop());}else {div.css("margin-top", "0px");}});});//兼容的获取当前样式的任意属性值function getStyle(element) {if (window.getComputedStyle) {return window.getComputedStyle(element, null);} else {return element.currentStyle;}}

这样就可以实现冻结头部了。大家可以去试一试。

asp.net GridView冻结头部相关推荐

ASP.NET GridView控件匯出EXCEL-移除控件，只是顯示文本
ASP.NET GridView控件匯出EXCEL-移除控件,只是顯示文本下午 05:10 2011/2/22 將GridView中的TextBox,DropDownList,LinkButton去 ...
ASP.NET Gridview的简单的Bootstrap分页
Gridview的仅用CSS的Bootstrap分页介绍本文描述了使用bootstrap CSS的.table类的ASP.NET gridview的bootstrap分页实现. 我最近在boots ...
ASP.NET GridView中使用搜索框（SearchableGridView）
介绍: 我正在搜寻一种方法实现在ASP.NET GridView控件包含搜索框.我找不到一个完美的解决方案,决定自己去实现它.这里所以写出我的解决方案. 为什么使用这种方案? 您可以使用此种方案和实施 ...
ASP.NET GridView控件常用功能
ASP.NET GridView控件常用功能一.分页显示二.排序数据三.实现全选和不全选四.对数据进行编辑操作五.删除数据六.高亮显示鼠标所在行七.设置数据显示格式八.单击控件某行按钮 ...
C# GridView 冻结列冻结表头
主要是这四个引用我的是复杂表头如果不是复杂表头 headerRows: 2 这个属性设置1即可 width: "100%", height: "480px" ...
ASP.NET GridView嵌套DataList实例
最近做一个项目,需要用到GridView嵌类DataList的方式来实现数据的展示.弄了半天总算弄出来了,但还是有一些问题寻求高手解决. 先看WebForm: 1<%@ Page Langua ...
asp.net gridview 72般绝技
GridView无代码分页排序 GridView选中,编辑,取消,删除 GridView正反双向排序 GridView和下拉菜单DropDownList结合 GridView和CheckBox结合鼠 ...
ASP.NET GridView控件在列上格式化时间
症状:在GridView绑定日期格式的时候,数据库中的日期为2008-07-04,而GridView显示的是2007-07-04 000000.. 解决办法:想把这后面这多余的零去掉的话在绑定时间的那 ...
asp绑定gridview属性_如何在ASP.NET Core中自定义Azure Storage File Provider
主题:如何在ASP.NET Core中自定义Azure Storage File Provider 作者: Lamond Lu 地址: https://www.cnblogs.com/lwqlun/ ...

asp.net GridView冻结头部

asp.net GridView冻结头部相关推荐

最新文章

热门文章