列表视图中的头固定在asp.net滚动 [英] fixed header in listview on scroll in asp.net

查看：144
本文介绍了列表视图中的头固定在asp.net滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我加入新行到ListView达到一定高度后200像素，虽然滚动头也被滚动。如何解决这个标题应该是恒定的，将滚动

 ＆LT; ASP：ListView控件ID =ListView1的=服务器＆GT;
        ＆LT;＆LayoutTemplate模板GT;
            ＆LT;表=服务器的cellpadding =1BORDER =1的风格=背景颜色：#FFFFFF;
                边境崩溃：崩溃;边框的颜色：＃999999; BORDER-风格：无;边框宽度：1px的;＆GT;
                ＆LT; TR风格=背景色：＃E5E5FE＆GT;
                    ＆LT;第i个
                        订购
                    ＆LT; /第i
                    ＆LT;第i个
                        列标题
                    ＆LT; /第i
                    ＆LT;第i个
                        数据类型
                    ＆LT; /第i
                    ＆LT;第i个
                        Exapmles
                    ＆LT; /第i
                    ＆LT;第i个
                        选项
                    ＆LT; /第i
                    ＆LT;第i个
                       删除
                    ＆LT; /第i
                ＆LT; / TR＆GT;
                ＆LT; TR ID =itemplaceholder=服务器＆GT;
                ＆LT; / TR＆GT;
            ＆LT; /表＆gt;
        ＆LT; / LayoutTemplate模板＆GT;
        ＆LT;＆ItemTemplate中GT;
            ＆所述; TR＆GT;                ＆所述; TD＆GT;
                    ＆LT; ASP：标签ID =txtorder文本='＆LT;％＃的eval（OrderNo）％＆GT;' =服务器＆GT;＆LT; / ASP：标签＆gt;
                ＆LT; / TD＆GT;
                ＆所述; TD＆GT;
                    ＆LT; ASP：文本框ID =txtcolumnname文本='＆LT;％＃的eval（ColumnTitle）％＆GT;' =服务器WIDTH =150＆GT;＆LT; / ASP：文本框＆GT;
                ＆LT; / TD＆GT;                ＆所述; TD＆GT;
                ＆LT; ASP：DropDownList的ID =ddldatatype=服务器WIDTH =160＆GT;                ＆LT; / ASP：DropDownList的＆GT;
                ＆LT; / TD＆GT;
                ＆所述; TD＆GT;
                    ＆LT; ASP：DropDownList的ID =ddlexamples=服务器WIDTH =160＆GT;
                      ＆LT; ASP：ListItem的文本=测试VALUE =2＆GT;＆LT; / ASP：ListItem的＆GT;
                    ＆LT; / ASP：DropDownList的＆GT;
                ＆LT; / TD＆GT;
                ＆所述; TD＆GT;
                ＆LT; ASP：文本框ID =txtoptions文本='＆LT;％＃的eval（选项）％GT;' =服务器WIDTH =150＆GT;＆LT; / ASP：文本框＆GT;
                ＆LT; / TD＆GT;
                ＆所述; TD＆GT;
               ＆LT; ASP：复选框ID =chkdel=服务器/＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; / ItemTemplate中＆GT;
        ＆LT; AlternatingItemTemplate＆GT;
            ＆LT; TR风格=背景色：#EFEFEF＆GT;
                ＆所述; TD＆GT;
                    ＆LT; ASP：标签ID =txtorder文本='＆LT;％＃的eval（OrderNo）％＆GT;' =服务器＆GT;＆LT; / ASP：标签＆gt;
                ＆LT; / TD＆GT;
                ＆所述; TD＆GT;
                    ＆LT; ASP：文本框ID =txtcolumnname文本='＆LT;％＃的eval（ColumnTitle）％＆GT;' =服务器WIDTH =150＆GT;＆LT; / ASP：文本框＆GT;
                ＆LT; / TD＆GT;
                ＆所述; TD＆GT;
                ＆LT; ASP：DropDownList的ID =ddldatatype=服务器WIDTH =160＆GT;                ＆LT; / ASP：DropDownList的＆GT;
                ＆LT; / TD＆GT;
                ＆所述; TD＆GT;
                    ＆LT; ASP：DropDownList的ID =ddlexamples=服务器WIDTH =160＆GT;
                      ＆LT; ASP：ListItem的文本=测试VALUE =2＆GT;＆LT; / ASP：ListItem的＆GT;
                    ＆LT; / ASP：DropDownList的＆GT;
                ＆LT; / TD＆GT;
                ＆所述; TD＆GT;
                ＆LT; ASP：文本框ID =txtoptions文本='＆LT;％＃的eval（选项）％GT;' =服务器WIDTH =150＆GT;＆LT; / ASP：文本框＆GT;
                ＆LT; / TD＆GT;
                ＆所述; TD＆GT;
               ＆LT; ASP：复选框ID =chkdel=服务器/＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; / AlternatingItemTemplate＆GT;
    ＆LT; / ASP：的ListView＆GT;
  ＆LT; / DIV＆GT;
    ＆LT; BR /＆GT;
    ＆LT; BR /＆GT;
    ＆LT; ASP：巴顿ID =btnAdd=服务器文本=添加新行的OnClick =btnAdd_Click/＆GT;
      ＆安培;＆NBSP放大器; NBSP
            ＆LT; ASP：按钮的ID =btndelete=服务器文本=删除的onclick =btndelete_Click/＆GT;
            ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; /表＆gt;


