在 Webgrid 中的两行之间交换答案

【问题标题】：Swapping between two rows in a Webgrid在 Webgrid 中的两行之间交换
【发布时间】：2014-03-07 19:44:14
【问题描述】：

我有一个 webgrid，它在 MVC 4 剃须刀中加载部分视图时从数据库中获取值。它总共有 6 列。第一列是复选框列，标题是“选择”。页面中有两个按钮（不在 webgrid 中），“保存”和“删除”。通过选择任何复选框，如果我单击“删除”按钮，它将从 webgrid 中删除该行，但不会从数据库中删除。点击“保存”按钮后，所有数据将通过更新删除的记录保存到数据库中。

在其他 5 列中，有 4 列来自数据库。其余列是优先过滤列。为此，我使用了两张图片。一个是向上箭头，另一个是向下箭头（像素：16 X 16）。现在这两张图片的目的是在行之间交换。通过单击特定行的向上箭头，整个行的值将与上一行交换，而向下箭头则正好相反。

有一个条件，如果选定的行是最上面的一行或最后一行，那么点击向上箭头和点击向下箭头将分别不起作用。

我已经完成了除此交换之外的所有其他工作。我不知道。但是对于您的信息数据库有一个字段“SEQUENCE”。通过交换行，SEQUENCE 将保持为第一行为 1，第二行为 2，依此类推。现在如果发生交换，那么第 2 行可能会占据第 1 行的位置，它的当前序列也将从 2 更改为 1。该值将存储在隐藏的文本字段中。

请帮忙！！

上移和下移都应该适用于第一行和最后一行条件。我也得下去……请帮忙……

【问题讨论】：

标签： jquery asp.net-mvc-4 razorengine

【解决方案1】：

其中的 UI 部分非常简单。给定一些标记，例如：

<table>
   <tr>
      <td>Blah blah blah</td>
      <td>
         <img src="..." class="up-arrow" />
         <img src="..." class="down-arrow" />
      </td>
   </tr>
   <tr>...</tr>
   ...
</table>

您可以使用 jQuery 来上下移动 <tr> 元素：

$('.up-arrow').on('click', moveRowUp);

function moveRowUp() {
    var $row = $(this).closest('tr');
    var $prevRow = $row.prev();
    if ($prevRow.length) $row.insertBefore($prevRow);
}

如果您还询问如何将此交换存储回数据库，我不确定是否可以在不了解您的架构的情况下回答。一种方法是在移动 <tr> 时跟踪行 ID 并交换它们。

【讨论】：

根据你的jQuery版本，你可能需要使用.bind()而不是.on()
我已经使用了你的代码......很抱歉，由于之前的一些问题，我已经延迟了，问题是 TR 每次都会向上移动两个步骤，总是......

【解决方案2】：

jQuery('input[name="selectChkBx"]:checked').each(function () {
                    id = this.id;
                    var row = $(this).closest('tr');
                    console.log(row);
                    row.insertAfter(row.next());  // For Moving Down
                    //row.insertBefore(row.prev()); // For Moving Up
                });

只需要创建两个按钮。需要将 id 放在那里，然后使用按钮交换行的 id 进行 onclick 可以完成。也感谢“Impirator”。他已经为我指明了道路。最终完成。非常感谢大家花时间查看此代码。

【讨论】：