Question

我想知道如何在不使用CSS和html的情况下使我的asp.net gridview可以垂直和水平滚动。

这是关于如何使gridview可滚动的代码

CSS中的

：

div#scroll  
{
border: 1px solid #C0C0C0;
background-color: #F0F0F0;
width: 584px; 
height: 180px; 
overflow: scroll; 
position: relative;
left: 39px;
top: 813px;
}

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>

我不想使用它，因为当我隐藏我的gridview时，我制作的div滚动是可见的。

Answer 1

尝试以下链接它会帮助你...在这里他们使用Jquery滚动网格视图，它非常简单......

Scroll Grid View

Answer 2

您可以在div中使用网格，并使此div可滚动....

Answer 3

这就是我的做法

<强> 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：

  <div id="gvholder">
//My gridviewcontrol
     <asp:GridView ID="MyGridViewID" runat="server" >  
       <Columns>
         ......
         ......
         ......
      <Columns>
     </asp:GridView>

 </div>

<强> 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;
}

Answer 4

用您提及的gridview包裹div你不想做的事情，但为了解决“隐藏我的网格视图，我制作的div滚动是可见的”你包装了使用面板并制作Panel.Visible=true或false。

对我来说，隐藏可滚动的GridView而不留空间。

如何在asp.net中制作gridview可滚动？

4 个答案: