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

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

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

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

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/625690

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX