积极答复者
在GridView中如何实现数据行自动循环滚动

问题
-
请问各位在GridView中能否实现数据行自动循环滚动,而列表头不动。显示效果如以下网页中最新名单的效果
http://news.sina.com.cn/z/08earthquake/search.shtml
a flying bird- 已移动 Sheng Jiang 蒋晟Moderator 2009年3月26日 20:06 客户端脚本问题 (从 ASP.NET 与 AJAX 移动到 Web 相关讨论(IIS,IE8等))
- 已移动 孟宪会Moderator 2009年3月27日 0:59 (从 Web 相关讨论(IIS,IE8等) 移动到 ASP.NET 与 AJAX)
答案
-
<%@ 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>
孟宪会- 已标记为答案 KeFang Chen 2009年3月30日 7:10
全部回复
-
这个很简单。你要知道,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%"> 莘庄镇小学</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%"> </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%"> 北川中学</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%"> </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%"> 四川德阳市罗江县</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%"> </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%"> </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%"> </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>
孟宪会 -
<%@ 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>
孟宪会- 已标记为答案 KeFang Chen 2009年3月30日 7:10