概述:
1、小数据二级联动
2、大数据二级联动
实现:
1、小数据二级联动思路
请求一次接口返回所有数据,使用脚本控制第二个下拉选择框的内容。
前台代码:
其中:<option childs> childs 中存的是动态生成的 <option> 标记。
<div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 所属库房</label> <div class="col-sm-9"> <select id="RoomId" name="RoomId" class="width-40 form-control" data-placeholder="所属库房"> @foreach (Father father in (IEnumerable<Father>)ViewBag.Rooms) { <option id="option-@father.Id" value="@father.Id" childs="@father.GetOptionsMark()">@father.Name</option> } </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 楼层</label> <div class="col-sm-9"> <select id="FloorId" name="FloorId" class="width-40 form-control" data-placeholder="楼层"> </select> </div> </div> <script type="text/javascript"> $("#RoomId").change(function () { debugger; var roomId = $(this).val(); var childs = $("#option-"+roomId).attr("childs"); $("#FloorId").html(childs); }); </script>
后台代码:
二级联动数据模型:
1 public sealed class Father : Item 2 { 3 public IEnumerable<Child> Items { get; set; } 4 5 /// <summary> 6 /// 获取下拉选项标记 7 /// </summary> 8 /// <returns></returns> 9 public string GetOptionsMark() 10 { 11 StringBuilder sb = new StringBuilder(); 12 foreach (var item in Items) 13 { 14 sb.Append("<option value="" + item.Id + "">" + item.Name + "</option>"); 15 } 16 return sb.ToString(); 17 } 18 } 19 20 public sealed class Child : Item 21 { 22 } 23 24 public abstract class Item 25 { 26 public int Id { get; set; } 27 public string Name { get; set; } 28 }
准备数据:
private IEnumerable<Father> GetRooms(List<Stock_Room> rooms) { var roomIds = rooms.Select(m => m.Id);
//从数据库获取数据 sql: select * from xx where roomId in roomIds 换成自己的 Dao 或 service 层。 var floorsCatch = _floorService.Value.GetFloors(roomIds); return rooms.Select(m => new Father { Id = m.Id, Name = m.Name, Items = floorsCatch.Where(n => n.RoomId == m.Id && n.IsEnable == true) .Select(n => new Child { Id = n.Id, Name = n.Name }) }); }
使用 ajax 获取数据或 mvc 使用 viewbag 都行。
记录一下这个非常简单的二级联动,如果是用其他 UI 组件最好还是用人家写好的。
2、大数据二级联动实现思路
如果数据比较大,每一次第一个下拉框切换的时候都要请求一下后台,获取 json 数据,
前台修改 select 的html 内容,如果内容过多,建议修改 options 多删少填,并修改其中的text 值和value 值。
需要注意的是,如果数据量较大,响应时间过长,需要进行页面级的限制。
比如当用户快速下拉选择,短时间发送多个请求时,服务器响应不及时,脚本堵塞。
这时候需要借助 js 或者其他前端组件限制此种行为。