VB .net Фиксированный заголовок и XY прокручиваемый ListView с JQUERY/JavaScript-обновлением

У меня есть огромный ListView, например 30 столбцов, из-за большого количества строк в DIV в середине страницы. Мне нужно иметь фиксированный заголовок, а я должны иметь возможность прокручивать по оси x, чтобы увидеть все мои столбцы. Разумеется, заголовок должен быть зафиксирован сверху, и каждый заголовок должен совпадать с каждым столбцом.VB .net Фиксированный заголовок и XY прокручиваемый ListView с JQUERY/JavaScript-обновлением

Примечание: Я использую MasterPage. и ListView находится на другой странице содержимого.

Я нашел точный скрипт и css того, что я ищу, но не могу адаптировать его к своему приложению. Я продолжаю получать ошибку объекта Jscript. Я не знаю, куда поместить какой фрагмент сценария, так что работает с динамикой ASP .nets Masterpage

Вот что я хочу реализовать в своем приложении: Код This is what I need http://jsfiddle.net/dkkBP/38/

ASPX в моей странице содержания в основном тот же код, как и в jsfiddle

Я адаптировать его к моему ListView, когда он работает с таблицей

нет отделенного кода в этом contentpage и я использую тот же HTML на странице ASPX, как и в jsfiddle.

Это мой Site.Master.vb за кодом

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
    '----This scripts runs itself. JavaScript function in the MasterPage Page_Load() event 
    Dim someScript As New StringBuilder 
    someScript.Append("""<script type=""text/javascript"">""") 
    someScript.Append(" var headerWidth,") 
    someScript.Append("contentWidth,") 
    someScript.Append("leftWidth,") 
    someScript.Append("clientWidth,") 
    someScript.Append("documentWidth;") 
    someScript.Append(" function performWidth() {") 
    someScript.Append("$('.header').width(""99999em"");") 
    someScript.Append("headerWidth = $('.header > *').first().outerWidth(true);") 
    someScript.Append(" $('.header').width(headerWidth);") 
    someScript.Append(" $('.right').width(""99999em"");") 
    someScript.Append("contentWidth = $('.right > *').first().outerWidth(true);") 
    someScript.Append("$('.right').css({ left: leftWidth });") 
    someScript.Append(" $('.right').width(contentWidth);") 
    someScript.Append("clientWidth = window.document.body.clientWidth;") 
    someScript.Append("documentWidth = $(document).outerWidth(true);") 
    someScript.Append("};") 
    someScript.Append(" $(document).ready(function() {") 
    someScript.Append("$(document).scroll(function (e) {") 
    someScript.Append(" var ratio = (document.body.scrollLeft)/(documentWidth - clientWidth);") 
    someScript.Append("$('.header').css({ left: -(headerWidth - clientWidth) * ratio });") 
    someScript.Append("});") 
    someScript.Append("});") 
    someScript.Append("$(window).resize(function() {") 
    someScript.Append(" });") 
    someScript.Append("</script>") 
    someScript.Append("<script language='javascript'>alert('The script ran after script ran');</script>") 
    Page.ClientScript.RegisterStartupScript(Me.GetType(), "onload", someScript.ToString.Trim) 

End Sub

ничего полезно в Site.Master.aspx.

Thx заранее. Я потерял 2.5 дня на этом. Мой босс - это badtrippin. Исправленный заголовок начинает стоить много денег. Помощь Plz.

источник

2013-10-03 Lethal420

я наконец-то удалось его через 4 дня и много испытаний. Установите JScrollPane в свой визуальный проект студии через NuGet

Все должно происходить на странице контента: сценарий и вызов

Это скрипт для вставки в любой из contentpage.

<!-- jQuery direct de google --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 

    <!-- the mousewheel plugin - optional to provide mousewheel support --> 
    <script type="text/javascript" src="Scripts/jquery.mousewheel.js"></script> 

<!-- the jScrollPane script --> 
<script type="text/javascript" src="Scripts/jquery.jscrollpane.min.js"></script>

затем использовать этот сценарий

