gridview 实现滚动了，但是内容怎么实时更新

按照孟子E章的例子改了下
我是绑定数据到gridview，可以实现上下滚动，但是怎么实现一个滚动完成后，就显示实时更新的数据呢，

例如：原数据100条滚动1到100 这期间我增加或者修改了数据，在第二次循环的时候就要事实刷新出来更新的数据或者增加了数据就从1滚动到102条，不知道这个刷新怎么改呢？
]

-------------------------------------------------------------------------------------------
后台
-------------------------------------------------------------------------------------------

public partial class _Default : System.Web.UI.Page
    {
        public OleDbConnection getConn()
        {
            string upload_file = Server.MapPath("/data/");
            string connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + System.Web.HttpContext.Current.Server.MapPath("~/data\\th.mdb") + ";Persist Security Info=False";
            OleDbConnection openac = new OleDbConnection(connstr);
            return (openac);
            //openac.Open();
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            //g.DataSource = GetData();
           // g.DataBind();
            g.DataSource = null;
            databing();

        }

        public void databing()
        {

            try
            {
                string sqlstr = "select * from fxdt";
                OleDbConnection conn = getConn();
                conn.Open();
                OleDbDataAdapter da = new OleDbDataAdapter();
                da.SelectCommand = new OleDbCommand(sqlstr, conn);
                DataSet ds = new DataSet();
                da.Fill(ds, "fxdt");
                g.DataSource = ds;
                g.DataKeyNames = new string[] { "id" };//主键
                g.DataBind();
                conn.Close();


            }
            catch (Exception e)
            {
                throw (new Exception("数据库出错:" + e.Message));
            }
        }

    }
-------------------------------------------------------------------------------------------
前台
-------------------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <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: 1000px;
      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="50px">
              目的地
            </th>
              <th width="50px">
              计划飞
            </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("hbh")%>
              </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ItemStyle-Width="20%">
              <ItemTemplate>
                <%#Eval("sfd") %>
              </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ItemStyle-Width="50px">
              <ItemTemplate>
                <%#Eval("mdd") %>
              </ItemTemplate>
            </asp:TemplateField>
               <asp:TemplateField ItemStyle-Width="50px">
              <ItemTemplate>
                <%#Eval("jhf") %>
              </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>

15 个解决方案

#1

刷新页面吧，骚年，想来signalR和js、ajax之类的目前对你来讲也太困难了

#2

引用 1 楼 starfd 的回复:

刷新页面吧，骚年，想来signalR和js、ajax之类的目前对你来讲也太困难了

-----------------------
是的，是的，嘿嘿，但是自动滚动的话，在哪里设置滚动完刷新呢？前台，还是后台？

#3

document.getElementById("demo").scrollTop = 0;
下面加个js刷新代码

#4

滚动到头的时候加个刷新吧

#5

说白了，就是一个 js滚到，判断滚动条到底部，然后通过ajax访问后台读取数据，然后拼接html到前台来展现。
http://blog.csdn.net/yafei450225664/article/details/40889057

#6

引用 5 楼 hanjun0612 的回复:

说白了，就是一个 js滚到，判断滚动条到底部，然后通过ajax访问后台读取数据，然后拼接html到前台来展现。
http://blog.csdn.net/yafei450225664/article/details/40889057

请问，这个页面我想放两个gridview 各自滚动各自的内容。能实现么？

#7

引用 1 楼 starfd 的回复:

刷新页面吧，骚年，想来signalR和js、ajax之类的目前对你来讲也太困难了

请问，这个页面我想放两个gridview 各自滚动各自的内容。能实现么？

#8

既然 document.getElementById("demo").scrollTop++ 这条语句是你写的，那么你就应该在这里扩展你的逻辑。

#9

引用 3 楼 starfd 的回复:

document.getElementById("demo").scrollTop = 0;
下面加个js刷新代码

确实可以在这里修改逻辑。不过一般来说，在加载数据时跳回“头”部去了，好像有点不合情理。

一把来说，当你在执行 document.getElementById("demo").scrollTop++ 的时候要判断是否“接近”那个 if 判断条件了，比如说按照120像素高做判断：

 if (document.getElementById("demo").scrollTop >= document.getElementById("demo1").offsetHeight - document.getElementById("demo").offsetHeight) -120;

这个条件成立就立刻异步加载新数据。在加载数据时你可以让 marquee暂停滚动，或者不暂停滚动也可以。

#10

嗯，把上面的120改为20，似乎更合理一点。离底部距离120像素就加载数据，有点早。改为20更好一下，根据你的 marquee 滚动速率来判断。

#11

引用 7 楼 ahya 的回复:

Quote: 引用 1 楼 starfd 的回复:

刷新页面吧，骚年，想来signalR和js、ajax之类的目前对你来讲也太困难了

请问，这个页面我想放两个gridview 各自滚动各自的内容。能实现么？

应该没问题

#12

引用 9 楼 sp1234 的回复:

Quote: 引用 3 楼 starfd 的回复:

document.getElementById("demo").scrollTop = 0;
下面加个js刷新代码

确实可以在这里修改逻辑。不过一般来说，在加载数据时跳回“头”部去了，好像有点不合情理。

一把来说，当你在执行 document.getElementById("demo").scrollTop++ 的时候要判断是否“接近”那个 if 判断条件了，比如说按照120像素高做判断：
 if (document.getElementById("demo").scrollTop >= document.getElementById("demo1").offsetHeight - document.getElementById("demo").offsetHeight) -120;
这个条件成立就立刻异步加载新数据。在加载数据时你可以让 marquee暂停滚动，或者不暂停滚动也可以。

