在表单中显示此内容的最佳方式是什么?

时间:2009-08-26 03:49:48

标签: php javascript html forms user-interface

在我的网站上,我有两个使用数据透视表链接的表。我想要做的是让用户更新两个表之间的关系(插入和删除数据透视表中的记录)。我在PHP中这样做没有问题,但我关心的是表单在用户Web浏览器中的显示方式。

我现在的方式是使用一个充满复选框的表,每个复选框对应于列标题和行标题(表示数据库表)之间的关系。用户可以选中该复选框,告诉PHP该关系应该有一条记录(未选中的框表示没有关系)。但是,如果有很多列和很多行,这种方法可能会变得非常难看(列在页面边界外伸展),并且使用起来有点乏味。

向用户显示此表单的好方法是什么?

2 个答案:

答案 0 :(得分:1)

也许使用数据网格?这些非常强大:

但是,通过Ajax工作可能是一项耗时的任务。

答案 1 :(得分:0)

由于这更多是关于应用程序的UI而不是其他任何东西,我认为不会有一个正确的答案,因为它将归结为一个有效的组合(这是很难的,但没有能力看/玩的东西)和你的个人喜好。

我会遇到一些进展:

  • 视觉反馈
    通过向用户提供视觉反馈,使您的桌面更具互动性。在最基本的层面上,尝试为单元格添加一些颜色 - 这是检查的颜色。这将允许用户快速查看哪些选项“正在播放”。这可能是相反的工作更好(突出显示未经检查的单元格) - 但这一切都取决于表单正在做/打算指示 - 即如果更清楚地表明未经检查的状态是坏的,你可能希望这些是红色。

下一级是添加一些动态突出显示。如果表很大,您可能需要突出显示与光标下的单元格对应的行和列标题单元格。您还可以考虑突出显示整行/列(十字线样式)以允许用户检查“伴随”单元格。

  • 动态表格
    稍微多一点的是为你添加一些香料。不使用复选框的行和列,而是使用图形图标/图像。它们在眼睛上更容易,并且可能允许您对桌子的尺寸进行更严格的控制。然后可以通过Javascript和点击来完成整个UI - 如果您使用类似JQuery的东西,这很容易。

  • 拆分界面
    这是基于表A和表A的所有组合的假设。表B未在数据透视表中设置开始 - 仅当用户尝试将A.item与B.item关联
    不显示所有可能的组合,而只显示那些活动的组合(在数据透视表中有一个条目)。然后为用户提供第二种形式(可能是两个下拉菜单),允许他们将第一个表中的记录与第二个表相关联。

  • 过滤界面
    为用户提供过滤界面的能力 - 仅显示其中一个表中的单个记录之间的关系。这会将您的表格限制为单个列,从而使设计更容易适应。

但是,我仍然允许用户进入所有记录的“大视图”,因为视图对您快速交叉引用大量记录非常有用。