解决方案

您可以尝试标题与内容分开，并把标题滚动内容之外。

 ＆LT; D​​IV＆GT;有的页面内容和LT; / DIV＆GT;
    //你的标题放在这里
    ＆LT; D​​IV的风格=最大高度：200像素;溢出：汽车，＆GT;
       //你的ListView放在这里
    ＆LT; / DIV＆GT;
＆LT; D​​IV＆GT;有的页面内容和LT; / DIV＆GT;

像这样

 ＆LT; D​​IV的风格=浮动：左;宽度：100％; ＆GT;        ＆LT;表ID =表1=服务器的cellpadding =1BORDER =1的风格=背景颜色：#FFFFFF;
            边境崩溃：崩溃;边框颜色：＃999999;边框样式：无;边框宽度：1px的;宽度：100％，＆GT;
            ＆LT; TR风格=背景色：＃E5E5FE＆GT;
                百分位风格=宽度：15％;＆GT;
                    订购
                ＆LT; /第i
                百分位风格=宽度：15％;＆GT;
                    列标题
                ＆LT; /第i
                百分位风格=宽度：15％;＆GT;
                    数据类型
                ＆LT; /第i
                百分位风格=宽度：15％;＆GT;
                    Exapmles
                ＆LT; /第i
                百分位风格=宽度：15％;＆GT;
                    选项
                ＆LT; /第i
                百分位风格=宽度：25％;＆GT;
                    删除
                ＆LT; /第i
            ＆LT; / TR＆GT;
        ＆LT; /表＆gt;
    ＆LT; / DIV＆GT;
   ＆LT; D​​IV的风格=最大高度：200像素;溢出：汽车;浮动：左;宽度：100％;＆GT;
        ＆LT; ASP：ListView控件ID =ListView1的=服务器＆GT;
            ＆LT;＆LayoutTemplate模板GT;
                ＆LT;表ID =表1=服务器的cellpadding =1BORDER =1的风格=背景颜色：#FFFFFF;
                    边境崩溃：崩溃;边框颜色：＃999999;边框样式：无;边框宽度：1px的;
                    ＆GT;
                    ＆LT; TR风格=背景色：＃E5E5FE;显示：无;＆GT;
                        ＆LT;第i个
                            订购
                        ＆LT; /第i
                        ＆LT;第i个
                            列标题
                        ＆LT; /第i
                        ＆LT;第i个
                            数据类型
                        ＆LT; /第i
                        ＆LT;第i个
                            Exapmles
                        ＆LT; /第i
                        ＆LT;第i个
                            选项
                        ＆LT; /第i
                        ＆LT;第i个
                            删除
                        ＆LT; /第i
                    ＆LT; / TR＆GT;
                  ＆LT; TR ID =itemplaceholder=服务器＆GT;
                    ＆LT; / TR＆GT;                ＆LT; /表＆gt;
            ＆LT; / DIV＆GT;
            ＆LT; / LayoutTemplate模板＆GT;
            ＆LT;＆ItemTemplate中GT;                ＆所述; TR＆GT;
                    ＆LT; TD风格=宽度：15％;＆GT;
                         ＆LT; ASP：标签ID =txtorder文本='＆LT;％＃的eval（OrderNo）％＆GT;' =服务器＆GT;＆LT; / ASP：标签＆gt;
                    ＆LT; / TD＆GT;
                    ＆LT; TD风格=宽度：15％;＆GT;
                        ＆LT; ASP：文本框ID =txtcolumnname文本='＆LT;％＃的eval（ColumnTitle）％＆GT;' =服务器WIDTH =150＆GT;＆LT; / ASP：文本框＆GT;
                    ＆LT; / TD＆GT;
                    ＆LT; TD风格=宽度：15％;＆GT;
                        ＆LT; ASP：DropDownList的ID =ddldatatype=服务器WIDTH =160＆GT;
                        ＆LT; / ASP：DropDownList的＆GT;
                    ＆LT; / TD＆GT;
                    ＆LT; TD风格=宽度：15％;＆GT;
                        ＆LT; ASP：DropDownList的ID =ddlexamples=服务器WIDTH =160＆GT;
                            ＆LT; ASP：ListItem的文本=测试VALUE =2＆GT;＆LT; / ASP：ListItem的＆GT;
                        ＆LT; / ASP：DropDownList的＆GT;
                    ＆LT; / TD＆GT;
                    ＆LT; TD风格=宽度：15％;＆GT;
                        ＆LT; ASP：文本框ID =txtoptions文本='＆LT;％＃的eval（选项）％GT;' =服务器WIDTH =150＆GT;＆LT; / ASP：文本框＆GT;
                    ＆LT; / TD＆GT;
                    ＆LT; TD风格=宽度：25％;＆GT;
                        ＆LT; ASP：复选框ID =chkdel=服务器/＆GT;
                    ＆LT; / TD＆GT;
                ＆LT; / TR＆GT;
            ＆LT; / ItemTemplate中＆GT;
            ＆LT; AlternatingItemTemplate＆GT;
                ＆LT; TR风格=背景色：#EFEFEF＆GT;
                    ＆所述; TD＆GT;
                      ＆LT; ASP：标签ID =txtorder文本='＆LT;％＃的eval（OrderNo）％＆GT;' =服务器＆GT;＆LT; / ASP：标签＆gt;
                    ＆LT; / TD＆GT;
                    ＆所述; TD＆GT;
                        ＆LT; ASP：文本框ID =txtcolumnname文本='＆LT;％＃的eval（ColumnTitle）％＆GT;' =服务器WIDTH =150＆GT;＆LT; / ASP：文本框＆GT;
                    ＆LT; / TD＆GT;
                    ＆所述; TD＆GT;
                        ＆LT; ASP：DropDownList的ID =ddldatatype=服务器WIDTH =160＆GT;
                        ＆LT; / ASP：DropDownList的＆GT;
                    ＆LT; / TD＆GT;
                    ＆所述; TD＆GT;
                        ＆LT; ASP：DropDownList的ID =ddlexamples=服务器WIDTH =160＆GT;
                            ＆LT; ASP：ListItem的文本=测试VALUE =2＆GT;＆LT; / ASP：ListItem的＆GT;
                        ＆LT; / ASP：DropDownList的＆GT;
                    ＆LT; / TD＆GT;
                    ＆所述; TD＆GT;
                        ＆LT; ASP：文本框ID =txtoptions文本='＆LT;％＃的eval（选项）％GT;' =服务器WIDTH =150＆GT;＆LT; / ASP：文本框＆GT;
                    ＆LT; / TD＆GT;
                    ＆所述; TD＆GT;
                        ＆LT; ASP：复选框ID =chkdel=服务器/＆GT;
                    ＆LT; / TD＆GT;
                ＆LT; / TR＆GT;
            ＆LT; / AlternatingItemTemplate＆GT;
        ＆LT; / ASP：的ListView＆GT;
    ＆LT; / DIV＆GT;

