以编程方式多选分组 - MVC

Question

我有一个这种格式的表格：

table format

我尝试以编程方式获得此结果：

desired result

我正在使用带有剃须刀的 asp.net mvc。 我知道有一个例子here，但我无法适应我的情况:( 可以举个例子吗？

添加了我的作品：

我认为我必须通过 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);

Answer 1

要使用 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 类型。如果是数值类型，在上述linq查询的投影部分设置Text属性值时使用ToString()方法（Text=x.Name.ToString()）

现在在您的 Razor 视图中，您可以使用 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();

})

瞧！