二级联动
//产品线改变事件 $(function () { $("#ProductLineGroup").change(function () { GetSecondGroup() }); }); //通过产品线得到产品数据 function GetSecondGroup() { $("#ProductGroup").empty(); if ($("#ProductLineGroup").val() != "" || $("#ProductLineGroup").val() != null) { var url = '@Url.Content("~/ClassManager/BindProductList?productLine=")' + $.trim($("#ProductLineGroup").val()); $.getJSON(url, function (data) { var str = ""; $.each(data, function (i, item) { str += "<option value='" + data[i].Value + "'>" + data[i].Text + "</option>"; }) $("#ProductGroup").html(str); }); } }
public ActionResult BindProductList(string productLine) { List<SelectListItem> productList = new List<SelectListItem>(); SelectListItem sItem = new SelectListItem(); sItem.Text = LangHelper.WordGet("--请选择--", this.LanguageAutoDetect); sItem.Value = ""; productList.Add(sItem); if (!string.IsNullOrEmpty(productLine)) { DataTable dtProduct = tOpClassBusiness.FindProductTable(productLine); if (dtProduct != null) { foreach (DataRow item in dtProduct.Rows) { SelectListItem it = new SelectListItem(); it.Text = item["ProductLineName"].ToString(); it.Value = item["ProductLineID"].ToString(); productList.Add(it); } } } return Json(productList, JsonRequestBehavior.AllowGet); }
HTML:
if (custom.FieldType == "1") { <tr> <td class="labelTdWidth tdLabelBg"><label>@ViewBag.ProductLineText</label></td> <td class="textTdWidth" colspan="3"> @Html.DropDownList("ProductLineGroup", null, new { style = "" })</td> </tr> } if (custom.FieldType == "2") { <tr> <td class="labelTdWidth tdLabelBg"><label>@ViewBag.ProductText</label></td> <td class="textTdWidth" colspan="3"> @Html.DropDownList("ProductGroup", null, new { style = "" })</td> </tr> }
ViewData["ProductLineGroup"] = FindProductLine(ViewBag.DefaultSelect);
其中这个ViewData["ProductLineGroup"]是@Html.DropDownList("ProductLineGroup")的对应值
一般这样写也可 以:@Html.DropDownList(“iProductLineId”,"@ViewData["ProductLineGroup"]")
@Html.DropDownList("ProductList", ViewData["ProductList"] as IEnumerable<SelectListItem>, new { @onchange = "GetThreeGroup(this);" })
以上是原生方式,下面是easyUI方式:
HTML:
<input id="productLine" name="productLine" class="easyui-combotree" data-options="valueField:'id',textField:'text'" panelHeight="100" style="width:170px;+width:175px;_width:175px;"/> <input id="product" name="product" class="easyui-combotree" data-options="valueField:'id',textField:'text'" panelHeight="100" style="width:170px;+width:175px;_width:175px;"/>
JS:
//加载产品线 $('#productLine').combobox({ url: '@Url.Action("GetProductLineListByDomain", "OfferingGroupByTempV4")' + "?domainId=" + $("#domainId", parent.document).html(), valueField: 'id', textField: 'text', onSelect: function (record) { $('#product').combobox({ url: '@Url.Action("GetProductListByProductLine", "OfferingGroupByTempV4")' + "?productLine=" + record.id, //GetProductListByProductLine valueField: 'id', textField: 'text' }) } });
Controller:
public ActionResult GetProductLineListByDomain(Guid domainId) { List<TSysProductLine> productLineList = ModelConvertHelper<TSysProductLine>.ConvertToModel(tOpClassBusiness.FindProductLineTable(domainId)).ToList(); List<ComboTree> list = new List<ComboTree>(); ComboTree combo; foreach (TSysProductLine p in productLineList) { combo = new ComboTree(); combo.id = p.ProductLineID; combo.text = p.ProductLineName; list.Add(combo); } return Json(list); }
ComboTree.cs
public class ComboTree { private Guid _id = Guid.Empty; private string _text = string.Empty; private string _state = "open";//"closed"; private List<ComboTree> _children = new List<ComboTree>(); /// <summary> /// /// </summary> public Guid id { get { return _id; } set { _id = value; } } /// <summary> /// /// </summary> public string text { get { return _text; } set { _text = value; } } /// <summary> /// 状态:默认为:open, closed 关闭该节点下的子节点,open:打开该节点下的子节点 /// </summary> public string state { get { return _state; } set { _state = value; } } /// <summary> /// /// </summary> public List<ComboTree> children { get { return _children; } set { _children = value; } } }
阿里云: www.aliyun.com
华赐软件: www.huacisoft.com
C#开源社区: www.opencsharp.net
清泓美肤苑: 清泓美肤苑
bootstrap权限管理系统: Asp.Net Mvc3 bootstrap权限管理系统