V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
xjepiaojiangu
V2EX  ›  JavaScript

各位前端大佬有个表格问题想请教

  •  
  •   xjepiaojiangu · 2019-12-03 23:30:02 +08:00 · 3465 次点击
    这是一个创建于 1821 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近才开始搞 web 前端开发。学的跌跌撞撞,有个问题想请教大佬。、
    问题背景:(不知道为啥不能传图,所以只好文字描述了)
    1.浏览器为 chrome 桌面最新版,暂时不考虑其他浏览器
    2.使用了 jquery,和 jsGrid 表格控件。
    3.想做一个具有翻页,按照标题纬度可排序的动态表格。表格的数据是从服务器上查回来的花名册,是可以变化的。
    想用表格来显示数据。每页假如显示 6 行数据吧。想点击行时,行可以展开,同时显示上该行对应数据的更多的信息。这样因为某行展开了,所以这一页的实际显示数据的数量就少了一个,页码总数可能会变化。
    jsGrid 控件无法实现点击行展开,被难住了。

    大佬们有啥替代表格控件可以实现这个想法么?
    或者有其他更好的展示详情的交互方式也可以。ui 也说了,这样点击展开,页码变来变去也不好。可是触摸屏,不知道还有啥更好的显示详情信息的方式啦。
    为了更简单的实现,说可以考虑不做分页了,滚动条滚到底,可是还是想看看能不能实现,不行的话再降低要求。

    谢谢大佬们了,给指条明路。
    11 条回复    2020-02-23 06:52:00 +08:00
    jss
        1
    jss  
       2019-12-04 08:30:49 +08:00 via iPhone
    怎么可能少一行呢?你的需求是点击行显示更多内容,无非是这一行高度变化。 另外,个人建议学习 js 框架如 vue , 处理各种数据形态 游刃有余…
    xiaoming1992
        2
    xiaoming1992  
       2019-12-04 09:16:35 +08:00
    可能是你不小心给表格的父元素设置了固定高度和 overflow: hidden,这样,多了一行,那么最底下那一行就被遮住了,看不见了。

    建议可以打开 f12,看一看"Elements"选项卡中的 dom 结构是否如你预期的那样,如果不是,再找其他原因。
    xiaoming1992
        3
    xiaoming1992  
       2019-12-04 09:17:58 +08:00
    善用 f12,很多问题都可以迎刃而解的,加油!
    leefly
        4
    leefly  
       2019-12-04 09:23:47 +08:00
    http://jsfiddle.net/ , http://jsbin.com/ 等可以在线展示代码的可以把问题描述的更清楚。
    beFreedom
        5
    beFreedom  
       2019-12-04 09:23:56 +08:00
    如果没用 react 和 vue,还是 jquery 的情况下,建议还是用 bootstrap 吧,排班布局要省心的多,表格也可以换成 booststrap 相关的,例如 bootstrap-table
    boyxy120
        6
    boyxy120  
       2019-12-04 09:42:10 +08:00
    http://www.datatables.club/example/api/row_details.html
    w292614191
        7
    w292614191  
       2019-12-04 09:47:03 +08:00
    DataGrid 内嵌表单吧?,你可能需要一些比较强大的 web 控件。
    http://miniui.com/demo/#src=datagrid/inline_detailform.html
    w292614191
        8
    w292614191  
       2019-12-04 09:50:10 +08:00
    Fntys
        9
    Fntys  
       2019-12-04 09:52:08 +08:00
    你可以先去各种 UI 框架的 table 组件去看,有没有符合你的效果的。
    Frank520
        10
    Frank520  
       2019-12-04 10:03:26 +08:00
    碰见这种上网上的少的人提需求也是很头疼,凭什么点击展开一行页码还要变化,把表格撑高了滚动展示不就好了吗,点击展示更多,没做过 jq 版的,如果框架不提供,就自己写点击事件把需要展示的内容拼接在 dom 里 append 到点击元素的后面
    xjepiaojiangu
        11
    xjepiaojiangu  
    OP
       2020-02-23 06:52:00 +08:00
    @All 不好意思 好久没上来 后来没用这个控件 因为表格比较简单 最后自己用 div 实现的效果
    大神们说的很多,要自己多研究研究 web 开发啦,目前还处于懵新状态
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1051 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:10 · PVG 06:10 · LAX 14:10 · JFK 17:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.