Как сделать флажок с возможностью перестановки в ASPNET MVC? - PullRequest
Новая
       20

Как сделать флажок с возможностью перестановки в ASPNET MVC?

0 голосов
/ 06 июля 2011

У меня есть требование, которое требует флажок с возможностью перестановки в ASPNET MVC.

Основная цель - узнать, какие пользователи-флажки выбраны, и разрешить им изменять порядок элементов флажка так, как они хотят.

Мой вопрос заключается в том, существует ли какой-либо существующий элемент управления?как это доступно в MVC (или JQuery)?Если нет, есть ли какой-нибудь лучший контроль пользовательского интерфейса для выполнения моей цели?

Я нашел похожий вопрос без соответствующего ответа. список с флажками

Прошу вашего ответа.Спасибо.

1 Ответ

2 голосов
/ 06 июля 2011

почему бы вам не использовать нормальный флажок с jQuery-UI Сортируемый ? 

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

...