1

我想知道如何在不使用 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 滚动是可见的。

4

4 回答 4

1

试试下面的链接，它会对你有所帮助......这里他们使用 Jquery 来滚动网格视图，这很简单......

滚动网格视图

于 2013-01-23T03:40:37.250 回答
0

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

于 2013-01-23T05:44:45.773 回答
0

我就是这样做的

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 标记：

  <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;
}
于 2013-01-23T06:14:57.363 回答
0

gridview用div你提到的你不想做的包装，但是为了绕过“隐藏我的网格视图，我制作的 div 滚动是可见的”，你用一个面板包装它并制作Panel.Visible=trueor false。

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

于 2018-04-27T03:18:48.480 回答