gridview 冻结行与列

最新推荐文章于 2022-03-08 13:05:52 发布

kehua668

最新推荐文章于 2022-03-08 13:05:52 发布

阅读量844

点赞数

分类专栏： C# html

本文链接：https://blog.csdn.net/kehua668/article/details/101024528

版权

这篇博客介绍了如何在GridView中实现行和列的冻结效果。通过引用css（tableStyle.css, superTables.css）和js（superTables.js, jquery.superTable.js）文件，并在jQuery中调用toSuperTable方法，设置宽度、高度、固定列数和头部行数，从而实现表格的冻结功能。" 47173329,679503,Python2 PyCharm中文乱码解决办法,"['python', '编码问题', 'PyCharm', '解决方案', 'Unicode']

摘要由CSDN通过智能技术生成

-----1.css引用：

-----2.js引用：

------3.js

$(function () {
$("#Grid_Ry_List").toSuperTable({ width: "100%", height: "600px", fixedCols: 5, headerRows: 1 });
});

-----4.gridview 关键处

<asp:GridView ID="Grid_Ry_List" runat="server" AutoGenerateColumns="False" CssClass="MyGridView"
lay-size="sm" EnableModelValidation="True" DataKeyNames="gh" OnRowDataBound="Grid_Ry_List_RowDataBound">

----引用代码

tableStyle.css

#demoTable td,#demoTable th{
 	height:30px;
 	min-width:100px;
 	font-family:"Helvetica Neue", "Microsoft Yahei", Arial, sans-serif;
 	font-size:12px;
 }
 #demoTable th{
 	background: #F2F2F2;
 	background-image: linear-gradient(to bottom, #f8f8f8 0%, #ececec 100%);
 }
 @media screen and (min-width: 1500px) {
    #demoTable td,#demoTable th{
 	height:30px;
 	width:10%;
 }
}
 #demoTable td{
 	background:#fff;
 }
 #demoTable{
 	border-top:2px solid #428bca;
 	
 }
 .fakeContainer {  
     margin: 5px 20px 20px 20px;  
     border: none;                        
     overflow: hidden;  
 } 
 .my_width{
 	/*width:100%;*/
 	overflow:hidden;
 	padding:0 20px;
 }
 .first_div{
 	display:block;
 	margin:0 auto;
 }
 /*表格上方查询等功能的样式*/
 .radius{
 	border-radius:8px;
 }

superTables.css

/* 
/ 
// Super Tables v0.30 - MIT Style License 
// Copyright (c) 2008 Matt Murphy --- www.matts411.com 
// 
// Contributors: 
// Joe Gallo 
/ 
*/ 

.sBase { 
position: relative; 
    width: 100%; 
    height: 100%; 
    overflow: hidden;
       
} 
/* HEADERS */ 
.sHeader { 
position: absolute; 
z-index: 3; 
background-color: #ffffff; 
} 
.sHeaderInner { 
position: relative; 
} 
.sHeaderInner table { 
border-spacing: 0px 0px !important; 
border-collapse: collapse !important; 
width: 1px !important; 
table-layout: fixed !important; 
background-color: #ffffff; /* Here b/c of Opera 9.25 :( */ 
} 
/* HEADERS - FIXED */ 
.sFHeader { 
position: absolute; 
z-index: 4; 
overflow: hidden; 
} 
.sFHeader table { 
border-spacing: 0px 0px !important; 
border-collapse: collapse !important; 
width: 1px !important; 
table-layout: fixed !important; 
background-color: #ffffff; /* Here b/c of Opera 9.25 :( */ 
} 
/* BODY */ 
.sData { 
position: absolute; 
z-index: 2; 
overflow: auto; 
background-color: #ffffff; 
height:569px;
} 
.sData table { 
border-spacing: 0px 0px !important; 
border-collapse: collapse !important; 
width: 1px !important; 
table-layout: fixed !important; 
} 
/* BODY - FIXED */ 
.sFData { 
position: absolute; 
z-index: 1; 
background-color: #ffffff; 
} 
.sFDataInner { 
position: relative; 
} 
.sFData table { 
border-spacing: 0px 0px !important; 
border-collapse: collapse !important; 
width: 1px !important; 
table-layout: fixed !important; 
} 

/* 
/ 
// Super Tables - Skin Classes 
// Remove if not needed 
/ 
*/ 
/* sDefault */ 
.sDefault { 
margin: 0px; 
padding: 0px; 
border: none; 
font-family: Verdana, Arial, sans serif; 
font-size: 0.8em; 
} 
.sDefault th, .sDefault td { 
border: 1px solid #cccccc; 
padding: 3px 6px 3px 4px; 
white-space: nowrap; 
} 
.sDefault th { 
background-color: #F3F7FF; 
border-color: #c5c5c5; 
} 
.sDefault-Fixed { 
background-color: