jquery - VB .net 固定标题和 XY 可滚动 ListView 与 JQUERY/JavaScript 更新

Question

我有一个巨大的 ListView，比如页面中间的一个 DIV 中的 30 列，我需要一个固定的标题，并且我必须能够在 x 轴上滚动才能看到我的所有列。标题当然应该固定在顶部，并且每个标题列必须与每一列对齐。

注意：我使用的是 MasterPage。并且 ListView 在另一个 Contentpage 中。

我找到了我正在寻找的确切脚本和 css，但无法使其适应我的应用程序。我不断收到 Jscript 对象错误。我不知道将脚本的哪一部分放在哪里，所以它可以与 asp .nets masterpage dynamics 一起使用

这是我想在我的应用程序中实现的内容：这就是我需要的 http://jsfiddle.net/dkkBP/38/

我的内容页面中的 aspx 代码与 jsfiddle 中的代码基本相同

一旦它与表格一起使用，我会将其调整为我的列表视图

此内容页面中没有代码隐藏，我在 aspx 页面中使用与 jsfiddle 中相同的 html。

这是我的 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 中没有任何用处。

提前谢谢。我已经失去了 2.5 天的时间。我的老板很糟糕，一个固定的标题开始花费很多钱，请帮助。

score 0 · Accepted Answer

经过 4 天和大量测试后，我终于成功了。通过 Nuget 将 JScrollPane 安装到您的 Visual Studio 项目中

一切都必须在内容页面中发生：脚本和调用

这是要粘贴到任何内容页面中的脚本。

 <!-- 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;
  }

这就是如何在asp页面中使用它

           <!--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--%>

score 0 · Accepted Answer

这里有一个错误：

  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);
}

jquery - VB .net 固定标题和 XY 可滚动 ListView 与 JQUERY/JavaScript 更新

2 回答 2

Related

Reference