Мультиселектная группировка программно - MVC - PullRequest
Новая
       9

Мультиселектная группировка программно - MVC

0 голосов
/ 30 ноября 2018

У меня есть таблица в этом формате:

формат таблицы

И я пытаюсь получить этот результат программно:

желательнорезультат

Я использую asp.net mvc с бритвой.Я знаю, что есть пример здесь , но я не смог приспособиться в моей ситуации :( Можете ли вы привести пример, пожалуйста?

ДОБАВИЛ мою работу:

Я думаю, что должен получитьзаписи через JSON, я не прав? И я не очень хорошо в JSON 

<script type="text/javascript">
      $('#ddl_Hours').multiselect();
</script>

<select id="ddl_Hours" multiple>
           @foreach (myModel item in ((MultiSelectList)ViewBag.MyList).Items)
           {
              int dayID = 0;

              if (dayID != item.DayID )
              {
                 <optgroup label="@item.DayID ">
                     <option value="@item.HourID">@item.Name</option>
                 </optgroup>
              }

              dayID = item.DayID;
            }
</select>

Контроллер: 

var list = (from p in db.T_MYTABLE
            select new MyModel { HourID = p.HourID ,
                                 DayID = p.DayID,
                                 Name = p.Name 
                                }).ToList();

ViewBag.MyList= new MultiSelectList(list, !string.IsNullOrEmpty(selectedValue) ? selectedValue.Split(',').ToArray() : null);

1 Ответ

0 голосов
/ 30 ноября 2018

Для создания такого сгруппированного мультиселектора с помощью плагина jQuery, сначала вам нужно отобразить HTML-разметку для сгруппированных опций, как показано ниже 

<select id="ddl_Hours">
    <optgroup label="4">
        <option value="1">00.00</option>
        <option value="2">01.00</option>
        <option value="3">02.00</option>
        <option value="4">03.00</option>
    </optgroup>
    <optgroup label="2">
        <option value="5">04.00</option>
        <option value="6">05.00</option>
        <option value="7">06.0</option>
    </optgroup>
    <optgroup label="3">
        <option value="8">07.00</option>
        <option value="9">08.00</option>
    </optgroup>
</select>

Чтобы сгенерировать вышеуказанную разметку в вашем представлении, вы можете создатьсписок элементов в вашем методе действия со свойством Group. 

var list = db.T_MYTABLE.ToList();

//Create a list of Groups
var groups = list.Select(x => x.DayId)
            .Select(f => new SelectListGroup() { Name = "Day " + f.ToString() }).ToList();

var groupedOptions = list.Select(x => new SelectListItem
{
    Value = x.HourId.ToString(),
    Text = x.Name,
    Group = groups.FirstOrDefault(a => a.Name == "Day " + x.DayId.ToString())
}).ToList();

ViewBag.MyList = groupedOptions;

return View();

Предполагая, что Name свойство вашей сущности имеет тип string.Если это числовой тип, используйте метод ToString() при установке значения свойства Text в проекционной части вышеупомянутого запроса linq (Text=x.Name.ToString())

Теперь в представлении бритвы вы можете использоватьHtml.DropDownList вспомогательный метод для визуализации элемента SELECT. 

@Html.DropDownList("ddl_Hours", ViewBag.MyList as List<SelectListItem>)

или для множественного выбора 

@Html.ListBox("ddl_Hours", ViewBag.MyList as List<SelectListItem>)

Теперь вы можете вызвать плагин jQuery, чтобы сделать его модным.Я бы назвал это внутри документа ready событие 

$(function () {

    $('#ddl_Hours').multiselect();

})

и вуаля!

enter image description here

...