0

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

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

存在一个条件，如果所选行是最上面的行或最后一行，则单击向上箭头和单击向下箭头将分别不起作用。

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

请帮忙 ！！

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

4

2 回答 2

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>.

于 2014-03-07T20:06:56.137 回答
0 
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”。他已经为我指明了道路。最终完成。非常感谢大家花时间看到这段代码。

于 2014-03-17T08:59:37.007 回答