Прокрутка в элементе управления 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

Надеюсь, этот JavaScript-код полезен для вас ...

Ваш Gridview

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

На странице aspx javascript для прокрутки. Поместите этот сценарий в клетки.

   <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

Answer 3

Может быть, вы можете попробовать мое решение. Это может быть исправлено заголовок и столбец в gridview.

GridViewScroll с jQuery