none
在GridView中如何实现数据行自动循环滚动 RRS feed

答案

  • <%@ Page Language="C#" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <script runat="server"
      System.Data.DataView CreateDataSourceByXianhuiMeng() 
      { 
        System.Data.DataTable dt = new System.Data.DataTable(); 
        System.Data.DataRow dr; 
        dt.Columns.Add(new System.Data.DataColumn("学生班级", typeof(System.String))); 
        dt.Columns.Add(new System.Data.DataColumn("学生姓名", typeof(System.String))); 
        dt.Columns.Add(new System.Data.DataColumn("语文", typeof(System.Decimal))); 
        dt.Columns.Add(new System.Data.DataColumn("数学", typeof(System.Decimal))); 
        dt.Columns.Add(new System.Data.DataColumn("英语", typeof(System.Decimal))); 
        dt.Columns.Add(new System.Data.DataColumn("计算机", typeof(System.Decimal))); 
     
        for (int i = 0; i < 30; i++) 
        { 
          System.Random rd = new System.Random(Environment.TickCount * i); ; 
          dr = dt.NewRow(); 
          dr[0] = "班级" + i.ToString(); 
          dr[1] = "【孟子E章】" + i.ToString(); 
          dr[2] = System.Math.Round(rd.NextDouble() * 100, 2); 
          dr[3] = System.Math.Round(rd.NextDouble() * 100, 2); 
          dr[4] = System.Math.Round(rd.NextDouble() * 100, 2); 
          dr[5] = System.Math.Round(rd.NextDouble() * 100, 2); 
          dt.Rows.Add(dr); 
        } 
        System.Data.DataView dv = new System.Data.DataView(dt); 
        return dv; 
      } 
     
      protected void Page_Load(object sender, EventArgs e) 
      { 
        g.DataSource = this.CreateDataSourceByXianhuiMeng(); 
        g.DataBind(); 
      } 
    </script> 
     
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
      <title></title
      <style type="text/css"
        .blk_02 
        { 
          margin-top: 4px; 
        } 
        .blk_02 .table_title table 
        { 
          border-left: 1px solid #b3d3ec; 
          border-top: 1px solid #b3d3ec; 
          background: #e0f0fd; 
          color: #5198cc; 
        } 
        .blk_02 .table_title table th 
        { 
          border-right: 1px solid #b3d3ec; 
          border-bottom: 1px solid #b3d3ec; 
          height: 24px; 
          font-weight: normal; 
          text-align: center; 
        } 
        .blk_02 .table_data 
        { 
          height: 100px; 
          overflow: auto; 
        } 
        .blk_02 .table_data table 
        { 
          border-left: 1px solid #b3d3ec; 
        } 
        .blk_02 .table_data table td 
        { 
          border-right: 1px solid #b3d3ec; 
          border-bottom: 1px solid #b3d3ec; 
          height: 24px; 
          font-weight: normal; 
          text-align: center; 
        } 
      </style> 
    </head> 
    <body> 
      <form id="form1" runat="server"
      <div class="blk_02" id="chg"
        <div class="table_title"
          <table width="885" cellspacing="0"
            <tbody> 
              <tr> 
                <th width="20%"
                  姓名 
                </th> 
                <th width="20%"
                  班级 
                </th> 
                <th width="60%"
                  语文 
                </th> 
              </tr> 
            </tbody> 
          </table> 
        </div> 
        <div class="table_data" id="demo"
          <div id="demo1"
            <asp:GridView ID="g" runat="server" AutoGenerateColumns="false" ShowHeader="false" 
              Font-Size="12px" CellPadding="3" Width="885"
              <Columns> 
                <asp:TemplateField ItemStyle-Width="20%"
                  <ItemTemplate> 
                    <%#Eval("学生班级")%> 
                  </ItemTemplate> 
                </asp:TemplateField> 
                <asp:TemplateField ItemStyle-Width="20%"
                  <ItemTemplate> 
                    <%#Eval("学生姓名") %> 
                  </ItemTemplate> 
                </asp:TemplateField> 
                <asp:TemplateField ItemStyle-Width="60%"
                  <ItemTemplate> 
                    <%#Eval("语文") %> 
                  </ItemTemplate> 
                </asp:TemplateField> 
              </Columns> 
            </asp:GridView> 
          </div> 
        </div> 
      </div> 
     
      <script> 
        var speed = 30 
        function Marquee() { 
          if (document.getElementById("demo").scrollTop >= document.getElementById("demo1").offsetHeight - document.getElementById("demo").offsetHeight) { 
            document.getElementById("demo").scrollTop = 0
          } else { 
            document.getElementById("demo").scrollTop++ 
          } 
        } 
        var MyMar = setInterval(Marquee, speed) 
        document.getElementById("demo").onmouseover = function() { clearInterval(MyMar) } 
        document.getElementById("demo").onmouseout = function() { MyMar = setInterval(Marquee, speed) }  
      </script> 
     
      </form> 
    </body> 
    </html> 
     


    孟宪会
    2009年3月27日 9:19
    版主

