将数据输入网格

Question

UI问题：对于最佳（定义为“最终用户最喜欢的那个”）或实现数据输入网格的最差方法，是否存在一些共识？

我有一个网格，有很多行。网格列包含各种类型的属性，用户可以输入/编辑这些属性。属性的“类型”包括：

• 自由文字
• 数字（数字）
• 枚举值（例如'高'，'中'和'低'之一）
• 其他（例如日期，持续时间）

'自由文本'类型并不难设计（所以我不会问这个），但接下来的两种类型呢？

数字数字

• 使用键盘输入数字时，是否允许自由文本输入，然后对模糊运行验证方法？或者，监控每次按键以将数据输入限制为仅数字？
• 如何告诉用户（在网格上，而不是在表单上）某些列中的数据语法仅限于数字？如果用户按错了（非数字）键，你会怎么做？
• 'spin'或'spinner'控件是标准的Windows控件;是否适合尝试在基于HTML的网格上使用一个？

枚举值

为了使用鼠标输入或编辑枚举值，我想在点击鼠标时弹出一个小的上下文菜单就可以了。

• 另一种方法是使用<select>输入控件（即组合框）。我想尽管拥有一整套组合框并不像拥有一列文本值那样容易阅读（因为组合框添加了额外的非文字墨水）？您如何看待通常显示纯文本，但在字段获得输入焦点时使用组合框替换该文本（然后在模糊处删除组合框）？
• 当焦点因键盘（即[Tab]键）而不是鼠标的结果（即点击）而改变时，您是否也会在焦点上弹出相同的菜单？换句话说，应该在弹出菜单中选择一个字段吗？顺便提一下，我见过的基于CSS的弹出菜单会响应鼠标但不响应键盘（例如[Up]和[Down]箭头键）。您知道可以在浏览器中运行的任何类似Intellisense的数据输入实现吗？

例如？

我也有兴趣看到你认为是一个典型的例子。我对桌面用户界面和/或浏览器内的答案感兴趣。

---

编辑：关注[data-entry]标签的另一个问题（“Has anyone used Sigma Grid (Javascript-based editable data grid)?”），我正在查看Sigma Grid示例。它做了很多很好的事情IMO（对键盘和即时选择框的良好支持）;但是它对数字字段的支持可能是不完美的，例如，如果我在数字单元格中按“a”，那么有时它会弹出一个警告框告诉我我错了（可能工具提示不那么干扰），和/或有时它将单元格留空（空白），擦除'a'并且不留任何东西。

---

编辑以回复以下答案之一。

  

然而，再次确定表单的主要用途是什么，并为此进行优化。数据可视化或分析与批量输入有不同的需求，令人满意的键盘用户与键盘+鼠标用户完全不同。

我希望相同的显示（即表格/网格）能够很好地显示现有属性，创建新属性和编辑现有属性。我期待几十个项目（即数十行数据），每个项目只有几列（例如，一列文本/项目描述，以及一个或多个列，用于一个或多个关联项目属性）。

某些数据/属性可能是主观的和相对的（例如，每个项目的两个属性是每个项目的'优先级'或'难度'，这仅在与其他项目比较时才特别有意义），这是一个原因为什么我想在一个屏幕上一起显示所有数据：以便最终用户可以比较它们。

我的应用程序适用于相对专家（非新手）的计算机用户，但不适用于数据输入专家：例如：用户是软件开发人员，项目经理，产品经理，QA人员等，也是他们客户的一定程度;它在内联网（不是公共互联网）上运行，但是易于使用且易于学习和直观学习都非常重要。

此外，我不明白为什么令人满意的键盘用户与键盘+鼠标用户完全不同：我认为单个解决方案可以/应该支持和/或两者兼而有之。

Answer 1

Answer 2

ExtJS的

可编辑网格：http://extjs.com/deploy/ext-3.0-rc2/examples/grid/edit-grid.html

行编辑器网格：http://extjs.com/deploy/ext-3.0-rc2/examples/grid/row-editor.html

我还没有亲自使用3.0x版本，但2.0非常棒。 Ext框架有一点学习曲线，但它几乎可以做任何事情：验证，输入限制，数据绑定等。

Answer 3

对于数值，我通常只使用JavaScript来限制输入除您希望输入的值之外的任何值。在这种情况下，数字。不需要给他们警报或其他任何东西，只是不要允许它。

对于枚举值，我真的会选择某种选择或下拉框。这就是人们对网站的使用。您可以使用它并隐藏它直到鼠标悬停，或者单击该框。

对于标签，我会允许它们标签到另一个选择框。对于某些人来说输入大量数据会更快。

Answer 4

这是多年来使用报名表的观察记录。

数字数字：

• 不要限制字段长度 - 如果你添加了一个分隔字符（或者太多），只是为了弄清楚你现在无法填写字段，这真的很烦人。然后你必须回去，删除“冒犯”字符，走到最后，然后继续填写。一个好的系统应该在退出字段时修剪和删除任何非数据字符。如果该值仍不适合，请立即告知用户。
• 要避免使用非数字，只需忽略填充非数字字符串的键。当心千位/小数分隔符，空格和控制字符（CTRL-x）。您应该可以粘贴几乎任何可用格式的值，包括货币符号（要删除）。
• Spin控件尚未普及，因此它们只应用于专家界面。它们也分享了滚动条的许多缺陷：如果条形按比例缩放，是否有足够的空间可以得到终点箭头，如果比例是线性的，那么最小/最大条形长度是多少是容易的点击并给出足够的准确度，即使使用键盘，它是否可以准确快速地增加？
• 用户退出该字段后，该值应四舍五入为允许的最大位数，并且最好根据操作系统设置进行格式化以便易读。

枚举值

• 在输入时更改字段小部件会让新用户感到困惑，因此它应该仅用于专家接口。
• 类似Google Suggest的界面在列表很大但用户熟悉时很有用，因为只需点击几下，就可以将长列表的导航缩小到更易于管理的部分。如果用户真的想要查看所有现有选项，也许应该有一个下拉选择器。如果该字段不允许新条目，并且字段内容与任何选项都不匹配，则应在用户导航时找到最接近的匹配项。例如，如果您知道选项为“高”，“中”和“低”，则仅输入第一个字符是有用的，并让系统完成剩下的工作。
• 当该字段通过鼠标或键盘获得焦点时，如果它们不是很多，它应立即显示可用选项。这对用户来说是一个很好的暗示。一个陷阱是，如果它过于坚持，当用户试图离开时会遮挡屏幕的其他部分。

Answer 5

查看http://www.peterblum.com

过去4年以上，我们在许多应用程序中使用本产品。它绝对增强了Web表单的UI并解决了许多验证问题。特别是，它适用于网格控制。

祝你好运

Answer 6

jQuery有一些cool plugins可以帮助解决常见的数据输入问题。

jQuery的高使用率，其中一些插件以及美学因素向我表明这些插件代表了处理用户输入的一些最佳方式......

Isaac over evolt在{strong>可用表格上有good article