ASP.Net 如何固定 2 行 header Gridview

ASP.Net How to fixed 2 rows header Gridview

在详细介绍之前,我想提一下,我也尝试了 Whosebug 和其他的各种解决方案。但是 none 适合我的场景。所以,我提供了详细的资料。

我有一个 GridView,我想修复我的 header,但我无法修复 header,因为我的 GridView 中有 2 行 header。

我已经尝试修复 header,但我只能用 jQuery 修复 1 行 header。我需要有人帮助我,解决这个问题。因为我真的需要 2 行 header.

试试这个希望对你有帮助。

使用脚本

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/ScrollableGridPlugin.js" type="text/javascript"></script>
    <title></title>

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('#<%=GridView1.ClientID %>').Scrollable();
        }
)
</script>

GridView 部分

<Columns>
              <asp:TemplateField >
              <HeaderTemplate>
        <table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
  <td>Column 1</td>
  <td>Column 2</td>
</tr>
<tr>
  <td>Column 1</td>
  <td>Column 2</td>
</tr>
</table>

      </HeaderTemplate> 
                <ItemTemplate>
        <td><%# Eval("Column 1")%></td>
        <td><%# Eval("Column 2")%></td>
      </ItemTemplate>
            </asp:TemplateField>
           </Columns>

如果您观察到上面的代码,我在代码的 header 部分添加了 jquery-1.4.1.min.js 和 ScrollableGridPlugin.js 脚本文件,您需要下载这些脚本文件。通过使用这些文件,我们可以在固定位置管理 gridview header。

您可以将 GridViewScroll 与 jQuery 插件一起使用,它灵活且易于使用。

以下是有关如何应用它的示例:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript" /> src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" />
    <script type="text/javascript" src="../Scripts/gridviewScroll.min.js" />

 <script type="text/javascript"> 
    $(document).ready(function () { 
        gridviewScroll(); 
    }); 
    function gridviewScroll() { 
        $('#GridView1').gridviewScroll({ 
            width: 700, 
            height: 330, 
            freezesize: 2, 
            arrowsize: 30, 
            headerrowcount: 2 
        }); 
    } 
</script> 

<asp:gridView ID="GridView1" runat="server" />

请注意,您可以通过更改 gridviewScroll() 函数中的 headerrowcount 来控制修复多少行 headers。

更多信息请访问http://gridviewscroll.aspcity.idv.tw/

希望这对您有所帮助。