C# MVC LayUI实现下拉框二级联动

一、layui.use

1、LayUI的官方文档:LayUI官方开始使用文档
2、layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载;
3、layui.use就是一种加载模块的方式。
如下代码:

	//LayUI渲染以及启动模块
	  layui.use(['form', 'layedit', 'laydate'], function () {
                var form = layui.form,//获取form模块
                layer = layui.layer,//获取layer模块
                layedit = layui.layedit,//获取layedit模块
                laydate = layui.laydate,//获取laydate模块
                $ = layui.$;

二、创建控制器或在已有的控制器中添加在操作方法

		/// <summary>
        /// 获取部门信息
        /// </summary>
        [HttpPost]
        public JsonResult GetDeplist()
        {
            using (ERPEntities db = new ERPEntities())
            {
                db.Configuration.ProxyCreationEnabled = false;//关闭EF的默认加载
                var Deplist = db.dep.ToList();
                //将数据Json化并传到前台视图
                return Json(new { data = Deplist }, JsonRequestBehavior.AllowGet);
            }
        }

		/// <summary>
         /// 通过部门ID来获取角色
         /// </summary>
         /// <param name="dep_id">部门ID</param>
         /// <returns></returns>
         [HttpPost]
        public JsonResult GetRolelist(int dep_id)
        {
            using (ERPEntities db = new ERPEntities())
            {
                db.Configuration.ProxyCreationEnabled = false;//关闭EF的默认加载
                var Roles = db.role.Where(r => r.dep_id == dep_id).ToList();//通过部门ID 查找到对应的角色
                List<SelectListItem> item = new List<SelectListItem>();
                foreach (var Role in Roles)
                {
                    item.Add(new SelectListItem { Text = Role.name, Value = Role.role_id.ToString() });
                }
                //将数据Json化并传到前台视图
                return Json(new { data = item }, JsonRequestBehavior.AllowGet);

            }
        }

三、在需要显示多级联动的视图页面写上如下代码

<!--使用二级联动需要用LayUI的“layui-form”属性,不然会联动失效-->  
    <!--部门角色二级联动-->
    <div class="layui-form-item">
        <label class="layui-form-label">部门:</label>
        <div class="layui-input-inline">
            <select name="Dep" lay-filter="parentDep" id="Dep">
                <option value="">——请选择部门——</option>
            </select>
        </div>
        <label class="layui-form-label">角色:</label>
        <div class="layui-input-inline">
            <select name="Role" id="Role" lay-filter="RoleInfo">
                <option value="">——请选择角色——</option>
            </select>
        </div>
    </div>

四、JS部分的代码

注意: 有的伙伴可能需要先引入jquery;根据自己的需求以及实际情况进行引入

<script src="~/Scripts/jquery-3.5.1.js"></script>
<script type="text/javascript">
    	// 封装获取角色的函数:通过部门ID得到角色
    	function getRoles(data) {
        	//获取到部门框中的Value部门的ID
        	var dep_id = {
        	    dep_id: data.value
        	}
         //再利用ajax将数据传到后端,来获取到对应下拉框选项而出现的值
        //检查项目添加到下拉框中
        $.ajax({
            url: "@Url.Action("GetRolelist")",
            dataType: 'json',
            data: JSON.stringify(dep_id),//将参数Json化,在传递给后台控制器
            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");//重新渲染 固定写法
            }
        });
    };
    //LayUI渲染以及启动模块
	  layui.use(['form', 'layedit', 'laydate'], function () {
                var form = layui.form,//获取form模块
                layer = layui.layer,//获取layer模块
                layedit = layui.layedit,//获取layedit模块
                laydate = layui.laydate,//获取laydate模块
                $ = layui.$;
                // 得到部门
                $.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");//重新渲染 固定写法
                    }
                });
                // 联动
                form.on('select(parentDep)', function (data) {
					//监听到了下拉框选择的选项,传递过来
                    //console.info(data);
                    getRoles(data);
                });
		});
</script>

1.select的chage监听事件使用:

form.on(‘select(myselect)’, function(data){}) 其中myselect是select的 lay-filter属性值

2.数据异步加载到select的option中之后,点击该select会发现layui的选中效果不起作用,需要使用
form.render(‘select’);重新渲染一次,就可以正常使用。

联动效果如下:

二级联动

评论 3 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

TLucas

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值