精华内容
下载资源
问答
  • layuijs实现二级联动

    万次阅读 2018-01-02 17:19:44
    先上效果图 1、默认情况 ...同样,如果选择的是 计算机科学,在二级分类中只显示其子分类 二、代码实现 1、layui 代码 class="layui-form-item"> class="layui-form-label">分类 class="l

    先上效果图

    1、默认情况


    2、选择 一级分类 后

    如选择 Java,则在二级分类中只显示Java的子分类


    同样,如果选择的是 计算机科学,在二级分类中只显示其子分类


    二、代码实现

    1、layui 的代码

    1. <div class="layui-form-item">
    2.        <label class="layui-form-label">分类</label>
    3.        <div class="layui-input-inline">
    4.            <select name="cate1" id="cate1" lay-filter="cate1" required>
    5.                <option value="" selected="">一级分类</option>
    6.                <c:forEach items="${categoryCustomList}" var="c">
    7.                    <c:if test="${c.categoryPid==0}">
    8.                        <option value="${c.categoryId}">${c.categoryName}</option>
    9.                    </c:if>
    10.                </c:forEach>
    11.            </select>
    12.        </div>
    13.        <div class="layui-input-inline">
    14.            <select name="cate2" id="cate2">
    15.                <option value="" selected>二级分类</option>
    16.            </select>
    17.        </div>
    18.    </div>

    博主这里用的是 springmvc,一级分类只需要输出父分类即可。子分类暂时为空,待会儿通过 js 输出即可。

    其中的 ${categoryCustomList} 是控制器向页面传送的,这里就不介绍了。

     

    2、js 代码

    1. //二级联动
    2.      form.on("select(cate1)",function () {
    3.          var optionstring = "";
    4.          var cate1 = $("#cate1").val();
    5.          <c:forEach items="${categoryCustomList}" var="c">
    6.              if(cate1==${c.categoryPid}) {
    7.                  optionstring += "<option name='cate2' value='${c.categoryId}'>${c.categoryName}</option>";
    8.              }
    9.          </c:forEach>
    10.          $("#cate2").html("  <option value=''selected>二级分类</option>"+optionstring);
    11.          form.render('select'); //这个很重要
    12.      })

    因为博主这里使用的是 layui 的框架,所以对表单操作需要用 layui 封装的方法。如果大家没有用 layui,可以直接 $("#cate1").change(...) 这样写。获取分类列表,可以直接用后台传过来的数据,循环输出的话,也可以使用 jQuery 的each 遍历。

     

    这里就不介绍 SpringMVC 的代码了,相信大家很熟悉了。

     

    本文地址:https://liuyanzhao.com/6262.html

    展开全文
  • layui中时间选择使用

    千次阅读 2018-09-22 10:11:55
    1、HTML页面引入layui.js文件 &lt;script src="...使用选择部分代码如下:  &lt;div class="layui-inline layui-col-xs10 layui-col-sm3 layui-col-md3"&gt;  &lt;labe...

    1、HTML页面引入layui.js文件

    <script src="../../plugins/layui/layui.js"></script>

    使用选择器的部分代码如下:

     <div class="layui-inline layui-col-xs10 layui-col-sm3 layui-col-md3">
                <label class="layui-form-label">创建日期</label>
                <div class="layui-input-block">
                    <input type="text" name="search[createDate]" id="createDate" autocomplete="off" class="layui-input">
                </div>
                
      </div>

     

    2、页面对应的js文件中,标红的为时间选择显示出来需要的代码

    var active;
    layui.use(['table','laydate'], function(){
        var token=getToken();
        var $ = layui.$
        var table = layui.table;
        var laydate= layui.laydate;
        .....................

        .....................

        laydate.render({
            //日期范围选择
              elem: '#createDate'
             ,type: 'datetime'
             ,range: '~'      //如果设置 true,将默认采用 “ - ” 分割或 range: '~' 来自定义分割字符
            });

    })

     

    展开全文
  • 在做项目过程中经常会遇到要使用级联选择的时候,级联选择器如何实现多选呢? 先来看看效果: 源代码如下: <html lang="en"> <meta charset="utf-8"> <title>LayUI RC-Cascader</title>...

    在做项目的过程中经常会遇到要使用级联选择的时候,级联选择器如何实现多选呢?
    先来看看效果:
    在这里插入图片描述源代码如下:

    <html lang="en">
      <meta charset="utf-8">
      <title>LayUI RC-Cascader</title>
      <link rel="stylesheet" href="./js/layui-v2.5.6/layui/css/layui.css">
      <style>
        html, body {
          margin: 0;
          padding: 0;
        }
    
        .rc-cascader {
          width: 282px;
        }
    
        #app {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
    
        .main {
          padding: 16px;
        }
      </style>
      <body>
        <div id="app" class="main">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">输入框</label>
                    <div class="layui-input-block">
                        <input type="text" name="areas" value="1000,1368,1398" lay-filter="areasChange" style="display: none;" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                    </div>
                </div>
            </form>
        </div>
      </body>
      <script src="./js/layui-v2.5.6/layui/layui.js"></script>
      <script type="text/javascript">
      layui.config({
        base: './ext/'
      }).extend({
        cascader: 'cascader/cascader'
      }).use(['form', 'jquery', 'cascader'], function () {
        var $ = layui.jquery, cascader = layui.cascader, form = layui.form;
        var areaTree = '[{"id":1000,"province_city":"\u5317\u4eac","fid":"0","children":[{"id":1368,"province_city":"\u5317\u4eac\u5e02","fid":"1000","children":[{"id":1397,"province_city":"\u4e1c\u57ce\u533a","fid":"1368"},{"id":1398,"province_city":"\u897f\u57ce\u533a","fid":"1368"},{"id":1399,"province_city":"\u5d07\u6587\u533a","fid":"1368"},{"id":1400,"province_city":"\u5ba3\u6b66\u533a","fid":"1368"},{"id":1401,"province_city":"\u671d\u9633\u533a","fid":"1368"},{"id":1402,"province_city":"\u6d77\u6dc0\u533a","fid":"1368"},{"id":1403,"province_city":"\u4e30\u53f0\u533a","fid":"1368"},{"id":1404,"province_city":"\u77f3\u666f\u5c71\u533a","fid":"1368"},{"id":1405,"province_city":"\u623f\u5c71\u533a","fid":"1368"},{"id":1406,"province_city":"\u901a\u5dde\u533a","fid":"1368"},{"id":1407,"province_city":"\u987a\u4e49\u533a","fid":"1368"},{"id":1408,"province_city":"\u95e8\u5934\u6c9f\u533a","fid":"1368"},{"id":1409,"province_city":"\u660c\u5e73\u533a","fid":"1368"},{"id":1410,"province_city":"\u5927\u5174\u533a","fid":"1368"},{"id":1411,"province_city":"\u6000\u67d4\u533a","fid":"1368"},{"id":1412,"province_city":"\u5e73\u8c37\u533a","fid":"1368"},{"id":1413,"province_city":"\u5bc6\u4e91\u53bf","fid":"1368"},{"id":1414,"province_city":"\u5ef6\u5e86\u533a","fid":"1368"}]}]},{"id":1001,"province_city":"\u4e0a\u6d77","fid":"0","children":[{"id":1369,"province_city":"\u4e0a\u6d77\u5e02","fid":"1001","children":[{"id":1433,"province_city":"\u9ec4\u6d66\u533a","fid":"1369"},{"id":1434,"province_city":"\u5362\u6e7e\u533a","fid":"1369"},{"id":1435,"province_city":"\u5f90\u6c47\u533a","fid":"1369"},{"id":1436,"province_city":"\u957f\u5b81\u533a","fid":"1369"},{"id":1437,"province_city":"\u9759\u5b89\u533a","fid":"1369"},{"id":1438,"province_city":"\u666e\u9640\u533a","fid":"1369"},{"id":1439,"province_city":"\u95f8\u5317\u533a","fid":"1369"},{"id":1440,"province_city":"\u8679\u53e3\u533a","fid":"1369"},{"id":1441,"province_city":"\u6768\u6d66\u533a","fid":"1369"},{"id":1442,"province_city":"\u5b9d\u5c71\u533a","fid":"1369"},{"id":1443,"province_city":"\u95f5\u884c\u533a","fid":"1369"},{"id":1444,"province_city":"\u5609\u5b9a\u533a","fid":"1369"},{"id":1445,"province_city":"\u677e\u6c5f\u533a","fid":"1369"},{"id":1446,"province_city":"\u91d1\u5c71\u533a","fid":"1369"},{"id":1447,"province_city":"\u9752\u6d66\u533a","fid":"1369"},{"id":1448,"province_city":"\u6d66\u4e1c\u65b0\u533a","fid":"1369"},{"id":1449,"province_city":"\u5357\u6c47\u533a","fid":"1369"},{"id":1450,"province_city":"\u5949\u8d24\u533a","fid":"1369"},{"id":1451,"province_city":"\u5d07\u660e\u53bf","fid":"1369", "children": [{"id":14511,"province_city":"\u5d07\u660e\u53bf","fid":"1451"}]}]}]}]';
    
        cascader.render({
          elem: $('input[name=areas]')[0],
          multiple: true,
          showAllLevels: true,
          separator: "/", //显示文本的分隔符号(showAllLevels开启时生效) 默认 /
          valueSeparator: ",", //选择值的级联分隔符号 默认 ,
          groupSeparator: "|", //多选时选择值的组分隔符号 默认 |
          props: {
            label: 'province_city',
            value: 'id',
            children: 'children'
          },
          options: JSON.parse(areaTree)
        });
    
        form.on('submit(*)', function(data){
            console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
            return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
        });
    
      });
      </script>
    </html>
    

    demo下载地址:传送门

    展开全文
  • layui时间控件选择

    千次阅读 2017-07-04 11:24:26
    首先需要引入layui的两个文件layui.css和layui.js 在线配置   声明的div标签 格式示例:2017-06-15 10:00:00 格式示例:2017-06-17 10:00:00 调用layui方法 layui.use('laydate',f

    首先需要引入layui的两个文件layui.css和layui.js

    在线配置

      <link rel="stylesheet" href="//res.layui.com/layui/build/css/layui.css" media="all">

    <script src="//res.layui.com/layui/build/layui.js"></script>

    声明的div标签

    	<div class="col-sm-10">
    			      <input id="beginDatetime" class="form-control" v-model="actDetail.beginDatetime" placeholder="开始时间"/>
    			       <span style="color: red">格式示例:2017-06-15 10:00:00</span>
    			    </div>

    <div class="col-sm-10">
    			      <input id="endDatetime" class="form-control" v-model="actDetail.endDatetime" placeholder="结束时间" />
    			      <span style="color: red">格式示例:2017-06-17 10:00:00</span>
    			    </div>
    调用layui方法

    layui.use('laydate',function(){
    	var laydate = layui.laydate;
    	var start = {
    			istime: true,//是否开启时间选择
    			min: laydate.now(-1),//最小日期:昨天
    			format: 'YYYY-MM-DD hh:mm:ss', //格式化时间
    			choose:function(dates){
    				vm.actDetail.beginDatetime = dates; //函数回调,把选中的时间赋值给实体(基于vue)
    				end.min = dates; //最小结束时间
    			}
    	};
    	var end = {
    			istime: true,
    			min:laydate.now(),
    			format:'YYYY-MM-DD hh:mm:ss',
    			choose:function(dates){
    				vm.actDetail.endDatetime = dates;
    			}
    	};
    	document.getElementById('beginDatetime').onclick = function(){
    		start.elem = this;
    	    laydate(start);
    	}
    	document.getElementById('endDatetime').onclick = function(){
    	    end.elem = this;
    	    laydate(end);
    	}
    })



    展开全文
  • static和js是我自己建文件夹 代码实现 查看官方文档 选择左边颜色选择器,再点击查看代码找到你要用部分,复制到jsp页面 jsp调用 ${pageContext.request.contextPath}指当前项目路径 一定要改成自己项目...
  • vue.jslayui时间选择器绑定问题

    千次阅读 2019-05-29 10:44:56
    vue.jslayui的时间选择器绑定问题 后端返回给前端日期对象,用vue实例对象接收,时间选择器的value和vue实例对象双向绑定时回出现这种状况,日期无法被解析: 时间选择器: <input type="text" v-model=...
  • <div class=layui-form-item> <label class=layui-form-label>消息通知 <div class=layui-input-block> <input name=is_notice value=1 type=radio title=通知 checked=>...JS用ajax去后端取回数据: $.get
  • layui-树型选择

    2020-08-24 10:12:02
    layui树型选择器 ...input type="text" name="href" id="tree_cat" lay-verify="required" lay-filter="tree" value="" lay-reqtext="选择默认提示内容" class="layui-input" > // 前端scrip
  • Layui 日期选择控件

    2020-09-29 09:55:53
    和 layer 一样,你可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,请按照你实际需求来选择。 在 layui 模块中使用 下载 layui 后,引入layui.css和layui.js即可。通过layui.use(‘laydate’, ...
  • layui时间选择使用

    万次阅读 2019-05-28 07:59:22
    时间选择器在一定程度上简化了日期输入,而layui作为一款备受欢迎前端框架,时间选择器主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器五种类型的选择方式为基本核心,并且均支持范围...
  • JS位置 ,layui/lay/modules/eleTree.js; CSS位置 ,layui/css/modules/eleTree/eleTree.css; 页面css引用 引用 layui/css/layui.css”和 layui/css/modules/eleTree/eleTree.css ; 页面js引用 引用 layui/layui....
  • Layui 时间日期选择初始化

    千次阅读 2020-01-08 14:37:15
    使用 ...<input name="checkTime" id="checkTime" lay-verify="required" placeholder="请输入检查时间" autocomplete="off">...JS部分 laydate.render({ elem: '#checkTime', //指定元素 ...
  • layui--js控制switch切换

    万次阅读 2018-01-12 18:01:51
    需求:如下所示,当【主键】选择为“T”时,【允许为空】不能选择“T”,且会自动切换为“F”; 当【允许为空】选择为“T”时,判断【主键】是否为空,若为“T”,弹出提示,不予更改; 首先需要在table中添加...
  • JS: 1 layui.use(['laydate'],function{ ...此方式可选择任意范围时间,时间格式可任意修改。 注:如果照片看不清,可以将网页适当放大,以便观看—谢谢。 转载于:https://www.cnblogs.com/...
  • 使用layui的laydate时间控件,选择完毕时间后去执行指定js方法引入laydate对应的input框js指定input框使用laydate控件 引入laydate <!--日历选择插件--> <script src="/static/laydate/laydate.js"><...
  • layui省市区联动选择的实现

    千次阅读 2018-11-12 17:34:41
    首先layui需要引用这两个文件(下面是我路径) &lt;script src="../../common/util/layui/layui.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="../../...
  • 首先要调用layui时间插件必须下载layui.js文件,这个可以在官网去下载(https://www.layui.com/),我这个功能是可以选择当前时间前一天,或者后一小时时间,这个根据具体需求可以修改: 如下图所示: ...
  • js控制选中、取消选中 ,layui实现全选、取消全选 layui版本2.5.x html部分: <form class="layui-form" id="form-checkbox"> // checkbox - 全选框 <input type="checkbox" id="allCheckbox" value=...
  • 效果: ; 实现: layui官网文档写比较详细:https://fly.layui.com/extend/citypicker/ ...这里主要讲一下在第一次使用...script src="/LayuiAdmin/layui/layui_exts/city-picker/city-picker.data.js">...
  • 选择20号后,会自动选择本号js代码: // 周控件 laydate.render({ elem: '#date1', format: "yyyy-MM-dd~yyyy-MM-dd", btns: ['clear', 'now'], trigger: 'click', done: function(value, date, ...
  • 常见不显示问题 1)引用的是layui.all.js 需要改为layui.js 2)form.render() 3)引用的js不再body中而是在head中。
  • LayUI

    2019-10-01 03:31:47
     -layer.css、layer.js 而不是layui.css,layui.js  - layer.css包括其他文件应该放在Scripts/theme/default文件夹下,否则会报错 2、Demo使用 layer.confirm('请选择要处理对象!', { ...
  • Layui的eleTree树式选择器使用

    万次阅读 2018-11-10 14:48:56
    Layui的eleTree树式选择器使用模块eleTree 介绍、下载使用效果 模块eleTree 介绍、下载 地址:https://fly.layui.com/extend/eleTree/ 使用 JS位置 ,layui/lay/modules/eleTree.js; CSS位置 ,layui/css/modules/...
  • layui省市区级联选择实现

    万次阅读 2018-09-11 15:39:58
    在很多场景下,都需要使用到省市区选择器,本文主要分享layui以插件形式实现城市级联选择,并引入高德地图进行输入地址友好提示。 效果如下: 下面贴一下相关实现: 1、省市区级联选择实现,并封装成符合...
  • formSelects-v4.js 基于Layui的select多选

    千次阅读 2019-07-11 12:00:40
    formSelects-v4.js下载地址:https://github.com/hnzzmsf/layui-formSelects formSelects-v4.js 使用文档:... 基于 layui select 多选解决方案。支持:多选、分组、取值&赋值、选择监听、搜索、...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 316
精华内容 126
关键字:

layui的js选择