When i Add new rows to the listview up to certain height 200px after that it will scroll while scrolling header is also scrolling .how to fix this header should be constant 

<asp:ListView ID="listview1" runat="server">
        <LayoutTemplate>
            <table runat="server" cellpadding="1" border="1"  style="background-color: #FFFFFF;
                border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
                <tr style="background-color: #E5E5FE">
                    <th>
                        Order
                    </th>
                    <th>
                        Column Title
                    </th>
                    <th>
                        DataType
                    </th>
                    <th>
                        Exapmles
                    </th>
                    <th>
                        Options
                    </th>
                    <th>
                       Delete
                    </th>
                </tr>
                <tr id="itemplaceholder" runat="server">
                </tr>
            </table>
        </LayoutTemplate>
        <ItemTemplate>
            <tr>

                <td>
                    <asp:Label ID="txtorder" Text='<%#Eval("OrderNo") %>' runat="server"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtcolumnname" Text='<%#Eval("ColumnTitle") %>' runat="server" Width="150"></asp:TextBox>
                </td>

                <td>
                <asp:DropDownList ID="ddldatatype" runat="server" Width="160"   >

                </asp:DropDownList>
                </td>
                <td>
                    <asp:DropDownList ID="ddlexamples"  runat="server" Width="160">
                      <asp:ListItem Text="test" Value="2"></asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td>
                <asp:TextBox ID="txtoptions" Text='<%#Eval("Options") %>' runat="server" Width="150" ></asp:TextBox>
                </td>
                <td>
               <asp:CheckBox ID="chkdel" runat="server" />
                </td>
            </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
            <tr style="background-color: #EFEFEF">
                <td>
                    <asp:Label ID="txtorder" Text='<%#Eval("OrderNo") %>' runat="server"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtcolumnname" Text='<%#Eval("ColumnTitle") %>' runat="server" Width="150"></asp:TextBox>
                </td>
                <td>
                <asp:DropDownList ID="ddldatatype" runat="server" Width="160" >

                </asp:DropDownList>
                </td>
                <td>
                    <asp:DropDownList ID="ddlexamples" runat="server" Width="160">
                      <asp:ListItem Text="test" Value="2"></asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td>
                <asp:TextBox ID="txtoptions"  Text='<%#Eval("Options") %>' runat="server" Width="150"></asp:TextBox>
                </td>
                <td>
               <asp:CheckBox ID="chkdel" runat="server" />
                </td>
            </tr>
        </AlternatingItemTemplate>
    </asp:ListView>
  </div>
    <br />
    <br />
    <asp:Button ID="btnAdd" runat="server" Text="Add New Row" OnClick="btnAdd_Click" />
      &nbsp &nbsp
            <asp:Button ID="btndelete" runat="server" Text="Delete" onclick="btndelete_Click" />           
            </td>         
        </tr>
    </table>

