zoukankan      html  css  js  c++  java
  • GirdView固定行头

    问题的起源:

    1,允许显示的范围固定,宽和高都远远超出了指定的显示范围。

    2,纵向滚动条必须在行头以下显示。

    使用【position:absolute;】和【滚动对象的scrollLeft】实现行头的固定

    代码
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        
    <title>Untitled Page</title>
    </head>
    <body style="margin: 0px;" onload="onload();"  tabindex="-1" oncontextmenu="return false;">
        
    <form id="form1" runat="server">
           
         
    <table id="tbHeader"  style="position:absolute;background-color:White;top:10px;">
            
    <tr>
                
    <td style="color:Blue;" class="firstcol">施設名</td>
                
    <td class="secondcol">種別</td>
                
    <td class="thirdcol">所在地</td>
            
    </tr>
            
    </table>
            
        
    <div id="div_Container" style="290px;height:270px;overflow:auto;margin-top:30px;" onscroll="onScroll();">
          
                
    <asp:ObjectDataSource ID="LandmarkObjectDataSource" runat="server" 
                    OldValuesParameterFormatString
    ="original_{0}" SelectMethod="GetLandmark" 
                    TypeName
    ="ChinTai.WorkLogic.G1005Logic" 
                    OnSelected
    ="LandmarkObjectDataSource_Selected">
                    
    <SelectParameters>
                        
    <asp:SessionParameter Name="name" SessionField="LandmarkQueryData" Type="String" />
                        
    <asp:Parameter Direction="Output" Name="resultText" Type="String" />
                        
    <asp:Parameter Direction="Output" Name="refX" Type="String" />
                        
    <asp:Parameter Direction="Output" Name="refY" Type="String" />
                        
    <asp:Parameter Direction="Output" Name="errorMsg" Type="String" />
                    
    </SelectParameters>
                
    </asp:ObjectDataSource>
                
    <asp:GridView ID="LandmarkGridView" runat="server" DataSourceID="LandmarkObjectDataSource" EmptyDataRowStyle-ForeColor="Red" AutoGenerateColumns="False" BorderWidth="0px" ShowHeader="false" EnableViewState="False" OnRowCreated="LandmarkGridView_RowCreated">
                        
    <headerstyle Font-Size="10pt" Font-Names="MS ゴシック" HorizontalAlign="Left"/>
                        
    <Columns>
                        
    <asp:BoundField DataField="LANDMARKNAME" HeaderStyle-ForeColor="Blue" HeaderText="&nbsp;施設名" SortExpression="LANDMARKNAME" HtmlEncode="False" ShowHeader="true">
                            
    <ItemStyle Wrap="False" CssClass="firstcol" Width="40%"/>
                        
    </asp:BoundField>
                        
    <asp:BoundField DataField="KIND_NAME2" HeaderText="&nbsp;種別" SortExpression="KIND_NAME2" ShowHeader="true" >
                            
    <ItemStyle Wrap="False" CssClass="secondcol" Width="20%"/>
                        
    </asp:BoundField>
                        
    <asp:BoundField DataField="FULLADDR" HeaderText="&nbsp;所在地" SortExpression="FULLADDR" ShowHeader="true" >
                            
    <ItemStyle Wrap="False" CssClass="thirdcol" />
                        
    </asp:BoundField>
                    
    </Columns>
                
    </asp:GridView>
        
    </div>
        
    </form>
        
    <script type="text/javascript">        
    function onload() {

        
    var obj_TableList = document.getElementById("LandmarkGridView");
        
    var obj_TableHeader = document.getElementById("tbHeader");

        
    if (obj_TableList.rows[0].cells.length == 1) {

            obj_TableHeader.style.visibility 
    = "hidden";
            obj_TableHeader.style.display 
    = "none";

        }
        
    else {

            obj_TableHeader.visibility 
    = "visible";
            obj_TableHeader.style.display 
    = "block";
        }

        
    if (obj_TableList.rows[0].cells.length == 1){

            
    var divObj = document.getElementById("div_Container");

            divObj.style.marginTop 
    = 0;
        } 
        
    else{

            
    var gridviewObj = document.getElementById("LandmarkGridView");
            
    var parentNodeDIV = gridviewObj.parentNode;
            
    var tbHeaderObj = document.getElementById("tbHeader");

            tbHeaderObj.style.width 
    = gridviewObj.offsetWidth;

            tbHeaderObj.rows[
    0].cells[0].style.width = gridviewObj.rows[0].cells[0].offsetWidth-10;
            tbHeaderObj.rows[
    0].cells[1].style.width = gridviewObj.rows[0].cells[1].offsetWidth;
            
            tbHeaderObj.rows[
    0].cells[0].style.paddingLeft = 10;
            tbHeaderObj.rows[
    0].cells[1].style.paddingLeft = 0;
            tbHeaderObj.rows[
    0].cells[2].style.paddingLeft = 0;

        }

    }

    function onScroll() {

        
    var tbHeaderObj = document.getElementById("tbHeader");

        
    var divObj = document.getElementById("div_Container");

        tbHeaderObj.style.left 
    = 0 - divObj.scrollLeft;

        tbHeaderObj.style.top 
    = 10;

    }
        
    </script>
    </body>
    </html>
  • 相关阅读:
    ubuntu关闭THP
    ubuntu14安装ambari2.2
    ubuntu14安装ambari2.2
    hcatalog配置
    hcatalog配置
    java.lang.ClassNotFoundException: org.apache.struts2.dispatchet.ng.filter.StrutsPrepareAndExecuteFilter出现这个错误的解决方法
    redis连接的工具类
    案例:服务调用次数控制
    制作redis版的helloworld程序
    redis数据库通用指令
  • 原文地址:https://www.cnblogs.com/si812cn/p/1639820.html
Copyright © 2011-2022 走看看