代码之家  ›  专栏  ›  技术社区  ›  chakrit Dutchie432

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

  •  7
  • chakrit Dutchie432  · 技术社区  · 17 年前

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

    你知道规矩。

    我最近被要求修改一个这样的CRUD页面,它看起来相当难看。所以我决定可以用一些抛光。

    但是想想看……我想知道在创建显示大量数据的CRUD页面时,使用网格的好替代方案是什么?

    在大型CRUD页面中使用网格有哪些好的替代方案?

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

    3 回复  |  直到 17 年前
        1
  •  7
  •   Michael Zuschlag    16 年前

    对于显示大量记录的相对较少的字段,像网格这样的表格显示没有什么错,特别是当任务涉及搜索或比较记录时。那里

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

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

    如果你有很多记录 在许多字段中,您可以通过主细节组合将表格与类似表单的布局结合起来。页面顶部的表显示了记录的关键字段,而页面底部的表单显示了表中当前具有焦点的任何记录的溢出字段。

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

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

    选择能够最大限度地提高用户、任务和工作环境的用户性能的布局。

        2
  •  2
  •   orip    17 年前

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

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

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

        3
  •  0
  •   migli    5 年前

    • 如果你的主数据表检索并显示了来自关系MySQL表的一些数据,你可以在可折叠的嵌套表中显示它们
    • 原生浏览器滚动条有点难看,你可以使用一些Javascript插件,比如 OverlayScrollbars 改善用户体验
    • 最后,如果您愿意,可以将表的主标题粘贴到顶部,以便用户始终可以看到列的标题。

    你可以在这里看到所有这些技巧 MySQL Sakila database demo .