精华内容
下载资源
问答
  • 做的比较简单,先从后台直接把第一级菜单输出,然后点击二级菜单的时候再动态展示商品类别请选择{volist name="list" id="vo"}{$vo.cate_name}{/volist}form.on('select(one_cate)', function(data){//data.value ...

    做的比较简单,先从后台直接把第一级菜单输出,然后点击二级菜单的时候再动态展示

    商品类别

    请选择

    {volist name="list" id="vo"}

    {$vo.cate_name}

    {/volist}

    form.on('select(one_cate)', function(data){

    //data.value 得到被选中的值

    var url = '/admin/category/selec/' + data.value;

    $.get(url,function(data){

    $("#two_cate").empty();

    $("#two_cate").append(new Option("请选择分类",""));

    $.each(data,function(index,item){

    $("#two_cate").append(new Option(item,index));

    console.log(index,item);

    });

    layui.form.render("select");

    });

    });

    重点就两个

    1.$("#two_cate").append(new Option(item,index));将遍历的数据插入到select中,比原来的拼接字符串省事。

    2.layui.form.render("select");重载select模块,否则不会展示

    展开全文
  • Layui tree 下拉菜单树 1.效果: 2.html 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name...

    Layui tree 下拉菜单树

     

    1.效果:

     

     

     

    2.html  代码:

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
        <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
        <style type="text/css">
            .downpanel .layui-select-title span {
                line-height: 38px;
            }
    
            /*继承父类颜色*/
            .downpanel dl dd:hover {
                background-color: inherit;
            }
        </style>
        <style type="text/css">
            body {
                height: 100%;
                width: 100%;
                background-size: cover;
                margin: 0 auto;
            }
            td {
                font-size: 12px !important;
            }
    
            .layui-form-checkbox span {
                height: 30px;
            }
            .layui-field-title {
                border-top: 1px solid white;
            }
            table {
                width: 100% !important;
            }
    
        </style>
    
    </head>
    <body>
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">文章栏目</label>
            <div class="layui-input-inline">
                <div class="layui-unselect layui-form-select downpanel">
                    <div class="layui-select-title">
                        <span class="layui-input layui-unselect" id="treeclass">选择栏目</span>
                        <input type="hidden" name="selectID" value="0">
                        <i class="layui-edge"></i>
                    </div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd>
                            <ul id="classtree"></ul>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </form>
    
    
    <script src="static/layui/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script type="text/javascript">
        layui.use(['element', 'tree', 'layer', 'form', 'upload'], function () {
            var $ = layui.jquery, tree = layui.tree;
            tree({
                elem: "#classtree"
                ,
                nodes: [{
                    name: '常用文件夹',
                    id: 1,
                    alias: 'changyong',
                    children: [{name: '所有未读', id: 11, href: 'http://www.layui.com/', alias: 'weidu'}, {
                        name: '置顶邮件',
                        id: 12
                    }, {name: '标签邮件', id: 13}]
                }, {
                    name: '我的邮箱',
                    id: 2,
                    spread: true,
                    children: [{
                        name: 'QQ邮箱',
                        id: 21,
                        spread: true,
                        children: [{
                            name: '收件箱',
                            id: 211,
                            children: [{name: '所有未读', id: 2111}, {name: '置顶邮件', id: 2112}, {name: '标签邮件', id: 2113}]
                        }, {name: '已发出的邮件', id: 212}, {name: '垃圾邮件', id: 213}]
                    }, {
                        name: '阿里云邮',
                        id: 22,
                        children: [{name: '收件箱', id: 221}, {name: '已发出的邮件', id: 222}, {name: '垃圾邮件', id: 223}]
                    }]
                }]
                ,
                click: function (node) {
                    var $select = $($(this)[0].elem).parents(".layui-form-select");
                    $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='selectID']").val(node.id);
                }
            });
            $(".downpanel").on("click", ".layui-select-title", function (e) {
                $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
                $(this).parents(".downpanel").toggleClass("layui-form-selected");
                layui.stope(e);
            }).on("click", "dl i", function (e) {
                layui.stope(e);
            });
            $(document).on("click", function (e) {
                $(".layui-form-select").removeClass("layui-form-selected");
            });
    
        });
    </script>
    </body>
    </html>
    </body>
    </html>
    复制代码
     
     
     
    注意: 1 vue和layui的form表单冲突,去除layuiform即可
    2

    转载于:https://www.cnblogs.com/matengfei123/p/9444095.html

    展开全文
  • layui自动生成的格式,不能用之前的JQ方式来实现select下拉菜单自动选择功能 layui select的格式: 下面这个框里面的dl-dd是layui自动生成的,也就是关键所有,看下具体的结构图:   //选择需要选中的对象 var ...

    layui自动生成的格式,不能用之前的JQ方式来实现select下拉菜单自动选择功能

    layui select的格式:

    下面这个框里面的dl-dd是layui自动生成的,也就是关键所有,看下具体的结构图:

    https://img-blog.csdn.net/20180304175144784?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzM1OTQzODA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

     

    //选择需要选中的对象
    var select = 'dd[lay-value=' + data.id + ']';
    
    //需要用点击事件来实现选中  test为select的id
    $('#test').siblings("div.layui-form-select").find('dl').find(select).click();

    mark it.

    展开全文
  • 有不同的代理商,也就是店铺....代码实现 <div class="layui-inline"> <label class="layui-form-label">代理商</label> <div class="layui-input-inline"> <sele

    有不同的代理商,也就是店铺.不同店铺里会有不同的分类,点击代理商选择一个店铺,才能点击商品分类选择分类.在这里插入图片描述
    直接点商品分类是没有内容的
    在这里插入图片描述
    选择代理商之后再再点击商品分类即可看到该商铺下的分类
    在这里插入图片描述
    代码实现

    <div class="layui-inline">
    				  <label class="layui-form-label">代理商</label>
    				  <div class="layui-input-inline">
    					  <select name="merchant" id="merchant" value="${pro.merchant_id?default(0)}"  lay-verify="required" lay-search="" lay-filter="one_cate">
    						  <!--<option >请选择</option>-->
    					  </select>
    				  </div>
    
    				  <!--<div class="layui-form-item">-->
    				  <label class="layui-form-label"><span style="color:red"></span>商品分类</label>
    				  <div class="layui-input-inline">
    					  <select name="protype" id="protype" lay-filter="pid" lay-verify="required"  value="${pro.pro_type?default(0)}" >
    
    						  <option value="0">请先选择店铺</option>
    					  </select>
    				  </div>
    				  <!--</div>-->
    			  </div>
    

    获取商铺的ajax

    $.ajax({
    		url:"..",
    		dataType:"json",
    		type:"POST",
    		success:function(res){
    			console.log(res);
    			if(res.length > 0){
    				var count="";
    				for(var i in res){
    					count += "<option value="+res[i].id+">"+res[i].merchant_name+"</option>";
    				}
    				$("#merchant").append(count);
    				$("#merchant").val('${pro.merchant_id?default("")}');
    				form.render();
    			}
    		}
    	});
    
    

    获取子分类的代码片

    form.on('select(one_cate)', function(data){
    		var merchant = data.value;
    		console.log("test--" + data.value);
    		if( merchant > 0) {
    			console.log("true");
    			$.ajax({
    				url:"",
    				dataType:"json",
    				type:"POST",
    				data:{id:merchant},
    				success:function(res){
    					console.log(res);
    					if(res.length > 0){
    						var count="";
    						for(var i in res){
    							count += "<option value="+res[i].id+">"+res[i].type_name+"</option>";
    						}
    						$("#protype").html(count);
    						$("#protype").val('${pro.pro_type?default("")}');
    						form.render();
    					}
    				}
    			});
    		}else {
    			console.log("else");
    			var dj = "<option value='0'>---请选择--</option>";
    			$("#protype").html(dj);
            	$("#protype").val('0');
    			form.render();
    		}
    		layui.form.render("select");
    	});
    
    

    再把选中的id传给后台即可

    参考来源: 点我到达

    展开全文
  • 这是一个最基本的左侧菜单栏,实现的过程很简单,官方的说明文档就有,但是我在导入layer.js之后,直接复制这段官方代码到我的编辑器上时,发现页面是这样的: 发现,绑定属性的菜单并没有下拉选项,这个问题在我...
  • 实现的过程很简单,官方的说明文档就有,但是我在导入layer.js之后,直接复制这段官方代码到我的编辑器上时,发现页面是这样的:发现,绑定属性的菜单并没有下拉选项,这个问题在我导入layer.all.js之后解决了,而且...
  • 参考来源网址稍微做了点修改,加了下拉菜单提示箭头,上移了一点下拉菜单位置效果图:代码如下:layout 后台大布局 - Layui.layui-layout-left{position: absolute !important; left: 0px; top: 0;}/*layui child ...
  • layui实现三级联动,在网上看到一个插件,挺好用的: 原文:https://blog.csdn.net/DSRCCSDN/article/details/84728396 插件预览地址:http://www.jpw.net/code/636431820895762098 使用了这个插件,基本可以...
  • 最开始一直试了很多方法onchange,change都不行 只能在网页上实现隐藏和显示,但是在项目中并不能实现 Layui需要添加lay-filter属性 Js文件 Jquery中hide()表示隐藏,show()表示显示,还有一个toggle()表示显示和隐藏 ...
  • layui下拉菜单的按钮组(数据表格表头版) 最近工作中需要使用layui在数据表格的表头工具栏里添加一个下拉按钮组,layui目前还没有开发出相关的功能,所以需要自己手动拼写,在参考了博友们的部分文章后,做了一部分...
  • layui实现树形下拉列表源码,点击下载 二. 插入css样式、引用js插件 <link rel="stylesheet" href="layui/css/layui.css" media="all"> <style type="text/css"> .treeSelect .layui-select-title ...
  • 使用layui实现的左侧菜单栏以及动态操作tab项

    万次阅读 多人点赞 2018-03-01 15:45:56
    这是一个最基本的左侧菜单栏,实现的过程很简单,官方的说明文档就有,但是我在到入layer.js之后,直接复制这段官方代码到我的编辑器上时,发现页面是这样的:发现,绑定属性的菜单并没有下拉选项,这个问题在我导入...
  • 今天实现的功能主题是用layui实现多级下拉菜单,上图: 实现界面的话要引入layui的js文件以及cs文件,官方网址为:https://www.layui.com/doc/ 在页面头部引入文件,选择自己文件所在路径 <link rel=...
  • 这是一个最基本的左侧菜单栏,实现的过程很简单,官方的说明文档就有,但是我在导入layer.js之后,直接复制这段官方代码到我的编辑器上时,发现页面是这样的: 发现,绑定属性的菜单并没有下拉选项,这个问题在我...
  • 在实际项目中遇到使用下拉选择时能需要输入选项中不存在的值,软件中使用的是Layui的框架,其中不存在需求的控件,但是其下拉菜单控件有这类似的功能,只是不能保存输入值和修改时赋值的问题(因为选项中可能不存在...
  • 文章目录使用Jquery实现对select的监听使用layui实现对select的监听入坑友情提示 这几天开始使用layui前端插件,但是完全没有习惯里面的一些监听事件。这不今天我写form表单中下拉select菜单监听就跳坑了!!! 任务...
  • 实现什么效果呢?根据用户权限加载目录,如果用户有某一节点的权限则加载,如果没有则不加载,这样可以更加安全。 后面根据权限获取二级目录。思路都是一样的。 这是后台json获取代码段 public function index() ...
  • 在很多很多页面里都要用到下拉菜单,什么一级菜单,二级菜单,三级菜单,,,,等等,这时俺们就想到了很多很多相关的插件,什么bootstrap啊,什么layui啊。首先,下面bootstrap俺不得不说一下,俺们都知道用插件...
  • layui使用tree完美整合树形下拉菜单,实例已实现初始化下拉列表、动态赋值、获取选中值等功能,一看就懂,下载即用!
  • Dropdowns——下拉菜单

    2019-06-18 08:53:47
    下拉菜单可以有多种实现途径,可以编写CSS代码,可以借助layui,也可以借助bootstrap插件等等 在使用bootstrap插件的前提下,将下拉列表的按钮和下拉菜单包含在dropdown中,或者另外声明position:relative元素,...
  • 2、点击“选择”中的“色彩范围”,并在下拉菜单中选择“高光”选项,点击“确定”,即可选中高光。 需求:下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的:如何用ps做一寸证件照?(具体步骤)_WEB...
  • 下拉菜单 &lt;div class="layui-input-inline"&gt;  &lt;select name="provid" id="provid" lay-filter="provid"&gt;  &lt;option value="&...
  • Layui 的select想要实现点击即刷新下拉菜单功能

空空如也

空空如也

1 2
收藏数 40
精华内容 16
关键字:

layui实现下拉菜单