<%--Script qui ajoute un event lors de l'utilisation des scrollbar--%> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#parentFixed') 
     .bind('jsp-scroll-y', 
      function (event, scrollPositionY, isAtTop, isAtBottom) { 
       $(".headerFixed").css("top", scrollPositionY); 
      } 
     ) 
     .bind('jsp-scroll-x', 
      function (event, scrollPositionX, isAtLeft, isAtRight) { 
       $(".lefter").css("left", scrollPositionX); 
    ) 
     .jScrollPane(); 
    }); 
    // alert('I was invoked at the end of the script'); //test pour voir si le scripte roule 
</script>

это CSS необходимо

#parentFixed 
{ 

height:800px; 
background-color:#cccccc; 
overflow:auto; 
} 

.headerFixed{ 

color:White; 
background-color:green; 
font-size:20px; 
position:static; 
z-index:222; 
} 

.headerFixed table td{ 
border: 1px solid #000000 ; 
min-width: 150px; 

} 

.wrapperfixed{ 

height:600px; 
font-size:20px; 
    } 

/*Celui la ici si on voulais un header fixe vertical aligné a gauche*/ 
.wrapperfixed .lefter{ 
float:left; 
width:100px; 
height:800px; 
background-color:red; 
position:relative; 
} 

.wrapperfixed .content{ 
float:left; 
    } 

.wrapperfixed .content table td{ 

border: 1px solid #000000 ; 
min-width : 150px; 
} 

.wrapperfixed .content table th 
{ 
border: 1px solid #000000 ; 
min-width: 150px; 
    }

и это, как использовать его в осины странице

  <!--début tableau des résultats--> 

     <div id="parentFixed"> 
     <div class="headerFixed"> 
     <table id="tableHeader"> 
      <tr> 
      <td><asp:LinkButton ID="Q" runat="server"><%= getCellText("Q")%></asp:LinkButton></td> 
      <td> <asp:LinkButton ID="W" runat="server"><%= getCellText("W")%></asp:LinkButton></td> 
      <td> <asp:LinkButton ID="E" runat="server"><%= getCellText("E")%></asp:LinkButton></td> 
      <td> <asp:LinkButton ID="R" runat="server"><%= getCellText("R")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="T" runat="server"><%= getCellText("T")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="Y" runat="server"><%= getCellText("Y")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="U" runat="server"><%= getCellText("U")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="I" runat="server"><%= getCellText("I")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="O" runat="server"><%= getCellText("O")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="P" runat="server"><%= getCellText("P")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="S" runat="server"><%= getCellText("S")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="L4" runat="server"><%= getCellText("L4")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="L5" runat="server"><%= getCellText("L5")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="A" runat="server"><%= getCellText("A")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="D" runat="server"><%= getCellText("D")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="F" runat="server"><%= getCellText("F")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="G" runat="server"><%= getCellText("G")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="H" runat="server"><%= getCellText("H")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="J" runat="server"><%= getCellText("J")%></asp:LinkButton></td> 
      <td> <asp:LinkButton ID="K" runat="server"><%= getCellText("K")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="L" runat="server"><%= getCellText("L")%></asp:LinkButton></td> 
      <td> <asp:LinkButton ID="Z" runat="server"><%= getCellText("Z")%></asp:LinkButton></td> 
      <td> <asp:LinkButton ID="X" runat="server"><%= getCellText("X")%></asp:LinkButton></td> 
      <td> <asp:LinkButton ID="C" runat="server"><%= getCellText("C")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="V" runat="server"><%= getCellText("V")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="B" runat="server"><%= getCellText("B")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="N" runat="server"><%= getCellText("N")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="M" runat="server"><%= getCellText("M")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="QQ" runat="server"><%= getCellText("QQ")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="QW" runat="server"><%= getCellText("QW")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="QL" runat="server"><%= getCellText("QL")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="QE" runat="server"><%= getCellText("QE")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="QR" runat="server"><%= getCellText("QR")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="QT" runat="server"><%= getCellText("QT")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="QY" runat="server"><%= getCellText("QY")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="QU" runat="server"><%= getCellText("QU")%></asp:LinkButton></td> 
      <td><asp:LinkButton ID="COM" runat="server"><%= getCellText("COM")%></asp:LinkButton></td> 
      </tr> 
     </table> 
     </div><%--FIN HEADER FIXED--%> 
    <%--Wrapper FIXED--%> 