解决方案

You can try to separate the header from the content and put the header outside the scrollable content.

<div>Some Page Content </div>
    //your heading goes here
    <div style="max-height: 200px; overflow: auto;">
       //your listview goes here
    </div>
<div>Some Page Content </div>

like this

   <div style="float:left; width:100%;" >

        <table id="Table1" runat="server" cellpadding="1" border="1" style="background-color: #FFFFFF;
            border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px;width:100%;">
            <tr style="background-color: #E5E5FE">
                <th style="width:15%;">
                    Order
                </th>
                <th style="width:15%;">
                    Column Title
                </th>
                <th style="width:15%;">
                    DataType
                </th>
                <th style="width:15%;">
                    Exapmles
                </th>
                <th style="width:15%;">
                    Options
                </th>
                <th style="width:25%;">
                    Delete
                </th>
            </tr>
        </table>
    </div>
   <div style="max-height: 200px; overflow: auto; float:left; width:100%;">
        <asp:ListView ID="listview1" runat="server">
            <LayoutTemplate>
                <table id="Table1" runat="server" cellpadding="1" border="1" style="background-color: #FFFFFF;
                    border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px;
                    ">
                    <tr style="background-color: #E5E5FE;display:none;">
                        <th>
                            Order
                        </th>
                        <th>
                            Column Title
                        </th>
                        <th>
                            DataType
                        </th>
                        <th>
                            Exapmles
                        </th>
                        <th>
                            Options
                        </th>
                        <th>
                            Delete
                        </th>
                    </tr>
                  <tr id="itemplaceholder" runat="server">
                    </tr>

                </table>


            </div>
            </LayoutTemplate>
            <ItemTemplate>

                <tr>
                    <td style="width:15%;">
                         <asp:Label ID="txtorder" Text='<%#Eval("OrderNo") %>' runat="server"></asp:Label>
                    </td>
                    <td style="width:15%;">
                        <asp:TextBox ID="txtcolumnname" Text='<%#Eval("ColumnTitle") %>' runat="server" Width="150"></asp:TextBox>
                    </td>
                    <td style="width:15%;">
                        <asp:DropDownList ID="ddldatatype" runat="server" Width="160">
                        </asp:DropDownList>
                    </td>
                    <td style="width:15%;">
                        <asp:DropDownList ID="ddlexamples" runat="server" Width="160">
                            <asp:ListItem Text="test" Value="2"></asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td style="width:15%;">
                        <asp:TextBox ID="txtoptions" Text='<%#Eval("Options") %>' runat="server" Width="150"></asp:TextBox>
                    </td>
                    <td style="width:25%;">
                        <asp:CheckBox ID="chkdel" runat="server" />
                    </td>
                </tr>
            </ItemTemplate>
            <AlternatingItemTemplate>
                <tr style="background-color: #EFEFEF">
                    <td>
                      <asp:Label ID="txtorder" Text='<%#Eval("OrderNo") %>' runat="server"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtcolumnname" Text='<%#Eval("ColumnTitle") %>' runat="server" Width="150"></asp:TextBox>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddldatatype" runat="server" Width="160">
                        </asp:DropDownList>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlexamples" runat="server" Width="160">
                            <asp:ListItem Text="test" Value="2"></asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td>
                        <asp:TextBox ID="txtoptions" Text='<%#Eval("Options") %>' runat="server" Width="150"></asp:TextBox>
                    </td>
                    <td>
                        <asp:CheckBox ID="chkdel" runat="server" />
                    </td>
                </tr>
            </AlternatingItemTemplate>
        </asp:ListView>
    </div>

这篇关于列表视图中的头固定在asp.net滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