表格控件的多选模式总结

公司在推开发平台,使用flex做的,我的一个项目也在用。综合来讲,这个平台不是很好用,一帮子小孩做的系统,缺乏项目经验,也缺乏基本的UI基础,但是公司要推,没办法。今天测试系统,发现了一个表格选中模式的问题(表格的选中模式已经是在平常不过的ui操作模式了,随便一个商品化的表格控件都支持)。一方面平台没有做出很好的支持,再有开发人员也缺乏这方面扥经验(还都是具有好几年工作经验的开发人员),做出来的程序是在难用。忍不住就写了这篇文章。

=========================================

在实际开发中,通常使用表格来显示多条数据(假设一个订单审批程序,使用表格组件显示状态为待审批的多条订单),不可避免会碰到需要选择某条记录的业务场景,比如在订单界面,选中一条订单提交到销售主管进行审批。

一、选择模式

选择有单选模式和多选模式两种。

1. 单选模式

所谓单选模式就是同时只能有一条记录可以选中,当你选中另外的一条记录时,刚才被选中的记录自动切换到未选中状态。

很多表格组件都自动支持单选模式。当鼠标点中一条记录时,表格控件会高亮(或者使用不同于其他行的底色)来表示点中的行被选中,同时先前的行自动切换到未选中状态。这是一种最简单的选中模式。在这种模式下,选中行一般也是当前行。

2.多选模式

多选模式下,可以多条记录可以同时处于选中状态。如果需要对多行同时进行相同的操作时,多选模式很有用,可以提高用户的工作效率,用户体验也很好。

多行选中模式有3种操作模式。

(1)按住ctrl + 点击,可以隔行多选

(2)先点选一行A,然后按住 shift + 点击最后一行B,自动将A->B之间的所有行选中,或者选中A行,按住shift+上下箭头可以连续选中经过的行。

(3)提供浮选框,点击行首的复选框进行多选。复选框被勾选,表示当前行被选中。

以上选中模式,是标准的操作模式,windows系统,excel,其他的表格控件,都支持这种方式。

上面的三种方式中,选中框的方式可以与1,2中方式共存。

二、选中行的界面表示

界面上如何表示某一行被选中,以便给用户直观的反馈呢?

(1)表格组件或列表一般使用将被选中的行整条记录的底色显示为不同于其他行的颜色来表示行被”选中“了。

(2)如果启用了复选框,被”选中“行的行首的复选框也要同时被打上勾(checked)。下图是window7资源管理器的多选模式下的界面表示:

底色和复选框,很多人都知道使用,但是常常忽略了这二者之间的关联关系,一个是通过打钩复选框多选时,没有使用底色表示,要么单选时只使用底色表示,而不打头行首的复选框。这两种界面表示方式都不是完美的。

时间: 2024-10-04 08:30:26

表格控件的多选模式总结的相关文章

Silverlight项目笔记5:Oracle归档模式引起的异常&&表格控件绑定按钮

两个问题: (1)Oracle无法连接正常使用,原因是归档日志满了引起异常,最后选择删除归档日志恢复正常. (2)使用silverlight自带的表格绑定按钮竟然无法使用,通过变通绑定数据源集合,把按钮操作作为数据源集合一部分,重新绑定解决. 一.Oracle归档模式产生日志文件引起数据库异常 连接数据库失败,提示监听错误,各种检查监听配置文件,删除再添加监听,无果. sqlplus下重启数据库数据库依然无果,期间碰到多个错误提示: ORA-01034: ORACLE not available

最好的Angular2表格控件

最好的Angular2表格控件 现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求: 更小.更快.更熟悉. 为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为

tbl.js div实现的表格控件,完全免费,no jquery

html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于“虚空服务器开发套件”.目前主要支持微软Edge浏览器,Chrome浏览器,其它未测. tbl.js完全免费,可随意修改,欢迎fork. tbl.js支持列表样式,增删改查,全表搜索,分组,分页功能,全表编辑,全行编辑,单选,多选,样式定制. 可以嵌入到各种容器中,比如jquery的dialog,tab

可以导入导出到Excel支持多表头多层显示的表格控件Essential Grid

Essential Grid for Windows Forms是一款功能强大的表格控件,很多功能和Excel表格相似,具有15种单元格类型,可以导入导出到Excel,支持多表头,多层显示,合并单元格,插入计算公式,支持LINQ,过滤和分组等. 具体功能: 支持Banner Cells,可以联合背景和邻近的单元格来显示一个背景图像或图片 支持完全自定义单元格样式 支持多个单元格覆盖合并 可以冻结行和列 表格控件支持MS Office 2003, MS Office 2007 和 Vista 样式

深入浅出ExtJS 第三章 表格控件(未完)

1 3.1 表格的特性简介 2 >.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能; 3 >.表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xtype为grid; 4 >.表格控件必须包含列(columns)定义信息,并指定表格的数据存储器(Ext.data.Store); 1 3.2 制作一个简单的表格 2 >1.列的定义是一个JSON数组,它是整个表格的列模型,应该首先创建; 3 var colu

葡萄城SpreadJS表格控件荣获“2018年度优秀软件产品”称号

日前,中国软件行业协会权威发布"2018年优秀软件产品"名单,葡萄城SpreadJS 纯前端表格控件产品荣耀上榜,凭借其对Excel的高度兼容性和处理海量数据时的绝佳性能表现,获得行业和用户的高度认可. "年度优秀软件产品"是由中国软件行业协会组织评选,旨在发掘并推介优秀软件产品,培育著名软件品牌,为政府采购.大型信息化工程招标项目提供参考.整个评选历时3个多月,由多位行业专家对参软软件进行多轮评估.评选,最终选出优秀产品,予以公布. 葡萄城的SpreadJS 是一

葡萄城首席架构师:前端开发与Web表格控件技术解读

讲师:Issam Elbaytam,葡萄城集团全球首席架构师(Chief Software Architect of GrapeCity Global).曾任 Data Dynamics.Inc 创始人兼资深产品经理,个人研究方向主要为 MS.NET语言及平台.动态化系统构建,以及高性能大型分布式Web系统架构,主导了葡萄城多款畅销控件产品的系统架构与性能优化.   “25年来每天只休息4小时,除了日常作息时间,Issam不是在研究技术和产品,就是在去研究技术发展趋势的路上”这就是葡萄城同事对他

javascript可编辑表格控件 支持全键盘操作

项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的, 自己写一个吧! 1.该控件支持 数据显示列,文本编辑列,选择列,下拉列,索引列,删除列 六种列类型 2.支持全键盘操作,自定义键位 包括:列焦点切换,行焦点切换,新建行,数据保存(默认 上,下,左,右 键操作) 3.丰富的事件,绝大多数的客户端操作都能触发无刷新后台事件 4.支持统计运算,可自定义运算插件 5.兼容 Ie,chorme,firefox等绝大多数主流浏览器 下载地址:http://files.cnblogs

能在多种前端框架下使用的表格控件

近几年Web前端框架特别流行,比如AngularJS.AngularJS 2.ReactJS.KnockoutJS.VueJS等.表格控件是我们在开发中经常要用到的控件.有没有能够在多种前端控件下都能使用的表格控件?最近研究发现Wijmo中的FlexGrid是一款不错的表格控件,它能支持很多主流的框架.这里主要介绍在纯JavaScript和AngularJS下FlexGrid的使用. 一.在纯JavaScript下使用FlexGrid HTML文件: <!DOCTYPE html> <h