V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
glacier2002
V2EX  ›  程序员

[深夜求教] 我想做一个网页表格显示数据,数据每 5s 自动更新一次数据,求赐教

  •  1
     
  •   glacier2002 · 2017-11-01 00:44:30 +08:00 · 5908 次点击
    这是一个创建于 2566 天前的主题,其中的信息可能已经有所发展或是发生改变。

    小弟从嵌入式 c 开始,慢慢的学了点 go 语言做后台服务,现在前端搞不定。 我想做一个网页表格显示数据,数据每 5s 自动更新一次数据,求赐教

    1. 表格的行与列是动态的,根据数据库 /或者 api 获取的配置,展现的行与列的数目可动态调整
    2. 表格的行与列可能有点多,能否做的页面滚动时(左右上下滚动),表格的首行 /首列锁定不动,类似于 excel 的首行首列冻结
    3. 鼠标放在某一个单元时,可以半透明的展示此单元格的更多信息,比如单元格名称,描述,参考信息等,数据从后台 API 读取
    4. 表格数据从后台服务器读取,数据每个一段时间更新一次
    24 条回复    2018-03-23 19:37:28 +08:00
    blessyou
        1
    blessyou  
       2017-11-01 08:02:06 +08:00 via Android
    这个肯定可以搞定的
    kangkang
        2
    kangkang  
       2017-11-01 08:11:23 +08:00 via iPhone
    Django ~
    glacier2002
        3
    glacier2002  
    OP
       2017-11-01 08:11:47 +08:00
    @blessyou 求方法赐教,用什么框架,有没有例程?
    glacier2002
        4
    glacier2002  
    OP
       2017-11-01 08:13:26 +08:00
    @kangkang 后台已经用 golang 的 beego 框架写了
    meszyouh
        5
    meszyouh  
       2017-11-01 08:16:48 +08:00
    用 vue 吧 简单暴力
    coolair
        6
    coolair  
       2017-11-01 08:24:16 +08:00 via iPhone
    楼主看看 layui 的 table
    blessyou
        7
    blessyou  
       2017-11-01 08:24:22 +08:00 via Android
    @glacier2002 你要找现成的 vue 的 elment ui 就有一个 table 系列组件 应该符合你要求
    glacier2002
        8
    glacier2002  
    OP
       2017-11-01 08:26:11 +08:00
    @meszyouh 看起来好像不错,我去学习一下
    @blessyou 谢谢
    glacier2002
        9
    glacier2002  
    OP
       2017-11-01 08:35:55 +08:00
    @coolair 好的,谢谢
    askfilm
        10
    askfilm  
       2017-11-01 08:56:15 +08:00   ❤️ 2
    这就是一个 定时 ajax 就能解决的问题, 你们偏要把问题复杂化, 强行各种框架.....
    alwayshere
        11
    alwayshere  
       2017-11-01 09:04:01 +08:00
    如果不会写 ajax 的话,用 meta refresh 简单暴力
    php01
        12
    php01  
       2017-11-01 09:18:52 +08:00
    @askfilm 这你就不懂了,大部份程序员最佩服的不是将问题简化,而是将一个简单的问题,复杂到其他人看不懂,这也是他们最骄傲的品质。
    zbl430
        13
    zbl430  
       2017-11-01 09:22:54 +08:00
    这就是一个 定时 ajax 就能解决的问题, 你们偏要把问题复杂化, 强行各种框架..... +11111
    blessyou
        14
    blessyou  
       2017-11-01 09:33:54 +08:00
    我倒要看看,楼上的各位怎么用一个 ajax 定时做到楼主描述的功能,你们以为楼主不会用 ajax ?
    wampyl
        15
    wampyl  
       2017-11-01 09:34:06 +08:00
    有大佬详给个关键词吗?有几种实现方式?如果数据较多 ajax 请求较频繁,会不会卡?
    yulitian888
        16
    yulitian888  
       2017-11-01 09:40:47 +08:00
    表格的行与列是动态的,根据数据库 /或者 api 获取的配置,展现的行与列的数目可动态调整
    --可以上 Vue+Element,或者 jquery+各种插件


    表格的行与列可能有点多,能否做的页面滚动时(左右上下滚动),表格的首行 /首列锁定不动,类似于 excel 的首行首列冻结
    --同上


    鼠标放在某一个单元时,可以半透明的展示此单元格的更多信息,比如单元格名称,描述,参考信息等,数据从后台 API 读取
    --同步加载(全部表格数据,含“更多信息”)之后,js 判断条件显示
    --用 ajax 异步加载“更多信息”,但是注意鼠标悬停是很容易在鼠标晃动时连续发出大量 ajax 请求的


    表格数据从后台服务器读取,数据每个一段时间更新一次
    --setTimeout 定时请求数据,但是对服务器可能造成较大压力,因为网站访客可能很多人都在一起请求
    --关键字,服务器端推送 /长连接 /推送,如 signalR 等框架可提供
    glacier2002
        17
    glacier2002  
    OP
       2017-11-01 10:26:11 +08:00
    @wampyl 服务端,我测试过压力, 并发量还能够承受预期
    glacier2002
        18
    glacier2002  
    OP
       2017-11-01 10:26:52 +08:00
    @zbl430
    @askfilm
    感谢批评
    zbl430
        19
    zbl430  
       2017-11-01 11:59:45 +08:00
    我觉得 sockt.io 也是符合楼主要求的
    https://socket.io/
    whypool
        20
    whypool  
       2017-11-01 12:14:28 +08:00
    setInterval(function () {
    $.ajax();
    }, 3000);
    glacier2002
        21
    glacier2002  
    OP
       2017-11-01 12:17:51 +08:00
    @yulitian888
    非常感谢如此详细的分析


    鼠标放在某一个单元时,可以半透明的展示此单元格的更多信息,比如单元格名称,描述,参考信息等,数据从后台 API 读取
    --同步加载(全部表格数据,含“更多信息”)之后,js 判断条件显示
    --用 ajax 异步加载“更多信息”,但是注意鼠标悬停是很容易在鼠标晃动时连续发出大量 ajax 请求的


    后台的 api 接口其实是把更多信息反馈回来了,只是在表格显示,只显示其中一部分。
    待鼠标晃动时,调用缓存的数据就好了。
    hnpyhyz
        22
    hnpyhyz  
       2017-11-01 12:45:14 +08:00
    看到题目首先想到的就是 ajax, 进来看框架名字花了眼...
    gwind
        23
    gwind  
       2017-11-01 23:47:18 +08:00
    估计需要 1 年时间入坑。想快速完成任务(HTML/CSS 应该已经具备),可以试试了解下:
    - JQuery 实现最简单( JS 语法都不需要学习,看看实例改改就行)
    - ReactJS (NodeJS/npm 需要了解下,JS/ES6 需要好好学习下)可以比较流行 /彻底解决需求
    glacier2002
        24
    glacier2002  
    OP
       2018-03-23 19:37:28 +08:00 via iPhone
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1649 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 16:51 · PVG 00:51 · LAX 08:51 · JFK 11:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.