1

CSS と html を使用せずに、asp.net グリッドビューを垂直方向および水平方向にスクロール可能にする方法を知りたいです。

これは、グリッドビューをスクロール可能にする方法に関する私のコードです

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>

グリッドビューを非表示にすると、作成したdivスクロールが表示されるため、これを使用したくありません。

4

4 に答える 4

1

以下のリンクを試してみてください...ここでは、Jqueryを使用してグリッドビューをスクロールしますが、非常に簡単でした...

スクロール グリッド ビュー

于 2013-01-23T03:40:37.250 に答える
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

div内でグリッドを使用して、このdivをスクロール可能にすることができます....

于 2013-01-23T05:44:45.773 に答える