设计观察05-设计中表格说明汇总

表格主要涉及搜索，批量操作按钮，表格内操作按钮，表格内容。记录下工作中遇到的对表格说明。

1.搜索的触发。搜索的触发主要是搜索框和筛选标签，搜索框的触发有两种情况，实时触发和点击搜索按钮（或者 enter 键）进行触发；筛选标签的触发方式大都采用实时触发；

2.批量操作按钮的使用。批量操作按钮和表格首列的 checkbox 密切相关，批量操作时除正常可进行批量操作的情况外会遇到如下特殊情况：

在未选中数据的情况下点击批量操作按钮：一是在不选中数据时该按钮 disable不可点击，二是允许点击，点击后弹出“请至少选择一条数据”的非模态提示，三是在未选中数据的情况下该操作按钮不显示。通常情况下，为了告知用户目前存在的操作并明确显示出错原因会选择允许点击然后报错的情况；

被选中的数据中全部不能进行该操作：如果选择上一条的第一种方案，则该按钮仍旧 disable，如果是第二种方案，则模态提示“选中的数据不可进行该操作”第三种方案是该按钮仍旧不显示或者显示后若点击则模态提示“选中的数据不可进行该操作”；

被选中的数据部分不能进行该操作：通常情况下会忽略掉不可执行该操作的数据，对可执行的数据执行操作，不进行提示；

遇到需要进行操作的数据不在表格同一页的情况，如果这个场景比较频繁，则需要跨页选择表格，和普通表格翻页后选中的数据会消失不同，跨页表格被选中的数据会放到页面中类似购物车的位置，因为数据已作出保存，所以翻页不会消失；

3.表格列宽。表格列的宽度有固定宽度和最小宽度。类似时间、姓名等可明确预估列宽的字段，可设置固定宽度，对不稳定宽度的列，则对其设置最小宽度。进行相关设置之后，适应大屏幕时设置最小宽度的优势是可以看得更全;

4.表格的排序规则。表格会指定一个或多个字段进行排序，保证数据有序排列;

5.表格表头和内容支持换行。某些场景中会涉及到表头可支持换行，主要是字段名过长但是字段内容较短的情况，比如“本人承担字数（万）”这个字段，表头字段名较长，但是内容较短，在设置固定宽度时，需要考虑换行的问题；表格内容正好相反，表头字段名较短，字段内容较长，例如“论文名称”这个字段。若对该列设置定宽，则需要考虑内容换行的问题；

6.表格支持合并单元格。合并单元格的样式与功能和 excel 中的合并单元格类似；

7.类似删除和审核类会对数据状态进行改变的操作，是否需要对数据立刻进行迁移或者重新排序。通常的处理方式一种是整个表格刷新，数据立刻消失或排序，另一种是数据状态发生变化，手动刷新表格后才消失，这两种情况使用都较为频繁；

8.操作数据后表格分页和排序问题。表格中涉及的搜索、刷新浏览器、删除、新增、编辑等操作会涉及表格分页保留原来位置和回到首页以及是否需要重新排序的问题。通常情况下，除重新搜索和刷新浏览器外，其他操作保留分页和搜索条件，且不触发表格排序，可以减少操作者的定位数据的成本，减少疑惑；

9.表格单元格中使用控件。单元格中可以使用 select、radio、switch等控件。使用此类控件是需要明确保存的时间，通常情况是使用操作按钮保存和实时保存；

10.表格手动排序。表格手动排序通常的处理方式一种是有一列为排序列，是一个数字输入框，输入数字后进行排序，另一种是使用排序按钮进行上移下移置顶置底操作；

11.表格列固定。当表格列过多造成表格出现横向滚动条时，有固定某列或者某几列的需求，这样在滑动滚动条时可以使得重要信息常显示；

12.表格获取数据刷新方式。通常情况下进入页面时表格会从数据库表中进行一次获取数据的刷新。但是涉及到存贮数据的表中数据来源于另一张表时，进入页面时置只会从当前的数据库表获取数据，通过触发按钮进行当前表的数据的更新，并且通常情况下只做数据的条数的增加，不做删除操作。