Html 如何使asp.net 中的gridview 可滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14472016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make gridview in asp.net scrollable?
提问by
I want to know how can i make my asp.net gridview scrollable vertically and horizontally without using CSS and html.
我想知道如何在不使用 CSS 和 html 的情况下使我的 asp.net gridview 可垂直和水平滚动。
this is my code on how I make gridview scrollable
这是我如何使 gridview 可滚动的代码
in CSS:
在 CSS 中：
div#scroll
{
border: 1px solid #C0C0C0;
background-color: #F0F0F0;
width: 584px;
height: 180px;
overflow: scroll;
position: relative;
left: 39px;
top: 813px;
}
in HTML:
在 HTML 中：
<div id = "scroll">
<asp:GridView ID="tblitem" runat="server" CellPadding="4"
ForeColor="#333333" GridLines="None"
style="z-index: 1; left: -2px; top: 0px; position: absolute; height: 57px; width: 584px"
AutoGenerateSelectButton="True" Visible="False">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
</asp:GridView>
</div>
I dont want to use this because when I hide my gridview, the div scroll that I make is visible.
我不想使用它，因为当我隐藏我的 gridview 时，我制作的 div 滚动是可见的。
采纳答案by Pandian
Try the below link it will help you... here they use Jquery to Scroll Grid view and it was very simple...
试试下面的链接，它会帮助你......在这里他们使用 Jquery 来滚动网格视图，这非常简单......
回答by Sohail Hameed
You can use grid inside div and make this div scrollable....
您可以在 div 内使用 grid 并使该 div 可滚动....
回答by Satinder singh
This is how i did
这就是我所做的
JavaScript:
JavaScript：
function onLoad() {
FreezeGridViewHeader('MyGridViewID', 'WrapperDiv');
}
function FreezeGridViewHeader(gridID, wrapperDivCssClass) {
/// <summary>
/// Used to create a fixed GridView header and allow scrolling
/// </summary>
/// <param name="gridID" type="String">
/// Client-side ID of the GridView control
/// </param>
/// <param name="wrapperDivCssClass" type="String">
/// CSS class to be applied to the GridView's wrapper div element.
/// Class MUST specify the CSS height and width properties.
/// Example: width:800px;height:400px;border:1px solid black;
/// </param>
var grid = document.getElementById(gridID);
if (grid != 'undefined') {
grid.style.visibility = 'hidden';
var div = null;
if (grid.parentNode != 'undefined') {
//Find wrapper div output by GridView
div = grid.parentNode;
if (div.tagName == "DIV") {
div.className = wrapperDivCssClass;
div.style.overflow = "auto";
}
}
//Find DOM TBODY element and remove first TR tag from
//it and add to a THEAD element instead so CSS styles
//can be applied properly in both IE and FireFox
var tags = grid.getElementsByTagName('TBODY');
if (tags != 'undefined') {
var tbody = tags[0];
var trs = tbody.getElementsByTagName('TR');
var headerHeight = 8;
if (trs != 'undefined') {
headerHeight += trs[0].offsetHeight;
var headTR = tbody.removeChild(trs[0]);
var head = document.createElement('THEAD');
head.appendChild(headTR);
grid.insertBefore(head, grid.firstChild);
}
//Needed for Firefox
tbody.style.height =
(div.offsetHeight - headerHeight) + 'px';
tbody.style.overflowX = "hidden";
tbody.overflow = 'auto';
tbody.overflowX = 'hidden';
}
grid.style.visibility = 'visible';
}
}
HTML MARKUP:
HTML 标记：
<div id="gvholder">
//My gridviewcontrol
<asp:GridView ID="MyGridViewID" runat="server" >
<Columns>
......
......
......
<Columns>
</asp:GridView>
</div>
CSS
CSS
.WrapperDiv {
border: 1px solid #CCCCCC;
height: auto;
max-height: 400px;
width: auto;
}
.WrapperDiv TH {
position:relative;
font-size:12px;
font-weight:bold;
}
.WrapperDiv TR
{
/*NeededForIe*/
height:0px;
}
.WrapperDiv td
{
font-size:12px;
}
#gvholder
{
float:left;
top:10px;
width:auto;
border:1px solid #CCCCCC;
margin-top:10px;
margin-left:10px;
box-shadow:1px 2px 9px black;
}
回答by Lee VanGrubenstuben
Wrap the gridviewwith a divlike you mentioned you didn't want to do, but to get around the "hide my gridview, the div scroll that I make is visible" you wrap that with a panel and make the Panel.Visible=trueor false.
gridview用div你提到的你不想做的那样包裹，但是为了解决“隐藏我的网格视图，我制作的 div 滚动是可见的”你用一个面板包裹它并制作Panel.Visible=trueor false。
For me that hides the scrollable GridView without leaving space.
对我来说，隐藏可滚动的 GridView 而不留空间。
