2

我们有一个表单，允许用户为字段动态添加输入。例如，如果您有一个用于跟踪项目的表单，您希望将任务动态添加到该项目。只是为了澄清我的语言：您为任务字段动态添加输入。问题是，我们有 50 个这样的字段。我们当前的解决方案在所有 50 个字段旁边显示一个加号 (+)，以允许他们为该字段添加另一个输入框。字段的标签位于字段的左侧，添加的每个输入框都位于当前输入框的下方。

请相信动态添加输入是正确的解决方案，请相信这是经过深思熟虑的，请相信这是用户想要的，请相信我们已经走上了其他各种道路，这是最好的解决方案。

我的问题是关于演示的：你会怎么做？

请保留UI设计的答案。我们已经弄清楚了数据库模式。

更新

Current Solution 是一个基于 Web 的应用程序，它使用 JavaScript 动态添加新的输入，看起来非常类似于 Corey Trager 的绘图：

Task     [.............] +  
         [.............] +  
         [.............] +  
         [.............] +

Foo      [.............] +
         [.............] +
         [.............] +

Repeat 50 times...
4

8 回答 8

1

从@zachary 的建议中思考：

使用默认/上次保存的字段数显示为用户设计的表单。在表单的底部放置一个 DropDownButton，它有一个 + 图标和单词 Add Field ( + Add Field )。

下拉此按钮将显示所有可用字段的列表。当用户选择其中之一时，表单将增长（足以容纳新字段），带有标签的新字段将显示在表单底部，添加字段按钮将显示在新字段下方。

编辑：

为了遵循 ASCII 图表的主题，这就是我认为我的建议的样子。

任务 [......................]
        [ + 添加任务 ▼]

Foo [........]
        [ + 添加 Foo ▼]

于 2008-09-30T13:00:22.427 回答
1

那么，您所描述的可能看起来像这样？如果没有，您可以尝试“绘图”吗？

Task     [.............] +  
         [.............] +  
         [.............] +  
         [.............] +

Foo      [.............] +
         [.............] +
         [.............] +

这是网页还是其他技术？

于 2008-09-30T13:00:48.370 回答
1

这可能完全不合时宜，但取决于字段的要求，以及这是配置还是数据输入界面。

如果确实需要打开字段以进行数据输入，您可以将它们定义为字段名称和值的列表，并使用点击编辑根据需要在每个元素上动态放置输入框。

这种解决方案可以减少视觉噪音并节省垂直空间。如您所见，表单输入比纯文本占用更多空间。您可以通过捕获选项卡事件并触发下一个字段的单击以编辑功能来满足键盘用户的需求。

它可能看起来像这样。（刚刚点击 Foo 编辑内容）

Name   : Joe Blogs
Phone  : 555-1234
Cheese : Stilton
        -----------
Foo     | SNAFU   |    
        -----------
Bar    : fubar
Fifty  : Whatever

(+) Add new field...

或者

如果这是一个配置页面，即您在流程的另一个屏幕或阶段添加要填写的新字段，您可以按顺序定义字段列表，然后将其显示给用户以供数据输入。

              -------------------------------------------------
Define Fields | name, phone, cheese, foo, bar ..(etc).. fifty |
              -------------------------------------------------

然后根据当前 UI 将字段显示在一个巨大的网格中。

于 2008-09-30T14:27:56.723 回答
0

好的，既然您已将我的图表添加到您的问题中，我的答案是......

我并不是说这更好，但它是一个替代方案。这是一种用点击代替水平滚动的不同方式。不要通过垂直滚动从“tasks”导航到“foo”再到“bar”，而是使用“tabs”，即使您必须将它们堆叠几行高。它确实使以随机顺序导航变得更容易。您甚至可以从这个选项卡式视图来回切换到您当前的“全部显示”视图。

[task][foo][another tab][another tab][etc][etc][etc][etc][etc][etc]
[row2][fred][another tab][etc][etc][etc][etc][etc][etc][etc]
[row3][another tab][wilma][etc][etc][etc][etc][etc][etc][etc]

[task1     ]+
[task2     }+
[task3     ]+
于 2008-10-01T03:10:08.390 回答
0

最后一个任务字段附近的小 + 图标带有“添加新任务”的链接。单击后，新任务字段会出现在当前最后一个任务下方。

于 2008-09-30T12:53:17.793 回答
0

我会使用拖放方法，让用户灵活定位。这甚至可以使用网络应用程序。例如，参见 Dropthings ( http://www.dropthings.com/ )。这提供了在 ASP.NET 环境中实现拖放所需的所有代码。

你用的是什么环境？

于 2008-09-30T12:53:46.937 回答
0

如果这是一个网络应用程序，那么您可以使用 Javascript 来动态管理附加字段。根据您是否可以异步处理表单，您可以使用 Ajax 来简化表单管理的某些方面。

基本上，每个任务都需要单独命名，然后您需要为他们选择附加的每个新字段附加一个新的唯一命名的表单输入元素。然后，您必须在提交表单之前使用 Javascript 遍历表单，或者在提交后遍历 POST 数据。

当然，这会将 Javascript 作为您的 Web 应用程序的要求引入，这并不总是可行的。

于 2008-09-30T13:01:17.510 回答
0

你能不能使用一个类似于 facebook 实现的系统，它只有一个文本框，但允许向其中添加多个项目？有一些预编码的解决方案，例如这个是针对 mootools v1.2 的，或者这个是针对 jQuery 的。您甚至可以允许自动完成系统中已有的任务。

于 2009-07-11T03:52:22.297 回答