Javascript Oracle和React：如何在下次加载页面时保持秩序

我对这一切都很陌生，但jist是我用react创建了一个拖放表

这些值是从我在oracle中创建的表中提取的（200行约23列）

目前，我在进行ETL时添加了一个id，以使事情保持正确的顺序。我的目标是在拖动项目时更新oracle表，以便它能够保持秩序

如果不更新每一行，我真的看不到这样做的方法。我保存历史记录，所以我不更新行，而是插入新行

基本上我想要的东西，我可以排序时，我拉表，以便我可以保持准确的顺序，最后拖放

任何建议都会有帮助，我唯一能想到的就是将一个新索引映射到每一行，然后用新索引抓取键并用新索引更新每一行

有没有其他更有效的方法，我可以研究一下。请记住，我是新来的，所以我必须研究你所说的大部分内容，所以如果有一个小步骤，最好让我知道我可能需要研究一下

编辑：我应该提到，我正在使用Node.js和oracledb从oracle tables版本12中提取信息

我以json的形式接收数据，但表本身并没有保存json，这并不是不可能的，我只有标准的行和列。说实话，我试图通过这个设置保存为json，只是放弃了，转而使用标准数据类型。

关于“保留历史”，请看一下这个视频：也许闪回数据归档会是一个更好的选择。或者，时间有效性可能有助于使用当前模型简化查询

至于“更新每一行”，我想你指的是那些“显示顺序”高于刚刚重新排序的行，对吗

一个你可以考虑的设计模式是切换到一个更新，比如点击一个保存按钮，而不是在每次更改中使用DROP事件。这可能仍然需要更新许多行，但至少可以减少更新的频率

如果要继续在DROP上保存，并且希望最小化数据库中的工作，可以考虑使用“DePassiPrviousId”列代替“DISPLAYA序列”列。其思想是每一行都指向它前面的那一行。您可以使用Oracle的CONNECT BY操作符以正确的顺序返回数据

使用此更改，更新给定行的列将始终需要三次更新。首先，要移动的行必须指向它的新父行。其次，以前指向父级的行必须指向新行。最后，指向被移动行的行必须指向被移动行的上一个父行。虽然效率更高，但折衷的办法是在涉及数据完整性时需要非常小心

下面是一个例子：

create table colors (
    id          number  
                constraint colors_id_pk primary key,
    name        varchar2(255) not null,
    previous_id number
                constraint colors_previous_id_fk
                references colors (id)
);

insert into colors (id, name, previous_id) values (1, 'Red', null);
insert into colors (id, name, previous_id) values (2, 'Orange', 1);
insert into colors (id, name, previous_id) values (3, 'Yellow', 2);
insert into colors (id, name, previous_id) values (4, 'Green', 3);
insert into colors (id, name, previous_id) values (5, 'Blue', 4);
insert into colors (id, name, previous_id) values (6, 'Indigo', 5);
insert into colors (id, name, previous_id) values (7, 'Violet', 6);

以下是如何按正确顺序获取值：

select level, name
from colors
connect by prior id = previous_id
start with previous_id is null
order by level;

返回：

1 Red
2 Orange
3 Yellow
4 Green
5 Blue
6 Indigo
7 Violet

想象一下，有人在橙色（2）和黄色（3）之间拖动靛蓝（6）。Indigo需要将它以前的id指向Orange，因为它是父项。黄色之前指的是橙色，需要指的是靛蓝。最后，先前指向靛蓝的紫色需要指向蓝色

您可能希望将此作为单个工作单元来完成，并且希望序列化此类更新。要做到这一点，您需要使用如下所示的PL/SQL存储过程：

create or replace procedure move_color(
  p_color_id        in colors.id%type,
  p_new_previous_id in colors.id%type
)

is

  -- There is only one record without a parent (the first color
  -- to display). This cursor will lock that row to serialize
  -- update operations on the table through this procedure.
  cursor lock_cur
  is
    select 1
    from colors
    where previous_id is null
    for update;

  cursor color_cur
  is
    select *
    from colors
    where id = move_color.p_color_id
    for update;

  l_color_rec color_cur%rowtype;

begin

  open lock_cur;

  open color_cur;
  fetch color_cur into l_color_rec;

  update colors
  set previous_id = l_color_rec.previous_id
  where previous_id = l_color_rec.id;

  if move_color.p_new_previous_id is null
  then
    update colors
    set previous_id = l_color_rec.id
    where previous_id is null;
  else
    update colors
    set previous_id = l_color_rec.id
    where previous_id = move_color.p_new_previous_id;
  end if;

  update colors
  set previous_id = move_color.p_new_previous_id
  where current of color_cur;

  close color_cur;

  close lock_cur;

end;

您可以运行以下命令进行更改：

begin

  move_color(6, 2);

end;

如果重新运行查询，您将看到：

1 Red
2 Orange
3 Indigo
4 Yellow
5 Green
6 Blue
7 Violet

---

现在，无论有多少行，只需要更新三行。正如您所见，数据模型稍微复杂一些，因此您必须确定目的是否证明应用程序的方法是合理的。

这里的问题是针对整个结果集，还是仅针对UI中一个（或几个）页面的数据？如果是后者，只需将数据缓存在React中，并在JavaScript端进行排序。React中的缓存是否类似于在客户端保存cookie，还是只是缓存在我的服务器上。我真的只是在react中搜索缓存吗？该应用程序本身是为我们的销售主管准备创建组织结构图。因此，基本上，这是一个项目设置，当我们开始计划明年。总的来说，这只是过程中的一个步骤，但表本身将在整个项目中使用，但老实说，这是我开始做的第一件事。我还没有构建任何其他内容。我不知道任何关于React的内容，因此我可能对您试图做的事情有点偏离，但是当您谈论与表相关的“顺序”时，您需要记住，就表而言，没有行的“顺序”。这些表是一个“堆”（非有序）结构。如果要从数据库中“排序”，必须在SELECT语句中使用ORDER BY子句。@EdStevens我认为有点混乱，HTML表有顺序，而此表是从oracle表中提取的。所以我有能力在某种程度上操纵秩序。当我第一次创建oracle表时，我添加了一个id，该id按创建HTML时的顺序排序。在HTML中，我可以拖动HTML表格中的行。。当我这样做时，我想保存回表中，但能够创建订单。也许我可以创建第二个表，它只需要获取主表的键并更新索引，然后在此表上进行连接以获取我的信息。最大的担忧是效率似乎复杂性是基于保留历史的需要，不是吗？您打算如何使用历史记录？谢谢Dan，因此处理历史记录将使新数据如下所示？1个红色空白，2个橙色1，3个黄色6，4个绿色3，5个蓝色4，6个靛蓝2，7个紫色5？谢谢你给我看层次结构。我能够更快地创建我的销售层次结构。是的，这就是数据在移动后的样子。我很高兴这有帮助！嘿，我想