0

ASPNET MVC で再配置機能を備えたチェックボックスが必要な要件があります。

主な目的は、ユーザーがどのチェックボックスを選択したかを把握し、チェックボックス項目の順序を自由に再配置できるようにすることです。

私の質問は、mvc(またはjquery)で利用可能なこのような既存のコントロールはありますか? いいえの場合、私の目的を達成するためのより良い UI コントロールはありますか?

適切な回答がない同様の質問を見つけました。 チェックボックス付きのリストボックス

お返事をお願いします。ありがとう。

4

1 に答える 1

2

jQuery-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かみそりの構文で簡単に変換できます。

@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 に答える