使用jquery支持重新排序html表行以及快速生成SQL后端的最佳方法?

leo*_*ora 5 sql-server asp.net-mvc jquery

我有一个asp.net-mvc网站,我有一个html数据表,其中一列是排名,表示该行的优先级(每行代表一个请求).我允许人们使用新数字连续编辑数据,但它实际上并不影响任何其他行(例如,没有任何东西阻止人们输入另一行中存在的alraedy值)

我正在寻找一个更有效的前端和快速后端的解决方案.我将分解每个:

  1. 前端:

我想要一些功能,我可以上下拖动行或点击向上/向下箭头,或者当我连续输入排名值时,它会更新所有其他行的排名.我基本上不希望用户必须更新每一行,如果有一个排名为#1的新条目(基本上必须更新前一个1 => 2,前一个2 => 3,前三个=> 4等......

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

作为参考,如果有人熟悉JIRA Greenhopper规划板,这将是一个理想的模拟实例.

  1. 后端

我的相关问题是,当我更新后端时,我试图弄清楚如何避免这种操作真的很慢.如果我的数据库表中有一个排名字段,有人将项目更新为第一,我基本上必须在每一行上运行更新查询,将值更改为现有值+ 1.是否有一些模式可以执行此操作更有效?

STW*_*STW 5

对于前端,请查看jQueryUI的Sortable功能。它通常应用于<ul/><ol/>元素,但是如果需要的话,快速的Google搜索会提供相应的指南以使其适应<table/>元素。

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

我假设您将数据存储为:

Rank | Key
1    | Zebra
2    | Pig
3    | Pony
Run Code Online (Sandbox Code Playgroud)

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

Rank | Key
1    | Penguin * Inserted
2    | Zebra   * Updated
3    | Pig     * Updated
4    | Pony    * Updated
Run Code Online (Sandbox Code Playgroud)

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

Key | ComesAfter
Zebra | null
Pig   | Zebra
Pony  | Pig
Run Code Online (Sandbox Code Playgroud)

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

Key     | ComesAfter
Penguin | null    * Inserted
Zebra   | Penguin * Updated
Pig     | Zebra   * Unchanged
Pony    | Pig     * Unchanged
Run Code Online (Sandbox Code Playgroud)

当然,您可以为此使用ID


然而

您可能过早地进行了优化;即使发布许多更新,一些简单的SQL工作也可能被证明是非常有效的。考虑一下:

Key   | Rank
Zebra | 3
Pig   | 1
Pony  | 2
Run Code Online (Sandbox Code Playgroud)

请注意,此处的Value充当自然键,它也可以具有ID(与不同Rank)。

要将新行添加为等级1,您需要执行以下操作:

begin tran
  insert values ('Penguin', 1)
  update table set Rank = Rank + 1 where Rank >= 1
commit
Run Code Online (Sandbox Code Playgroud)

添加索引和可能的分区(取决于表的大小)将极大地提高性能-唯一的权衡是偶尔进行数据库管理。

这里的主要问题是您要求哪个方面:快速读取,快速写入或简单设计?您可以拥有三个中的两个:)