滚动gridview控件

Question

我之前已经问过这个问题，但没有得到任何正确答案。

我正在使用Vb.net进行编码。我有一个网格视图控件，如果sql查询中的值溢出，我想引入一个垂直滚动条。

我该如何解决？我相信这个

有一个javascript代码

Answer 1

GridView inside <div > HTML tag
To produce GridView scrollbars with div tag, use this code:

<div style="width:100%; height:300; overflow:auto;">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>

GridView inside Panel Control
To create GridView scrollbars with a little help of Panel control, use this code:

<asp:Panel ID="Panel1" runat="server" ScrollBars="Both" Height="300" Width="100%">
 <asp:GridView ID="GridView1" runat="server">
 </asp:GridView>
</asp:Panel>

http://www.beansoftware.com/ASP.NET-FAQ/GridView-ScrollBars.aspx

Answer 2

也许你可以尝试我的解决方案。它可以在gridview中修复标题和列。

GridViewScroll with jQuery

Answer 3

希望这个javascript代码对您有所帮助......

您的Gridview

<asp:GridView ID="grdProducts" runat="server">
 </asp:GridView>

在aspx页面上javascript进行滚动。将此脚本放入tages。

   <script type="text/javascript">

        $(document).ready(function () {
            $('#<%=grdProducts.ClientID %>').Scrollable({
                ScrollHeight: 300,
                IsInUpdatePanel: true
            });
        });
    </script>

Javascript文件代码

function MakeScrollable(a, b) { var c = a.offsetWidth; var d = a.offsetHeight; var e = new Array; for (var f = 0; f < a.getElementsByTagName("TH").length; f++) { e[f] = a.getElementsByTagName("TH")[f].offsetWidth } a.parentNode.appendChild(document.createElement("div")); var g = a.parentNode; var h = document.createElement("table"); for (f = 0; f < a.attributes.length; f++) { if (a.attributes[f].specified && a.attributes[f].name != "id") { h.setAttribute(a.attributes[f].name, a.attributes[f].value) } } h.style.cssText = a.style.cssText; h.style.width = c + "px"; h.appendChild(document.createElement("tbody")); h.getElementsByTagName("tbody")[0].appendChild(a.getElementsByTagName("TR")[0]); var i = h.getElementsByTagName("TH"); var j = a.getElementsByTagName("TR")[0]; for (var f = 0; f < i.length; f++) { var k; if (e[f] > j.getElementsByTagName("TD")[f].offsetWidth) { k = e[f] } else { k = j.getElementsByTagName("TD")[f].offsetWidth } i[f].style.width = parseInt(k - 3) + "px"; j.getElementsByTagName("TD")[f].style.width = parseInt(k - 3) + "px" } g.removeChild(a); var l = document.createElement("div"); l.appendChild(h); g.appendChild(l); if (b.Width > 0) { c = b.Width } var m = document.createElement("div"); if (parseInt(d) > b.ScrollHeight) { c = parseInt(c) + 17 } m.style.cssText = "overflow:auto;height:" + b.ScrollHeight + "px;width:" + c + "px"; m.appendChild(a); g.appendChild(m) } (function (a) { a.fn.Scrollable = function (b) { var c = { ScrollHeight: 300, Width: 0, IsInUpdatePanel: false }; var b = a.extend(c, b); return this.each(function () { var c = a(this).get(0); var d = c.id; MakeScrollable(c, b); if (b.IsInUpdatePanel) { var e = Sys.WebForms.PageRequestManager.getInstance(); if (e != null) { e.add_endRequest(function (c, e) { MakeScrollable(a("#" + d).get(0), b) }) } } }) } })(jQuery);

此代码在我的应用程序中运行...如果它不起作用你需要最新的Jquery文件然后下载jquery-1.4.1.min.js