为啥我从后台查到的值在页面显示的是undefined_再谈一个管理后台列表功能应有的素质...

​大家能看到的这个号第1篇文章《无心朝政，列表功能分析下》就是讲列表功能。虽然当时写的时候特别认真，但基本是围绕“列表功能”这个广泛的词来阐述的。

最近在做一个体育赛事赛程的后台管理系统 Match-Schedule，对管理后台列表有更多的体会。所以想更通俗更细致地阐述一下，我心中一个后台管理系统的列表应该具有哪些功能。

细节太多，先来一张基础列表页面的截图，然后再来列个功能清单。

图一（这里先标记一下方便说明）：

图一用框框kuang起来的都是这个后台管理系统列表页面的组成部分，会覆盖到每一个类的列表页面。当然，远远还不止这些细节，会在后面截图也框出来说明下。

从上到下，自左至右：

1. URL 可读易懂
2. 被激活的导航栏标识 被激活的位置应该有标识或高亮，方便用户一眼识别自己点了哪
3. 整个列表的名称 html的h1标签，焦点说明
4. 当前列表数据(MetaData)元数据 当前列表共有条目数，当前页面显示了从第几条到几条
5. 页面面包屑导航 当前列表出于系统的哪个层级的位置
6. 配置当前表格的按钮 （后面单独说明）
7. 列表页面头部功能按钮 曾有很长一段时间我纠结这类按钮应该放在顶部还是底部，最终选择了在顶部。好处是不管你页面条目数量多或少，你都能在选中后直接在顶部执行，无需在条目数过多的情况下还要拉到底再操作。douying：“非常方便和好用，我就一直在用啊。”
8. 搜索框 刚需，基本每个数据表格页面都需要的，常常出没于表格功能按钮的顶部左侧或者右侧，能有`placeholder`说明一下搜索啥就更好了
9. 表头checkbox 用于用户过滤或搜索后直接全选中或全不选中当前页面的条目
10. 表头排序 table的th，字段是否可排序，当前排序的方式，如何取消排序
11. 表格内容a链接title 内容链接要带titile说明，方便用户鼠标停悬在上面的时候知道点击后会发生什么（示例：AG超玩会）
12. 每页显示多少条目的按钮（这张图不说明，下面在特别说明）
13. 列表分页 刚需，数据条目过多的时候，用户不可能分屏来查看对吧，而且程序一次性取出大量数据服务端查询会变慢，前端渲染速度会大幅下降（渲染过程中有用户浏览器停止响应的风险），建议每页显示大小在10-30。

图一的说明就这些，个人觉得每个节点都需要仔细考究的。比如字体颜色深浅，页面整体的整洁性，链接颜色，提示等等...往下说图二。

图二：

1. 选中列表剩余的数据 当前只显示了11条数据，一共47条，还有36条数据在服务器没取出来，但我需要一并选中
2. 选中条目后相关操作按钮激活 对比`图一`和`图二`。这里的按钮一个是禁点击一个是可以点击的
3. 过滤的分类 这里不算是通用功能，但既然说到了就提一下，比如用户点击了按钮，那么按钮就要高亮或激活的状态，都是为了方便用户识别
4. 被选中的表格数据 数据条目要高亮，这里截图的时候没有取消选中一些条目来做对比，阅读的朋友可以对比`图一`这里选中的条目数据是浅绿色走一波的
5. 每页显示条目数 这个曾收到相关用户的疑问。这是根据一定数据宽度动态变化的，很多后台系统是固定的，比如10,20,50,100,200这样递增。这里我是按照按钮个数计算的，根据数据一共条目计算，分摊到5个阶梯的按钮上，每页最多显示200条的限制策略

图二就这些，都是一下用户操作后页面显示的相关变化，以及提示，还有显示条目数策略等，下面图三会接着（图二-1）简单做一下说明。

图三：

当用户选中了剩余的条目，其实前端就选了这个过滤条件下的所有数据库条目了，前端给个post表单一个比如`Select_ALL="true"`的name值，这样，当操作post到后端的时候判断这个标识，以减少再次查库的过程。

图四：

列表功能刚需的搜索功能，这里我高亮了我的搜索结果，同时搜索框填充搜索值。锁定用户的搜索值，只有访问的是这个URL，那么这里就都会以这个值进行填充。搜索这边我是全文模糊匹配的，只有列表某个字段匹配到关键词就会当结果之一处理。当然，这里能够做到可选操作定位到搜索某列值就更完美了。

总结一下，综合上面的提到的可能还不够详尽的就已经有18个细节了，希望对有需要朋友有所帮助。

---

http://weixin.qq.com/r/EUyzq13E5ACbrRnI9xkD (二维码自动识别)