<div class="wrapperfixed"> 
<div class="content"><%--Content FIXED--%> 

<table> 

     <asp:ListView ID="ListView1" runat="server" EnableEventValidation="true"> 

      <ItemTemplate> 

       <tr style="background-color: <%# BgColor(Eval("A"))%>"> 
        <td width="106px"> 
         <asp:Label runat="server" ID="lb_LB1"><a href="Desk.aspx?id=<%# Eval("Q")%>"><%# Eval("Q")%></a></asp:Label> 
        </td> 
        <td width="106px"> 
         <asp:Label runat="server" ID="lb_LB2"><a href="Desk.aspx?id=<%# Eval("Q")%>"><%# Eval("W")%></A></asp:Label> 
        </td> 
        <td width="106px"> 
         <asp:Label runat="server" ID="lb_LB3"><%# Eval("E")%></asp:Label></td> 
        <td width="106px"> 
         <asp:Label runat="server" ID="lb_LB4"><%# Eval("R")%></asp:Label></td> 
        <td width="106px"> 
         <asp:Label runat="server" ID="lb_LB5"><%# Eval("T")%></asp:Label></td> 
        <td width="106px"> 
         <asp:Label runat="server" ID="lb_LB6"><%# Eval("Y")%></asp:Label></td> 
        <td width="106px"> 
         <asp:Label runat="server" ID="lb_LB7"><%# Eval("U")%></asp:Label></td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB8"><%# Eval("I")%></asp:Label></td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB9"><%# Eval("O")%></asp:Label></td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB10"><%# Eval("P")%></asp:Label></td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB12"><%# Eval("S")%></asp:Label></td> 
        <td> 
         <asp:Label runat="server" ID="Label4"><%# Eval("L4")%></asp:Label></td> 
        <td> 
         <asp:Label runat="server" ID="Label5"><%# Eval("L5")%></asp:Label></td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB11"><a href="Reservation.aspx?<%# getLink(Eval("A"), Eval("Q") , Eval("F"))%>"><%# Eval("A")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB13"><%# Eval("D")%></asp:Label></td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB14"><%# Eval("F")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB15"><%# Eval("G")%></asp:Label></td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB16"><%# Eval("H")%></asp:Label></td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB17"><%# Eval("J")%></asp:Label></td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB18"><%# Eval("K")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB19"><%# Eval("L")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB20"><%# Eval("Z")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB21"><%# Eval("X")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB22"><%# Eval("C")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB23"><%# Eval("V")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB24"><a href="Employee.aspx?id=<%# Eval("L")%>"><%# Eval("B")%></a></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB25"><a href="Employee.aspx?id=<%# Eval("L")%>"><%# Eval("N")%></a></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB26"><%# Eval("M")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB27"><%# Eval("QQ")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB28"><%# Eval("QW")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB29"><%# Eval("QL")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB30"><%# Eval("QE")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB31"><%# Eval("QR")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB32"><%# Eval("QT")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB33"><%# Eval("QY")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB34"><%# Eval("QU")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB35"><%# Eval("COM")%></asp:Label><%--Comments--%> 
        </td> 
       </tr> 

      </ItemTemplate> 

      <AlternatingItemTemplate> 

       <tr style="background-color: <%# BgColor(Eval("A"))%>"> 
        <td style="width:106px;"> 
         <asp:Label runat="server" ID="lb_LB1"><a href="Desk.aspx?id=<%# Eval("Q")%>"><%# Eval("Q")%></A></asp:Label> 
        </td> 
        <td style="width:106px;"> 
         <asp:Label runat="server" ID="lb_LB2"><a href="Desk.aspx?id=<%# Eval("Q")%>"><%# Eval("W")%></A></asp:Label> 
        </td> 
        <td style="width:106px;"> 
         <asp:Label runat="server" ID="lb_LB3"><%# Eval("E")%></asp:Label> 
        </td> 
        <td style="width:106px;"> 
         <asp:Label runat="server" ID="lb_LB4"><%# Eval("R")%></asp:Label> 
        </td> 
        <td style="width:106px;"> 
         <asp:Label runat="server" ID="lb_LB5"><%# Eval("T")%></asp:Label> 
        </td> 
        <td style="width:106px;"> 
         <asp:Label runat="server" ID="lb_LB6"><%# Eval("Y")%></asp:Label> 
        </td> 
        <td style="width:106px;"> 
         <asp:Label runat="server" ID="lb_LB7"><%# Eval("U")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB8"><%# Eval("I")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB9"><%# Eval("O")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB10"><%# Eval("P")%></asp:Label> 
        </td> 
        <%--<td><asp:Label runat="server" ID="Label1"><a href="Reservation.aspx?deskId=<%# Eval("Q")%>"><%# Eval("A")%></a></asp:Label></td>--%> 

        <td> 
         <asp:Label runat="server" ID="lb_LB12"><%# Eval("S")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="Label6"><%# Eval("L4")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="Label7"><%# Eval("L5")%></asp:Label> 
        </td> 
         <td> 
         <asp:Label runat="server" ID="lb_LB11"><a href="Reservation.aspx?<%# getLink(Eval("A"), Eval("Q") , Eval("F"))%>"><%# Eval("A")%></a></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB13"><%# Eval("D")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB14"><%# Eval("F")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB15"><%# Eval("G")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB16"><%# Eval("H")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB17"><%# Eval("J")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB18"><%# Eval("K")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB19"><%# Eval("L")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB20"><%# Eval("Z")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB21"><%# Eval("X")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB22"><%# Eval("C")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB23"><%# Eval("V")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB24"><a href="Employee.aspx?id=<%# Eval("L")%>"><%# Eval("B")%></a></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB25"><a href="Employee.aspx?id=<%# Eval("L")%>"><%# Eval("N")%></a></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB26"><%# Eval("M")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB27"><%# Eval("QQ")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB28"><%# Eval("QW")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB29"><%# Eval("QL")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB30"><%# Eval("QE")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB31"><%# Eval("QR")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB32"><%# Eval("QT")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB33"><%# Eval("QY")%></asp:Label> 
        </td> 
        <td> 
         <asp:Label runat="server" ID="lb_LB34"><%# Eval("QU")%></asp:Label> 
        </td> 
         <td> 
         <asp:Label runat="server" ID="lb_LB35"><%# Eval("COM")%></asp:Label><%--Comments--%> 
        </td> 
       </tr> 

      </AlternatingItemTemplate> 
     </asp:ListView> 

