如何在 ASPNET MVC 中制作具有重新排列功能的复选框？

Question

我有一个要求，需要在 ASPNET MVC 中具有重新排列功能的复选框。

主要目的是了解用户选择了哪个复选框，并允许他们根据需要重新排列复选框项目顺序。

我的问题是，mvc（或jquery）中是否有类似的现有控件？如果没有，是否有更好的 UI 控件来实现我的目的？

我发现类似的问题没有合适的答案。 带有复选框的列表框

我请求您的回复。谢谢。

Answer 1

为什么不在 jQuery-UI Sortable< 中使用普通复选框 /strong>？

<ul id="sortable" class='ckb-list'>
  <li><input id="chb-1" type="checkbox" value="1"/> Checkbox 1</li>
  <li><input id="chb-2" type="checkbox" value="2"/> Checkbox 2</li>
  <li><input id="chb-3" type="checkbox" value="3"/> Checkbox 3</li>
  <li><input id="chb-4" type="checkbox" value="4"/> Checkbox 4</li>
  <li><input id="chb-5" type="checkbox" value="5"/> Checkbox 5</li>
</ul>

然后申请

$(function() {
  // sortable methods
  $( "#sortable" ).sortable();
  $( "#sortable" ).disableSelection();

  // retrieve selection list
  $(".btn-save").bind("click", function() {

    var ids = "",
        iBox = 0;

    // foreach input in .ckb-list
    $(".ckb-list li > input").each(function() {

      if($(this).prop("checked")) {
        // it checked, so, we save
        ids += ++iBox + ". " + $(this).attr("id") + "\n";
      }

    });

    alert("the checkboxes selected and sorted are:\n\n" + ids);
  });
});

JSBIN 中的实时示例

您可以轻松转换 具有剃刀语法的复选框 5：

@Html.Checkbox("chb-5", Model.CheckBox5Value)

---

为了持久化，您需要做的就是按照正确的顺序编写 HTML，让我们想象一下您有这个表：

[TblUserOptions] 
UserOption_id
Option_id
Value
Order

您需要做的就是：

<ul id="sortable" class='ckb-list'>
@foreach(var option in Model.TblUserOptions
                            .OrderBy(x => x.Order)
                            .ThenByDescending(x => x.Option_id))
{
    <li>@Html.Checkbox("chb-" + option.Option_id, option.Value)</li>
}
</ul>

您将始终将复选框正确排序开始，保存后您需要做的就是循环遍历所有复选框并更新新的 Order 值。