C# MVC 使用LayUI實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)的功能

更新時(shí)間：2020年06月28日 11:45:11 作者：TomLucas

這篇文章主要介紹了C# MVC 如何使用LayUI實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)，文中示例代碼非常詳細(xì)，供大家參考和學(xué)習(xí)，感興趣的朋友可以了解下

一、layui.use

1、LayUI的官方使用文檔：https://www.layui.com/doc/

2、layui的內(nèi)置模塊不是默認(rèn)就加載好的，必須要執(zhí)行啟動(dòng)模塊的這種方法后模塊才會(huì)加載；

3、layui.use就是一種加載模塊的方式。

如下代碼：

//LayUI渲染以及啟動(dòng)模塊
  layui.use(['form', 'layedit', 'laydate'], function () {
    var form = layui.form,//獲取form模塊
    layer = layui.layer,//獲取layer模塊
    layedit = layui.layedit,//獲取layedit模塊
    laydate = layui.laydate,//獲取laydate模塊
    $ = layui.$;

二、創(chuàng)建控制器或在已有的控制器中添加在操作方法

/// <summary>
  /// 獲取部門(mén)信息
  /// </summary>
  [HttpPost]
  public JsonResult GetDeplist()
  {
   using (ERPEntities db = new ERPEntities())
   {
    db.Configuration.ProxyCreationEnabled = false;//關(guān)閉EF的默認(rèn)加載
    var Deplist = db.dep.ToList();
    //將數(shù)據(jù)Json化并傳到前臺(tái)視圖
    return Json(new { data = Deplist }, JsonRequestBehavior.AllowGet);
   }
  }

  　 /// <summary>
   /// 通過(guò)部門(mén)ID來(lái)獲取角色
   /// </summary>
   /// <param name="dep_id">部門(mén)ID</param>
   /// <returns></returns>
   [HttpPost]
  public JsonResult GetRolelist(int dep_id)
  {
   using (ERPEntities db = new ERPEntities())
   {
    db.Configuration.ProxyCreationEnabled = false;//關(guān)閉EF的默認(rèn)加載
    var Roles = db.role.Where(r => r.dep_id == dep_id).ToList();//通過(guò)部門(mén)ID 查找到對(duì)應(yīng)的角色
    List<SelectListItem> item = new List<SelectListItem>();
    foreach (var Role in Roles)
    {
     item.Add(new SelectListItem { Text = Role.name, Value = Role.role_id.ToString() });
    }
    //將數(shù)據(jù)Json化并傳到前臺(tái)視圖
    return Json(new { data = item }, JsonRequestBehavior.AllowGet);
   }
  }

三、在需要顯示多級(jí)聯(lián)動(dòng)的視圖頁(yè)面寫(xiě)上如下代碼

<!--部門(mén)角色二級(jí)聯(lián)動(dòng)-->
 <div class="layui-form-item">
  <label class="layui-form-label">部門(mén)：</label>
  <div class="layui-input-inline">
   <select name="Dep" lay-filter="parentDep" id="Dep">
    <option value="">——請(qǐng)選擇部門(mén)——</option>
   </select>
  </div>
  <label class="layui-form-label">角色：</label>
  <div class="layui-input-inline">
   <select name="Role" id="Role" lay-filter="RoleInfo">
    <option value="">——請(qǐng)選擇角色——</option>
   </select>
  </div>
 </div>

四、JS部分的代碼

　　注意：有的伙伴可能需要先引入jquery；根據(jù)自己的需求以及實(shí)際情況進(jìn)行引入

<script src="~/Scripts/jquery-3.5.1.js"></script>
<script type="text/javascript">
  // 封裝獲取角色的函數(shù)：通過(guò)部門(mén)ID得到角色
  function getRoles(data) {
   //獲取到部門(mén)框中的Value部門(mén)的ID
   var dep_id = {
    dep_id: data.value
   }
   //再利用ajax將數(shù)據(jù)傳到后端，來(lái)獲取到對(duì)應(yīng)下拉框選項(xiàng)而出現(xiàn)的值
  //檢查項(xiàng)目添加到下拉框中
  $.ajax({
   url: "@Url.Action("GetRolelist")",
   dataType: 'json',
   data: JSON.stringify(dep_id),//將參數(shù)Json化，在傳遞給后臺(tái)控制器
   contentType: "application/json",
   type: 'post',
   success: function (result) {
    console.info(result.data);
    $("#Role").empty();//清空下拉框的值
    $.each(result.data, function (index, item) {
     $('#Role').append(new Option(item.Text, item.Value));// 下拉菜單里添加元素
    });
    layui.form.render("select");//重新渲染 固定寫(xiě)法
   }
  });
 };
 //LayUI渲染以及啟動(dòng)模塊
  layui.use(['form', 'layedit', 'laydate'], function () {
    var form = layui.form,//獲取form模塊
    layer = layui.layer,//獲取layer模塊
    layedit = layui.layedit,//獲取layedit模塊
    laydate = layui.laydate,//獲取laydate模塊
    $ = layui.$;
    // 得到部門(mén)
    $.ajax({
     url: "@Url.Action("GetDeplist")",
     dataType: 'json',
     type: 'post',
     success: function (result) {
       $.each(result.data, function (index, item) {
        $('#Dep').append(new Option(item.name, item.dep_id));// 下拉菜單里添加元素
     });
     layui.form.render("select");//重新渲染 固定寫(xiě)法
     }
    });
    // 聯(lián)動(dòng)
    form.on('select(parentDep)', function (data) {
     //監(jiān)聽(tīng)到了下拉框選擇的選項(xiàng)，傳遞過(guò)來(lái)
     //console.info(data);
     getRoles(data);
    });
  });
</script>

1.select的chage監(jiān)聽(tīng)事件使用：

form.on('select(myselect)', function(data){}）其中myselect是select的 lay-filter屬性值

2.數(shù)據(jù)異步加載到select的option中之后，點(diǎn)擊該select會(huì)發(fā)現(xiàn)layui的選中效果不起作用，需要使用
form.render('select');重新渲染一次，就可以正常使用。

聯(lián)動(dòng)效果如下：

以上就是C# MVC 使用LayUI實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)的功能的詳細(xì)內(nèi)容，更多關(guān)于C# 實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: