原文地址

主要是针对第一部分增加了三个方案

1. Inline Editing

quicken_online_inline_edit_1

quicken_online_expanded1_2

mint_inline_edit1_3

mint_inline_edit_expanded_4

extjs_edit_row_5

harvest_6

google_docs_7

行内编辑最佳实践

  • 实施标签导航当创建一个行内编辑表。
  • 考虑如何处理诸如突出行或在错误的单元格的方式,很容易一个人能纠正问题的错误。不要打破锁定在单元格的错误他们个人的数据输入流,只是强调这个问题,并提供一个细胞,为他们稍后再返回解决它。
  • 提供撤消和重做功能。

swivel_fix_errors_8

2. Super Wide Tables

  • 组织最重要的列内容到左侧。
  • 如果用户确实需要横向滚动,也能使用。
  • 只显示一组列在默认视图数量(所以没有在默认视图水平滚动),并提供了自定义选项,可以选择隐藏或显示更多的列。 ExtJS的有这种内置列下拉,我通常会添加一个自定义按钮到工具栏的隐藏表/显示列功能。

extjs_columns_9

  • 可以改动列大小。
  • 列可以重新安排。
  • 如果你有一些列的编辑功能和其他只读功能,编辑为一组,只读为一组。
  • 不要缩写列标题,减少间距或填充,或下降到一个较小的字体在屏幕上适合您的表。这无助于使用您的应用程序。
  • 良好的视觉设计可以帮助组织更有意义的方式使您的数据更容易扫描信息。
  • survs_10

  • 使用行概要,可能使其更具可读性。
  • extjs_row_summary_11

  • 位于庞大数据表的上方在视觉上提供一个说明,可以便于用户理解表中数据。
  • discover_spend_analyzer_12

    swizel_13

    3. In-column Filtering

  • 这个例子中上一篇文章中包含有该表上方的动态过滤器(它会动态更新表的内容)。
  • builditwithme1_14

  • 在一些网络应用程序,柱过滤是一个功能强大的选择提供。通过Flex或Ajax很容易实现。只要验证了这种功能是您客户的需要,大部分人只需要简单的过滤。
  • zenoss_15

    flex_incolumn_filter_16

    Google Buzz