CRUD应用程序中网格的替代方案?

时间:2009-01-22 19:00:30

标签: user-interface crud

因此,您被分配了构建基本CRUD应用程序。并且它有一个页面用于列出所有库存项目...如果您的用户想要编辑其中任何一个,则每个项目旁边都有“编辑”按钮。

你知道演习。

我最近的任务是修改其中一个这样的CRUD页面,看起来很丑陋。所以我决定可以使用一些抛光。

但是考虑一下......我想知道在创建显示大量数据的CRUD页面时使用网格的好方法是什么?

搁置ajax / speed / security / implementation问题......

  

在大型CRUD网页中使用网格有哪些好的选择?

如果这很重要,我愿意为美学交换一些可用性。

3 个答案:

答案 0 :(得分:7)

为了显示大量记录的相对较少的字段,表格显示就像网格一样没什么问题,特别是如果任务涉及搜索或比较记录。编辑按钮 错误,无法打开单独的窗口或页面进行编辑。这意味着用户必须学习两个窗口以及如何在它们之间导航,这需要更长的时间。

大的可用性改进是就地编辑:而不是只读网格,为网格中的字段(文本框,复选框,梳理盒等)提供一组适当的控件(或者代替你的网格)。页面上的单个“保存”按钮将保存对所有记录的所有更改(或者您自动为适当的事件发布更改)。

如果您需要为少数记录显示大量字段,那么表格式布局(可能是选项卡式)是表格布局的替代方案。您可以提供分页控件(例如,看起来像Recordset控件的东西),以允许用户在记录之间进行分页。

如果您有许多记录许多字段,您可以通过具有主 - 详细信息组合将表格与表单布局相结合。页面顶部的表格显示记录的关键字段,而页面底部的表格显示当前具有焦点的表格中任何记录的“溢出”字段。

另一种方法是以图形方式显示记录。选择两个字段,并通过用于在页面上查找图标的x和y坐标表示每个记录的值。如果任务涉及搜索模式或相互关联的记录,这是很好的。具有焦点的记录(图标)的附加字段可以在页面的细节部分中以类似形式的布局显示。

您可以做的另一件事是在表格或类似形式的布局中以图形方式表示某些字段(例如,使用图标,迷你条形图,阴影或颜色编码等)。这可以帮助用户搜索具有特定值的记录。它还可以在一个小空间中显示大量数据的一般要点(例如,作为迷你图)。

选择最大化用户,任务和工作环境的用户性能的布局。

答案 1 :(得分:2)

列表(而不是网格),在单击时打开更多字段进行编辑,或打开新窗口或表单。通过这种方式,屏幕不会从一开始就过载数据,只要最重要的数据可用,它就非常有用。

一个例子是Gmail聊天联系人列表(屏幕截图here)。

在某些应用程序中,有助于减少显示所需信息的非常好的可用性触摸是一个很好的搜索/过滤框:当您在框中键入时,列表将被过滤为匹配的条目。

答案 2 :(得分:0)

要显示的数据是表格数据,因此以表格形式显示它们是有意义的,我看不到任何其他可接受的解决方案。

但是,可以组合使用不同的解决方案以功能方式显示数据:

  • 如果您的主数据表检索并显示了来自关系MySQL表的某些数据,则可以将其显示在可折叠的嵌套表中
  • 本机浏览器的滚动条有点难看,您可以使用OverlayScrollbars之类的Javascript插件来改善用户体验
  • 一些MySQL数据必须一眼显示,这是重要的主要信息,而另一些则是辅助数据,这些细节只有在用户希望看到它们时才可以显示。为此,我使用了另一个插件,该插件在表中添加了第一列,当您单击它时,它会显示一个带有其他辅助数据的可折叠行。
  • 最后,如果您愿意,可以将表主标题放在顶部,以便用户始终可以看到列标题。

您可以在MySQL Sakila database demo的此处查看所有这些技巧。