-------------------------------------------------
<script>
      function myrefresh()

     {
          window.location.reload();
      }
    var speed = 30
    function Marquee() {
      if (document.getElementById("demo").scrollTop >= document.getElementById("demo1").offsetHeight - document.getElementById("demo").offsetHeight)
     {
          document.getElementById("demo").scrollTop = 0;
          myrefresh();
      }
      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>

上面这个可以实现当初始数据gridview表格超出设定的外部大小后，就在外部定义的区间内滚动，可以每滚完一次，刷新出一次新数据

但是，现在如果初始数据gridview的内容没超出外部空间，此时不滚动，这时如果后台加入数据grid表格内容超出外部空间后，还是不滚动。。

求助，怎么判断并滚动刷新呢？

#13

引用 11 楼 hanjun0612 的回复:

Quote: 引用 7 楼 ahya 的回复:

Quote: 引用 1 楼 starfd 的回复:

刷新页面吧，骚年，想来signalR和js、ajax之类的目前对你来讲也太困难了

请问，这个页面我想放两个gridview 各自滚动各自的内容。能实现么？

应该没问题

----------------
还得麻烦您下
-----------------
<script>
      function myrefresh()

     {
          window.location.reload();
      }
    var speed = 30
    function Marquee() {
      if (document.getElementById("demo").scrollTop >= document.getElementById("demo1").offsetHeight - document.getElementById("demo").offsetHeight)
     {
          document.getElementById("demo").scrollTop = 0;
          myrefresh();
      }
      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>

上面这个可以实现当初始数据gridview表格超出设定的外部大小后，就在外部定义的区间内滚动，可以每滚完一次，刷新出一次新数据

但是，现在如果初始数据gridview的内容没超出外部空间，此时不滚动，这时如果后台加入数据grid表格内容超出外部空间后，还是不滚动。。

求助，怎么判断并滚动刷新呢？

#14

引用 3 楼 starfd 的回复:

document.getElementById("demo").scrollTop = 0;
下面加个js刷新代码

#15

在滚动事件里，应该先去后台查看是否有数据更新，有的话，需要改变你的滚动条高度
document.getElementById("demo").scrollTop = 0; 因为第一次没有数据，所以滚动条被你赋值0了，你需要在重新赋值一下

#1

刷新页面吧，骚年，想来signalR和js、ajax之类的目前对你来讲也太困难了

#2

引用 1 楼 starfd 的回复:

刷新页面吧，骚年，想来signalR和js、ajax之类的目前对你来讲也太困难了

-----------------------
是的，是的，嘿嘿，但是自动滚动的话，在哪里设置滚动完刷新呢？前台，还是后台？

#3

document.getElementById("demo").scrollTop = 0;
下面加个js刷新代码

#4

滚动到头的时候加个刷新吧

#5

#6

引用 5 楼 hanjun0612 的回复:

说白了，就是一个 js滚到，判断滚动条到底部，然后通过ajax访问后台读取数据，然后拼接html到前台来展现。
http://blog.csdn.net/yafei450225664/article/details/40889057

请问，这个页面我想放两个gridview 各自滚动各自的内容。能实现么？

#7

引用 1 楼 starfd 的回复:

刷新页面吧，骚年，想来signalR和js、ajax之类的目前对你来讲也太困难了

请问，这个页面我想放两个gridview 各自滚动各自的内容。能实现么？

#8

既然 document.getElementById("demo").scrollTop++ 这条语句是你写的，那么你就应该在这里扩展你的逻辑。

#9

引用 3 楼 starfd 的回复:

document.getElementById("demo").scrollTop = 0;
下面加个js刷新代码

 if (document.getElementById("demo").scrollTop >= document.getElementById("demo1").offsetHeight - document.getElementById("demo").offsetHeight) -120;

这个条件成立就立刻异步加载新数据。在加载数据时你可以让 marquee暂停滚动，或者不暂停滚动也可以。

#10

嗯，把上面的120改为20，似乎更合理一点。离底部距离120像素就加载数据，有点早。改为20更好一下，根据你的 marquee 滚动速率来判断。

#11

引用 7 楼 ahya 的回复:

Quote: 引用 1 楼 starfd 的回复:

刷新页面吧，骚年，想来signalR和js、ajax之类的目前对你来讲也太困难了

请问，这个页面我想放两个gridview 各自滚动各自的内容。能实现么？

应该没问题

#12

引用 9 楼 sp1234 的回复:

Quote: 引用 3 楼 starfd 的回复:

document.getElementById("demo").scrollTop = 0;
下面加个js刷新代码

确实可以在这里修改逻辑。不过一般来说，在加载数据时跳回“头”部去了，好像有点不合情理。

一把来说，当你在执行 document.getElementById("demo").scrollTop++ 的时候要判断是否“接近”那个 if 判断条件了，比如说按照120像素高做判断：
 if (document.getElementById("demo").scrollTop >= document.getElementById("demo1").offsetHeight - document.getElementById("demo").offsetHeight) -120;
这个条件成立就立刻异步加载新数据。在加载数据时你可以让 marquee暂停滚动，或者不暂停滚动也可以。

#13

引用 11 楼 hanjun0612 的回复:

Quote: 引用 7 楼 ahya 的回复:

Quote: 引用 1 楼 starfd 的回复:

刷新页面吧，骚年，想来signalR和js、ajax之类的目前对你来讲也太困难了

请问，这个页面我想放两个gridview 各自滚动各自的内容。能实现么？

应该没问题

#14

引用 3 楼 starfd 的回复:

document.getElementById("demo").scrollTop = 0;
下面加个js刷新代码

秒客网

gridview 实现滚动了，但是内容怎么实时更新

15 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

相关文章