公司在推开发平台，使用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资源管理器的多选模式下的界面表示：

表格控件的多选模式总结