前端同学看过来能否看看怎么实现

[xjepiaojiangu]

一个这样的需求。

为了更好的表达，我画了一个示意图 https://www.jianguoyun.com/p/DS8pKhwQodW9BhilkrID

想把数据库中的查出来的每次考试成绩，按照考试成绩条目中的学号归并到一个个的文件夹列表显示出来。双击文件夹列表中的某个文件夹就可以进入这个学号的历次考试成绩一览表里。点击返回按钮又可以返回到文件夹列表。这种控件咋实现？目前的项目中没有用到任何架构，只有 jquery 。我以前做 wpf 的对这里不熟，有两个不知道怎么办：

1.这种文件夹列表控件我是不是完全用 div 套 div 实现哇。一行是一个 div 对象，然后分成几列，点击行对象跳到下一层级。还是有专门的 grid 什么之类的好轮子本身就支持这种模式可以拿来改改用呢？

2.文件夹列表行数多的话，我觉得得滚动加载显示吧。这个滚动加载是不是要给后端同事提提需求，比如我前端滚动到某一个值时给后端要另外的数据，一页一页的要，后端同学会不会嫌我烦？一般正规点都是咋实现的哇？

3.还有从数据库查出来的是一条条的考试信息，还要按考试信息里的学号聚合起来，做成文件夹显示，这个数据按照学号聚合是不是后端同学要做的，我只朝他要文件夹的数据就可以？用户点击文件夹某一列想正反排序时我觉得不是前端来排序，应该是想后端请求排序的结果，然后我再按照新顺序刷新一遍数据吧？还是前端直接排序，会不会前端一下子卡住哇。

谢谢大家的指教。刚做前端没多少时间，小白一个，只能为了快做项目向大家求指导。

[musi]

1. 可以参考下百度网盘之类的是怎么实现的
2. 后端分页不是正常操作么
3. 量大就后端排序

[gqbre]

字写的不错

[px920906]

现成的有 datatables https://datatables.net/examples/api/row_details.html
不过看了下文档的示例只是预先渲染然后简单控制下面一行的显示隐藏，这样的话还不如自己实现，样式什么的都好自己控制：
点击文件夹图标获取考试数据（不管是之前从 api 获取好处理好还是现调 api 获取），获取成功后在当前行下面新增一个 tr，里面只有一个 td[colspan=总表列数]，然后把考试数据渲染到这个 td 里。当然还有触发隐藏 /移除这个 tr 的逻辑。

后端返回列表分页不是应该的么，不过话说长表格还是分页好吧，性能先不说，不是每个用户都会 ctrl+f 的啊…

数据聚合谁做，emmm，你们打一架谁输了谁做。我个人倾向是后端做，除非特殊需求比如前端同一个页面还有别的地方用聚合前的数据更方便些。
排序前端“一下子卡住”是什么意思…数据就一页的话前后端都行，如果分页了那就得后端了

[seki]

1.div 之类的元素就是一个个控件，可以在上面绑定 onClick 之类的监听方法
2.数据多的时候可以按需加载，但是一般分页加载更好实现
3.你的数据量有多少？一般普通几千上万条的排序是没什么问题的。先实现再优化吧

建议立刻开始使用 vue 或者 react

[murmur]

不加过度美化的列表，几千行渲染根本不是问题，随便撸

[murmur]

我们大概试过直接用 vue 渲染 5000*10 左右的表格，一点问题都没有，至于双击只是交互问题，排序给后台个 sort，或者前台 sort 都没事，这数据真的不叫大

下面是危险组件的级别：日期选择器>下拉框>单选 /复选框，避开这些随便渲染，带 css 都不怕

[zxlzy]

排序这个一般是前端做

[PainAndLove]

@gqbre 哈哈，水都喷出来了

[AmosAlbert]

分页可以在后端做，用开源的 PageHelper 插件，排序前端就行了

[robinlovemaggie]

jQuery 足够了，别折腾那些什么乱七八糟的，不值得~

[nnnToTnnn]

@murmur 几千行的渲染不好说。 如果表格编辑中存在组件控件，就刚才你说的 日期选择器>下拉框>单选 /复选框 ，这些是不可能避免渲染的。大概 300 条数据左右的把。 具体的可以考虑虚拟滚动。 编辑器，用一个 div 来进行 cell 的定位。这样的话，加上 h5 的 work，几亿行都不是问题了。

[xjepiaojiangu]

@all 谢谢大家的指导，了解了好多。

@nnnToTnnn 图 1 的文件夹列表每一行的文件夹行头确实会有一个复选框，用户可以点击每行前的复选框选中文件夹，然后统一删除。能再具体说下您说的虚拟滚动，编辑器的思路么。不剩感谢。

另外，我的字儿就是太丑了，啊啊啊啊啊啊。没练好字。

[lisilisicn2]

比我写的好

[madpecker009]

layui 也有类似的 datatables 也有这样的

[bruceczk]

虚拟滚动可以看这个 https://tangbc.github.io/vue-virtual-scroll-list/#/fixed-size

[palmers]

我记得 ztree 挺好用的

[lithbitren]

基本上哪个框架都有这种动态表格的处理吧，分页后端，页内排序前端，大排序还是得后端。
不过如果像学生信息这种访问量数据量不大的话，后端可以直接返回所有数据，排序分页全部前端处理都可以

[nnnToTnnn]

@xjepiaojiangu 你可以看一下这个 https://rwpjs.vercel.app/components/base/table 这个是基于 React Data Grid 的封装

[duan602728596]

给你的建议：
1 、列表可以用 table 。
2 、不要用滚动加载（这种系统最好不要加一些自以为能让用户体验更好的效果）！！！用分页，每页显示固定条数。而且你的表格头还有排序。后加载的数据排序排到了前面，用户体验就很不好。而且用滚动加载，以后功能扩展，做查询什么的就会很麻烦。
3 、排序让后端来做，点击排序后，刷新当前分页的数据。
4 、建议用 vue + vue-router 来做这块的功能。原因是因为你点击文件夹，渲染了一个新的表格，这种用切换路由控制 html 渲染的方式，比你用 jquery 修改 html 改来改去方便多了。而且 vue + vue-router 还可以直接通过<script></script>接入项目。
5 、系统开发建议用 vue 替换 jquey 。你用 vue 相比用 jquery 开发，代码内少了一大堆 DOM 操作的代码。你只要改改数据，vue 自动帮你修改界面、绑定方法，岂不美哉。

[lzk50136]

这是平板吗？