如何像FogBugz案例表一样对数据表进行排序

Question

我正在研究 Fogbugz 如何对他们的表格进行排序。当您单击对列进行排序时，它们实际上将表分成许多包含每个信息类别的小表。

我正在寻求实现此功能。

编辑：@Peter，我不想每次单击标题标题进行排序时都回发并重新创建表格。 我还想知道他们是否是一个通用的解决方案。 如果我单击标题进行排序，通过 JavaScript 的方式，它会将“一个”表分成多个表，我想知道它们是否是任何通用的解决方案，因为它只是查看排序表的更好方法。

编辑：我确实需要一个 JavaScript 排序器，但是如果你仔细看看 Fogbugz 的实现，它会产生不同的结果。

Answer 1

是的，Rich 明白了（很久以前我将此功能编码到 FogBugz 中）。

如果您必须在客户端上执行此操作，您别无选择，只能对数据进行排序，迭代它，生成一个又一个的表行，每次您点击新的排序值时，您都会创建一个带有适当信息的新标题。

说实话，这将是对这个 jQuery 插件的一个非常酷的修改：http://tablesorter.com/docs/，您将能够利用他们的很多的工作。 如果您打算投入时间并创建一个通用解决方案，不妨将其提供给社区。

Answer 2

在不知道 Fog Creek 具体如何实现这一点的情况下，我的方法是输出表头，然后迭代列表，每次组值更改时输出页脚和新的标头。

Answer 3

不确定您期望什么答案。为此，SQL 查询只需对所选列使用排序，每次此值更改时，UI 都会启动新表。

这是单击“优先级”列后进行此排序的 FogBugz 的屏幕截图。

http://img297.imageshack.us/img297/6974/76755363ee3.png

当然，开始新表并不对每一列（标题、案例编号）都有意义。

---

编辑：如果我理解正确，您正在寻找一种在浏览器中执行此操作而不加载新页面的方法。如果是这种情况，我建议至少提供一些服务器端支持，这会以正确的顺序返回您的数据，并正确构建子表（在 xml/json/无论您使用什么）。您的 JavaScript 将使用此数据来重新创建表。我相信其他有更多 web-ui 经验的人会为您提供更好的答案。

Answer 4

我使用了 Kryogenix 的 Sortable Tables 脚本，取得了一些不错的结果。

Answer 5

我不知道是否相关，但是我们将查询结果存储在 SQL 中的临时表中，然后引用 current-row-less-one 来查看某个 Category 是否已更改，并在结果集中指出这一点.

在某些情况下，我们用包含以下内容的列来“指示”这一点：

<tr><td colspan=999>Category Heading</td></tr> 这样网页就可以将其“注入”到它正在构建的表中。

SELECT Col1, Col2, ...,
       [CATEGORY] = CASE WHEN T1.CategoryCol <> COALESCE(T2.CategoryCol, '')
           THEN '<tr><td colspan=999>' + T1.CategoryCol + '</td></tr>'
           ELSE ''
           END
FROM #MyTempTable AS T1
     LEFT OUTER JOIN #MyTempTable AS T2
         ON T2.ID = T1.ID - 1