全部回复

  • 这个很简单。你要知道,GridView最终生成的是表格。将下面代码中的表格部分换成你的GridView就可以了。
    <html> 
    <head> 
    <style type="text/css"
    .blk_02{margin-top:4px;} 
    .blk_02 .table_title table{border-left:1px solid #b3d3ec;border-top:1px solid #b3d3ec;background:#e0f0fd;color:#5198cc;} 
    .blk_02 .table_title table th{border-right:1px solid #b3d3ec;border-bottom:1px solid #b3d3ec;height:24px;font-weight:normal;text-align:center;} 
    .blk_02 .table_data{height:100px;overflow:auto;} 
    .blk_02 .table_data table{border-left:1px solid #b3d3ec;} 
    .blk_02 .table_data table td{border-right:1px solid #b3d3ec;border-bottom:1px solid #b3d3ec;height:24px;font-weight:normal;text-align:center;} 
     
    </style> 
    </head> 
    <body> 
    <div class="blk_02" id="chg"
                <div class="table_title"
                    <table width="885" cellspacing="0"
     
                        <tbody><tr
                            <th width="7%">姓名</th> 
                            <th width="7%">性别</th> 
                            <th width="6%">年龄</th> 
                            <th width="36%">所属地</th> 
                            <th width="46%">目前情况</th> 
     
                        </tr> 
                    </tbody></table
                </div> 
                <div class="table_data" id="demo"
                    <div id="demo1"
                        <table width="885" cellspacing="0"
                                        <tbody><tr
                                <td width="7%">王玉琴</td> 
     
                                <td width="7%">女</td> 
                                <td width="6%">56</td> 
                                <td style="text-align: left;" width="36%">&nbsp;莘庄镇小学</td> 
                                <td style="text-align: left;" width="46%">联系电话:xxx;目前:上海中山医院</td> 
                            </tr> 
                                        <tr> 
                                <td width="7%">张健</td> 
     
                                <td width="7%">男</td> 
                                <td width="6%">33</td> 
                                <td style="text-align: left;" width="36%">&nbsp;</td> 
                                <td style="text-align: left;" width="46%">联系电话:xxx;目前:北京</td> 
                            </tr> 
                                        <tr> 
                                <td width="7%">曹长青</td> 
     
                                <td width="7%">男</td> 
                                <td width="6%">17</td> 
                                <td style="text-align: left;" width="36%">&nbsp;北川中学</td> 
                                <td style="text-align: left;" width="46%">联系电话:xxx;目前:河南郑州</td> 
                            </tr> 
                                        <tr> 
                                <td width="7%">王清才</td> 
     
                                <td width="7%">男</td> 
                                <td width="6%">38</td> 
                                <td style="text-align: left;" width="36%">&nbsp;</td> 
                                <td style="text-align: left;" width="46%">联系电话:xxx;目前:安县黄土安置点</td> 
                            </tr> 
                                        <tr> 
                                <td width="7%">骆光远</td> 
     
                                <td width="7%">男</td> 
                                <td width="6%">29</td> 
                                <td style="text-align: left;" width="36%">&nbsp;四川德阳市罗江县</td> 
                                <td style="text-align: left;" width="46%">联系电话:xxx;目前:成都</td> 
                            </tr> 
                                        <tr> 
                                <td width="7%">张朋</td> 
     
                                <td width="7%">男</td> 
                                <td width="6%">28</td> 
                                <td style="text-align: left;" width="36%">&nbsp;</td> 
                                <td style="text-align: left;" width="46%">联系电话:xxxxx;目前:河南焦作人民医院5楼8号房</td> 
                            </tr> 
                                        <tr> 
                                <td width="7%">周利</td> 
     
                                <td width="7%">女</td> 
                                <td width="6%">21</td> 
                                <td style="text-align: left;" width="36%">&nbsp;</td> 
                                <td style="text-align: left;" width="46%">联系电话:xxxxx;</td> 
                            </tr> 
                                        <tr> 
                                <td width="7%">夏吉中</td> 
     
                                <td width="7%">男</td> 
                                <td width="6%">66</td> 
                                <td style="text-align: left;" width="36%">&nbsp;</td> 
                                <td style="text-align: left;" width="46%">联系电话:xxxxx;目前:四川达县麻柳</td> 
                            </tr> 
                                        <tr> 
                                <td colspan="5" style="text-align: center;"></td> 
     
                            </tr> 
                        </tbody></table
    </div>              </div>           
                </div> 
     
         
                <script> 
                var speed=30 
                function Marquee(){ 
                    if(document.getElementById("demo").scrollTop >= document.getElementById("demo1").offsetHeight - document.getElementById("demo").offsetHeight){ 
                        document.getElementById("demo").scrollTop = 0
                    }else{ 
                        document.getElementById("demo").scrollTop++ 
                    } 
                } 
                var MyMar=setInterval(Marquee,speed) 
                document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)} 
                document.getElementById("demo").onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
                </script> 
    </body> 




    孟宪会
    2009年3月27日 1:03
    版主
  • 孟老师,这个我倒是试验了,但是没有做出效果来
    不过我用<marquee></marquee>倒是基本达到了要求


    a flying bird
    2009年3月27日 6:56
  • <%@ Page Language="C#" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <script runat="server"
      System.Data.DataView CreateDataSourceByXianhuiMeng() 
      { 
        System.Data.DataTable dt = new System.Data.DataTable(); 
        System.Data.DataRow dr; 
        dt.Columns.Add(new System.Data.DataColumn("学生班级", typeof(System.String))); 
        dt.Columns.Add(new System.Data.DataColumn("学生姓名", typeof(System.String))); 
        dt.Columns.Add(new System.Data.DataColumn("语文", typeof(System.Decimal))); 
        dt.Columns.Add(new System.Data.DataColumn("数学", typeof(System.Decimal))); 
        dt.Columns.Add(new System.Data.DataColumn("英语", typeof(System.Decimal))); 
        dt.Columns.Add(new System.Data.DataColumn("计算机", typeof(System.Decimal))); 
     
        for (int i = 0; i < 30; i++) 
        { 
          System.Random rd = new System.Random(Environment.TickCount * i); ; 
          dr = dt.NewRow(); 
          dr[0] = "班级" + i.ToString(); 
          dr[1] = "【孟子E章】" + i.ToString(); 
          dr[2] = System.Math.Round(rd.NextDouble() * 100, 2); 
          dr[3] = System.Math.Round(rd.NextDouble() * 100, 2); 
          dr[4] = System.Math.Round(rd.NextDouble() * 100, 2); 
          dr[5] = System.Math.Round(rd.NextDouble() * 100, 2); 
          dt.Rows.Add(dr); 
        } 
        System.Data.DataView dv = new System.Data.DataView(dt); 
        return dv; 
      } 
     
      protected void Page_Load(object sender, EventArgs e) 
      { 
        g.DataSource = this.CreateDataSourceByXianhuiMeng(); 
        g.DataBind(); 
      } 
    </script> 
     
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
      <title></title
      <style type="text/css"
        .blk_02 
        { 
          margin-top: 4px; 
        } 
        .blk_02 .table_title table 
        { 
          border-left: 1px solid #b3d3ec; 
          border-top: 1px solid #b3d3ec; 
          background: #e0f0fd; 
          color: #5198cc; 
        } 
        .blk_02 .table_title table th 
        { 
          border-right: 1px solid #b3d3ec; 
          border-bottom: 1px solid #b3d3ec; 
          height: 24px; 
          font-weight: normal; 
          text-align: center; 
        } 
        .blk_02 .table_data 
        { 
          height: 100px; 
          overflow: auto; 
        } 
        .blk_02 .table_data table 
        { 
          border-left: 1px solid #b3d3ec; 
        } 
        .blk_02 .table_data table td 
        { 
          border-right: 1px solid #b3d3ec; 
          border-bottom: 1px solid #b3d3ec; 
          height: 24px; 
          font-weight: normal; 
          text-align: center; 
        } 
      </style> 
    </head> 
    <body> 
      <form id="form1" runat="server"
      <div class="blk_02" id="chg"
        <div class="table_title"
          <table width="885" cellspacing="0"
            <tbody> 
              <tr> 
                <th width="20%"
                  姓名 
                </th> 
                <th width="20%"
                  班级 
                </th> 
                <th width="60%"
                  语文 
                </th> 
              </tr> 
            </tbody> 
          </table> 
        </div> 
        <div class="table_data" id="demo"
          <div id="demo1"
            <asp:GridView ID="g" runat="server" AutoGenerateColumns="false" ShowHeader="false" 
              Font-Size="12px" CellPadding="3" Width="885"
              <Columns> 
                <asp:TemplateField ItemStyle-Width="20%"
                  <ItemTemplate> 
                    <%#Eval("学生班级")%> 
                  </ItemTemplate> 
                </asp:TemplateField> 
                <asp:TemplateField ItemStyle-Width="20%"
                  <ItemTemplate> 
                    <%#Eval("学生姓名") %> 
                  </ItemTemplate> 
                </asp:TemplateField> 
                <asp:TemplateField ItemStyle-Width="60%"
                  <ItemTemplate> 
                    <%#Eval("语文") %> 
                  </ItemTemplate> 
                </asp:TemplateField> 
              </Columns> 
            </asp:GridView> 
          </div> 
        </div> 
      </div> 
     
      <script> 
        var speed = 30 
        function Marquee() { 
          if (document.getElementById("demo").scrollTop >= document.getElementById("demo1").offsetHeight - document.getElementById("demo").offsetHeight) { 
            document.getElementById("demo").scrollTop = 0
          } else { 
            document.getElementById("demo").scrollTop++ 
          } 
        } 
        var MyMar = setInterval(Marquee, speed) 
        document.getElementById("demo").onmouseover = function() { clearInterval(MyMar) } 
        document.getElementById("demo").onmouseout = function() { MyMar = setInterval(Marquee, speed) }  
      </script> 
     
      </form> 
    </body> 
    </html> 
     


    孟宪会
    2009年3月27日 9:19
    版主
  • Ben.Yang 说:

    孟老师,这个我倒是试验了,但是没有做出效果来
    不过我用<marquee></marquee>倒是基本达到了要求


    a flying bird


    marquee不能实现无缝滚动

    孟宪会
    2009年3月27日 9:20
    版主