各位前端大佬有个表格问题想请教
- 0次
- 2021-08-20 12:18:33
- idczone
最近才开始搞 web 前端开发。学的跌跌撞撞,有个问题想请教大佬。、
问题背景:(不知道为啥不能传图,所以只好文字描述了)
1.浏览器为 chrome 桌面最新版,暂时不考虑其他浏览器
2.使用了 jquery,和 jsGrid 表格控件。
3.想做一个具有翻页,按照标题纬度可排序的动态表格。表格的数据是从服务器上查回来的花名册,是可以变化的。
想用表格来显示数据。每页假如显示 6 行数据吧。想点击行时,行可以展开,同时显示上该行对应数据的更多的信息。这样因为某行展开了,所以这一页的实际显示数据的数量就少了一个,页码总数可能会变化。
jsGrid 控件无法实现点击行展开,被难住了。
大佬们有啥替代表格控件可以实现这个想法么?
或者有其他更好的展示详情的交互方式也可以。ui 也说了,这样点击展开,页码变来变去也不好。可是触摸屏,不知道还有啥更好的显示详情信息的方式啦。
为了更简单的实现,说可以考虑不做分页了,滚动条滚到底,可是还是想看看能不能实现,不行的话再降低要求。
谢谢大佬们了,给指条明路。
怎么可能少一行呢?你的需求是点击行显示更多内容,无非是这一行高度变化。 另外,个人建议学习 js 框架如 vue , 处理各种数据形态 游刃有余…
可能是你不小心给表格的父元素设置了固定高度和 overflow: hidden,这样,多了一行,那么最底下那一行就被遮住了,看不见了。
建议可以打开 f12,看一看"Elements"选项卡中的 dom 结构是否如你预期的那样,如果不是,再找其他原因。
善用 f12,很多问题都可以迎刃而解的,加油!
http://jsfiddle.net/ , http://jsbin.com/ 等可以在线展示代码的可以把问题描述的更清楚。
如果没用 react 和 vue,还是 jquery 的情况下,建议还是用 bootstrap 吧,排班布局要省心的多,表格也可以换成 booststrap 相关的,例如 bootstrap-table
http://www.datatables.club/example/api/row_details.html
DataGrid 内嵌表单吧?,你可能需要一些比较强大的 web 控件。
http://miniui.com/demo/#src=datagrid/inline_detailform.html
这是 API,
http://miniui.com/docs/api/index.html#ui=datagrid
你可以先去各种 UI 框架的 table 组件去看,有没有符合你的效果的。
碰见这种上网上的少的人提需求也是很头疼,凭什么点击展开一行页码还要变化,把表格撑高了滚动展示不就好了吗,点击展示更多,没做过 jq 版的,如果框架不提供,就自己写点击事件把需要展示的内容拼接在 dom 里 append 到点击元素的后面
不好意思 好久没上来 后来没用这个控件 因为表格比较简单 最后自己用 div 实现的效果
大神们说的很多,要自己多研究研究 web 开发啦,目前还处于懵新状态