2.1筛选条件
对于筛选条件,我们一般可以分为单条件和多条件组合两种情况:
单条件筛选:一般选用能够唯一区分数据行的字段,比如最常见的编号ID(编号ID能够自增长ID或者使用UUID,来保证单条数据的唯一性);
多条件筛选:一般使用2个及两个以上的条件进行组合筛选。在条件和条件之间存在一个关联关系,叫做并且和或者,也可以用AND和OR表示。两者的差异为,AND:A条件和B条件必须同时满足;OR:A条件和B条件满足其中一个即满足;
筛选条件的形式一般有下拉选项和输入两种方式:
下拉选项:选项有单选和多选之分;多个下拉框有时会有联动效果,常见为省、市、县联动;下拉选项的条件是明确的;下拉选项可以禁用,可以有分组或者层级的情况;
文本框:一般是对文本框关输入的键字进行模糊匹配;
组合下拉选项:下拉和输入可以组成为可输可选的下拉选项,本子上还是下拉选项,只是可以输入关键字过滤相关选项;
在条件选项之后,一般会跟着一个查询按钮,用于主动触发查询事件;
2.2功能按钮
除筛选条件使用的查询按钮外,一般表格还会有新增(导入)、编辑(修改)、删除、排序、导出等功能按钮;
于数据行的操作列功能的差异:这边的按钮既能处理单条数据,也能处理多条数据;数据行的操作列只能处理当前单条数据;
从开发的角度来说,数据操作无非就是是CURD,也就是创建、更新、读取、删除功能;
创建:有单个新增和批量新增,批量新增一般用导入的方式完成;
- 一般新建操作,相关字段会有相关验证,比如必填项、数值类型、输入长度限制等等;
- 如果是导入的话会牵涉到文件的类型,文件的大小等限制;
- 更深入一点,对图片、文字等还要非法校验等功能;
更新:也就是编辑功能,基于不变的部分,部分更新数据;(比如生活中,身份证号不会变,但是可以修改姓名)
删除:也单个删除后批量删除之分;删除分为逻辑删除后物理删除,也就是我们所说的假删除和真删除,假删除是通过条件隐藏不显示,可以恢复;真删除的话,一旦删除无法恢复数据;删除数据是一件严肃的操作,一般会给操作者进行二次弹框提示,让用户再次确认。
读取:也就是数据展现,通常会有部分数据需要处理;日期时间的格式,文本过长后的折叠等(也有说法叫数据清洗);数据的展现会牵扯到另一个问题,数据的顺序问题;常见的有时间顺序,逻辑顺序,数值大小等;
读取数据需要考虑数据权限的问题;是不区分,还是不同权限看到不同数据;
在数据展示的基础上,衍生出来的功能:
文件预览:需要区分支持预览的文件类型,预览的是源文件还是转码后的文件;
上传下载:上传涉及文件类型、文件大小、文件数量等限制;下载的话单个文件直接下载、多个文件的话则用压缩包格式;以及文件加密等问题也是需要考虑的;
数据的显示还有另一种展现方式,就是到导出为本地可以查看的文件,表格对应的一般是excel文件;
数据导出:可以分为前端导出和后端导出,前端导出数据一般为所见的数据,如果需要没有展现的数据则需要后端来操作;
打印:页面上打印一般只是当前数据表格;可通过下载的文件,然后进行调整打印,这个就不受控制了;
2.3表头区
表头一般用HTML<th>标签表示,除了字体类型、字体大小和和正文内容有区别外,一般表头的背景色和也是有所区分的。
排序筛选:除了一般的默认展示顺序,数值、日期类型的数据列可以增加正序、倒序,以方便查看数据,而状态、标签的类型则可以用筛选的方式;
滚动条:
因为屏幕的限制,一屏展示的数据必定是有限的,但是想要展现的数据超出屏幕的限制,此时就需要使用滚动条;滚动条又分为横向(水平)和竖向(垂直);
滚动条的出现,反而我们应该更应该挑选哪些才是我们真正需要展示的数据,而不是大而全的全部展示,反而让看的人分不清主次;
固定行列:数据行列是随着滚动条一起拖动还是部分数据行列不变,部分随着滚动条滚动(常见的有固定表头,固定列)
数据列显影:数据列过多,会影响查看效果;但是考虑到数据列肯定是有限的集合;因此在表格的表头或者表格的上方,可以增加数据列筛选的按钮,让用户自定义想要的数据列;
2.4表格正文区
对齐方式:水平方向的左对齐、居中、右对齐;垂直方向的顶端对齐、居中、底端对齐;
行高、列宽:单个单元格需要指定行高,超出限制是自动换行还是截断;
选择框:一般放在表格的第一列,用于单选或者多选数据行进行操作;
数据格式:
数值类型:首先我们为想到进度问题,进而会涉及到长度、小数位等;还有更特殊的,如财会的千分位123,456,789和12%;
日期时间:日期时间的长度,完还是部分YYYY-MM-DD HH:mm:ss;间隔符是-还是.(YYYY-MM-DD/YYYY.MM.DD);
文本类型:因为行高列宽的限制,过长的文字会有截断的情况,展示的时候为“xxxxxxxxxxxx....”,但是还要通过悬浮的方式能够查看全部信息;
空白值:没操作和操作了为空数据是两种形式,我们一般用空白和- - 以示区分;
合并单元格:多条相邻数据,部分相同的一般可以进行合并展示;
表格样式:默认用相同的系统背景色,单行和双行以示区分的话可以使用间隔色,选中数据行的的背景色需要和已经出现的颜色;
操作列:操作列一般放在数据行的最后,一般用于单条数据的查看、编辑、删除操作等;
表格嵌套:一般默认折叠隐藏,点击展示折叠数据信息;
2.5分页
表格的可以不分页,可以使用滚动加载的方式更多数据;也可以做成分页的形式;
分页控件:一般有几部分组成,单页页展示条目;一共有多少数据条目;根据总数和单页数计算出页数,也就是页码;更进一步的话增加快速页跳转的输入框;
全选:一旦有分页,全选的概念就会有所区分,当前页全选和跨页全选;一般跨页全选需要特殊处理;
表格的最终展现是多功能模块组合而成,在满足功能的基础上要进一步考虑展示的美观度,操作的便捷等情况。
摘抄自:知乎大大大大金龙