代码之家 › 专栏 › 技术社区 › naivists

如何在网页中创建N:N关系编辑器?

input forms user-interface javascript

naivists · 技术社区 · 15 年前

员工名单相对较长(约600项);
有一个简短的任务列表(约5项);
向员工分配任务时,必须指定截止日期;

因此,我需要一份清单(在这种情况下,项目顺序很重要,因为清单中的第一名员工被视为“主要负责人”):

Frederica Minoso-查看来函-18.01.2010

比如说,如果我们有10名员工,那么设计将非常简单——一个员工下拉列表,一个任务下拉列表,一个截止日期的日期选择器,一个“添加到列表按钮” 这样地 alt text http://naivist.net/tmp/layout.jpg

然而,600个项目的下拉列表显然太多了;这意味着某些用户必须按姓名、姓氏和部门进行搜索。

我有足够的技术来创建应用程序(JavaScript、jQuery和ajax请求是我的朋友),但问题是——如何设计web表单的界面,以便用户能够理解他们到底在做什么?如何在表单中布局项目?一开始要展示什么,隐藏什么?

也许我可以在这里使用一些现代的UI表单模式?例如,可能有一个文本框,用户可以在其中键入并自动建议最接近的匹配项? 也许可以应用一些可拖动/可拖放的模式(例如,输入用户名后,将其拖放到适当的任务上)?用户通常有多容易适应这种非标准接口?

陈述一个问题-人们通常如何解决此类数据输入问题?你在网上看到过这样的好例子吗?告诉我,因为我现在想不出什么。

对不起,有很多问题,其中很多是可以讨论的。我应该把它标记为“社区维基”吗?

2 回复 | 直到 15 年前

DavGarcia 15 年前

我一看到问题就想 AutoComplete . 既然你也这么想,这可能是解决问题的显而易见的办法。电子邮件的“收件人”字段也有同样的问题——如何从1000个联系人中选择一个人。

由于任务包含5项,因此可以使用下拉列表。下拉列表的建议上限为7项,因此您在该上限内。一个建议是在任务结束时加上“by”或“on”,使这行字读起来像一个句子- . 此外,在下拉列表中添加一点视觉辅助可能会在某些情况下增加理解力。

Matti Lyra 15 年前

首先,我不确定我是否同意非标准接口部分。我想这取决于用户的实际身份,但我肯定会说,从航空公司预订表单到搜索引擎,这种文本框/自动搜索功能正变得非常标准。

除此之外,我还会添加一个选择字段,可能不是下拉列表,但可能是一个包含所有员工的列表框,可能有按姓氏或首字母排序的选项。这将适用于那些不知道人名拼写的人,或者不太记得人名的人。

否则,你在那里的布局似乎适合我。我不会到处乱扔东西。这当然给它带来了一种美好的感觉,但对于分配任务应该做些什么,这一点更不清楚。如果你发现自己在写如何使用这个东西的说明,那你就太过火了。

我想到的另一件事是有一个appleish菜单,在那里你首先有一个空列表,当你点击列表时,输入字段就会出现。问题是,由于用户界面没有指示您应该如何向列表中添加内容,人们很容易感到困惑。