Question

我有一个这样的表格：

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

我用带剃须刀的asp.net mvc。我知道有一个示例here，但我无法适应我的情况：( 你能举个例子吗？

添加了我的作品：

我认为我必须通过json获取记录，我错了吗？而且我不太擅长json

array[i]

控制器：

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

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查询（ToString()）的投影部分中设置Text属性值时，请使用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();

})

还有瞧！

以编程方式进行多选分组-MVC

1 个答案: