0

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

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

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

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

我请求你的回应。谢谢。

4

1 回答 1

2

为什么不使用带有 jQ​​uery-UI Sortable的普通复选框？

<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 中的实时示例

<input id="chb-5" type="checkbox" value="5"/> Checkbox 5您可以使用 razor 语法轻松转换：

@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值。

于 2011-07-06T06:52:17.797 回答