Question

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

在其他5列中，有4列来自数据库。其余列是优先级筛选器列。因为我用了两张照片。一个是UP-ARROW，另一个是DOWN-ARROW（像素：16 X 16）。现在这两张图片的目的是在行之间交换。通过单击特定行的向上箭头，整个行值将与上一行交换，而对于向下箭头则相反。

有条件，如果所选行是最顶行或最后一行，那么单击向上箭头并单击向下箭头将不会分别工作。

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

请帮忙!!

向上移动向下移动应该适用于第一行和最后一行条件。我也需要下来......请帮忙......

Answer 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);
}

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

Answer 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”也。他给我指明了方向。最终完成了。非常感谢每个人花时间看这段代码。

在Webgrid中的两行之间交换

2 个答案: