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/
希望这对您有所帮助。
在详细介绍之前,我想提一下,我也尝试了 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/
希望这对您有所帮助。