</table> 

</div><%--FIN CONTENT FIXED--%> 
</div><%--FIN WRAPPER FIXED--%> 
<div class="scrollarea"></div><%--Pour activer le javascript du jscrollpane--%> 
    </div><%--Fin ParentFixed--%>

источник

2013-10-07 20:22:07 Lethal420

ошибка здесь:

var performWidth = function() { 

    $('.header').width("99999em"); 
    headerWidth = $('.header > *').first().outerWidth(true); 
    $('.header').width(headerWidth); 
    $('.right').width("99999em"); 
    contentWidth = $('.right > *').first().outerWidth(true); 
    $('.right').css({ left: leftWidth }); 
    $('.right').width(contentWidth); 
    clientWidth = window.document.body.clientWidth; 
    documentWidth = $(document).outerWidth(true); 
}; // <-- Missing semicolon

Но вы можете просто сделать свою функцию, как это:

function performWidth() { 
    $('.header').width("99999em"); 
    headerWidth = $('.header > *').first().outerWidth(true); 
    $('.header').width(headerWidth); 
    $('.right').width("99999em"); 
    contentWidth = $('.right > *').first().outerWidth(true); 
    $('.right').css({ left: leftWidth }); 
    $('.right').width(contentWidth); 
    clientWidth = window.document.body.clientWidth; 
    documentWidth = $(document).outerWidth(true); 
}

источник

2013-10-03 20:10:01 Oliboy50

Это не сработало. Я уверен, что это потому, что masterpage vs contentpage динамика.Я, вероятно, не звоню + не помещаю скрипт в нужное место в коде – Lethal420

Эй, @ Oliboy50, я обновил свой вопрос. Теперь я вижу, что мой скрипт запущен, потому что он попадает в мое окно предупреждения. но он определенно не влияет на таблицу каким-либо образом, когда я прокручиваю – Lethal420

VB .net Фиксированный заголовок и XY прокручиваемый ListView с JQUERY/JavaScript-обновлением

ответ

Смежные вопросы