jquery - 支持使用 jquery 对 html 表行重新排序并使 SQL 后端快速运行的最佳方法？

Question

我有一个 asp.net-mvc 网站，有一个 html 数据表，其中一列是排名，它代表该行的优先级(每行代表一个请求)。我允许人们使用新数字编辑一行中的数据，但它实际上不会影响任何其他行(例如，没有什么可以阻止人们输入另一行中已经存在的值)

我正在寻找一种解决方案来拥有更有效的前端和快速的后端。我将逐一分解:

1. 前端:

我想要一些功能，可以上下拖放行或单击向上/向下箭头，或者当我在一行中输入排名值时，它会更新所有其他行的排名。如果有排名第一的新条目，我基本上不希望用户必须更新每一行(基本上必须更新前一个 1 => 2、前一个 2=>3、前一个 3=>4 等. .

是否有任何 jquery 库或有用的模式可以帮助支持此功能(以避免必须从头开始将其全部连接起来)，因为这似乎是我可以想象许多其他人使用的通用功能。

仅供引用，如果有人熟悉 JIRA Greenhopper Planning board ，这将是理想的模仿示例。

后端

我的相关问题是，当我去更新后端时，我试图找出如何避免这种运行速度非常慢的情况。如果我的数据库表中有一个排名字段，并且有人将一个项目更新为第一，我基本上必须在每一其他行上运行更新查询，以将值更改为现有值 + 1。是否有某种模式可以做到这一点更有效吗？

Answer 1

对于前端，请查看 jQueryUI's Sortable特征。它通常应用于 <ul/>或<ol/>元素，但是快速的 Google 搜索 turns up guides使其适应 <table/>如果需要的话，还有元素。

一个插入级联到多个更新的后端问题可以通过将其视为链表来解决。

我假设您将数据存储为:

Rank | Key
1    | Zebra
2    | Pig
3    | Pony

因此插入新行可能需要更新每个现有行:

Rank | Key
1    | Penguin * Inserted
2    | Zebra   * Updated
3    | Pig     * Updated
4    | Pony    * Updated

相反，通过将它们与表中的另一行相关联来存储它们的顺序。

Key | ComesAfter
Zebra | null
Pig   | Zebra
Pony  | Pig

因此插入新行最多需要一次更新。

Key     | ComesAfter
Penguin | null    * Inserted
Zebra   | Penguin * Updated
Pig     | Zebra   * Unchanged
Pony    | Pig     * Unchanged

当然你可以使用ID来实现

<小时/>

但是

你可能过早地进行了优化；即使在发布许多更新的情况下，一些简单的 SQL 工作也可能被证明是相当高效的。考虑一下:

Key   | Rank
Zebra | 3
Pig   | 1
Pony  | 2

请注意，此处的值充当自然键，它也可以有一个 ID(与 Rank 不同)。

要将新行添加为排名 1，您需要执行以下操作:

begin tran
  insert values ('Penguin', 1)
  update table set Rank = Rank + 1 where Rank >= 1
commit

添加索引和可能的分区(取决于表的大小)将提供巨大的性能改进 - 唯一的代价是偶尔需要更多的数据库管理。

这里的主要问题是您需要哪个方面:快速读取、快速写入或简单设计？您可以选择三个中的两个:)