精华内容
下载资源
问答
  • layui使用class绑定多个日期控件

    千次阅读 2018-08-25 12:34:56
    layui使用class绑定多个日期控件
    展开全文
  • 问题 想做一个动态新增表但功能,但是你会发现原先定义好的时间控件没有效果了,变成了普通的input框,于是就需要重新渲染了 1.页面效果 ...<div id="pay_content" > ...label class="relative...div class="notdata

    问题

    想做一个动态新增表但功能,但是你会发现原先定义好的时间控件没有效果了,变成了普通的input框,于是就需要重新渲染了

    1.页面效果
    在这里插入图片描述

    1.html代码

    <div id="pay_content" >
       <label class="relative block">
            <span class="color-green font-w7" required>缴费详情</span>
            <div class="notdata">
                <div class="layui-col-md6">
                    <span>缴费金额</span>
                </div>
                <div class="layui-col-md3">
                    <span>缴费截止时间</span>
                </div>
                <div class="pay_content">
                    <div class="layui-form-item" pane>
                        <label class="layui-form-label">第1期</label>
                        <div>
                            <div class="layui-col-md4">
                                <input type="text" name="pay_content[price][]" required placeholder="请输入缴费金额"
                                    class="layui-input ">
                            </div>
                            <div class="layui-col-md4">
                                <input type="text" name="pay_content[end_time][]" data-date-input="date" required
                                    placeholder="请选择缴费截止时间" class="layui-input date">
                            </div>
                            <div class="layui-col-md1">
                                <a href="javascript:void(0);" class="layui-btn layui-btn-danger pay_content_delete"
                                    onclick="del_installment(this)">删除</a>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="button" class="layui-btn layui-btn-normal" onclick="add_installment()">新增</button>
            </div>
        </label>
    </div>
    

    2.jq代码

    
    <script>
        form.render()
        $default_html = `
            <div class="layui-form-item" pane>
                <label class="layui-form-label">第1期</label>
                <div>
                    <div class="layui-col-md4">
                        <input type="text" name="pay_content[price][]" required placeholder="请输入缴费金额"
                            class="layui-input ">
                    </div>
                    <div class="layui-col-md4">
                        <input type="text" name="pay_content[end_time][]" data-date-input="date" required
                            placeholder="请选择缴费截止时间" class="layui-input date">
                    </div>
                    <div class="layui-col-md1">
                        <a href="javascript:void(0);" class="layui-btn layui-btn-danger pay_content_delete"
                            οnclick="del_installment(this)">删除</a>
                    </div>
                </div>
            </div>
        `;
        //新增缴费详情
        function add_installment() {
            //追加子元素
            $('.pay_content').append($default_html);
            //遍历渲染时间选择器
            lay('.date').each(function () {
                laydate.render({
                    elem: this, //元素
                });
            });
        }
        //删除缴费详情栏目
        function del_installment(that) {
            console.log(1111)
            console.log($(that).parent().parent().parent().remove());
        }
    </script>
    

    重点

    这个方法我也是找了很久,各种尝试,本来准备动态修改id来解决,但是还是被我找到了这种更方便的方法分享给大家,希望对你们有所帮助

    //遍历渲染时间选择器
     lay('.date').each(function () {
            laydate.render({
                elem: this, //元素
            });
        });
    

    其他

    //遍历某些input数据
    $('.jobs').each(function () {
    	var jobs = $(this).val();//循环获取值
    })
    

    如果您觉得本篇对你有帮助,可以点关注,给个赞,支持一下博主,过程有遇到什么问题也欢迎评论私信,进行交流

    展开全文
  • button type="button" class="layui-btn upload" id="" style="width: 120px;margin-top: 10px"><i class="layui-icon">&#xe67c;</i>上传</button> //上传图片的调用 uploadImg('.upload'...

     

    html:
    <button type="button" class="layui-btn upload" id="" style="width: 120px;margin-top: 10px"><i class="layui-icon">&#xe67c;</i>上传</button>
    
    //上传图片的调用
    uploadImg('.upload','${ctx}/a/file/upload',false) ;
    
    //上传图片方法
    function uploadImg(selectName,url,isMultiple){
            var isTrue = true ;
            if(isMultiple){
                isTrue = isMultiple ;
            }
            uploadImgResume = upload.render({
                elem: selectName
                ,url: url
                ,multiple: isTrue
                ,before: function (){//传参
                    var item = this.item;//当前点击的这个对象,根据这个对象就可以获取当前想要的值,对于是class的选择器很有用
                    this.data = {
                        userId: userId,
                        type: '4',
                        id:item.attr("id")//根据当前对象,获取id
                    }
                }
                ,done: function(res, index, upload){ //上传后的回调,res是后台返回的json数据
                    var item = this.item;
                    if(res.success){
                        item.prev().attr("src",res.body.url);
                        item.attr("rid",res.body.id)
                    }else{
                        layer.alert(res.message) ;
                    }
                }
            });
        }

     

    展开全文
  • layUI

    千次阅读 多人点赞 2018-05-24 14:37:10
    项目中突然使用了layui当时看文档看的比较懵逼,但是自己做了一些例子感觉就没有那么难了 用的都是一些基本的数据操作api上的例子还是比较好的。例如&lt;script&gt;layui.use('table', function(){ var ...

     项目中突然使用了layui当时看文档看的比较懵逼,但是自己做了一些例子感觉就没有那么难了 用的都是一些基本的数据操作

    api上的例子还是比较好的。例如

    <script>
    layui.use('table', function(){
      var table = layui.table;
      
      table.render({
        elem: '#test'
        ,url:'/demo/table/user/'
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
        ,cols: [[
          {field:'id', width:80, title: 'ID', sort: true}
          ,{field:'username', width:80, title: '用户名'}
          ,{field:'sex', width:80, title: '性别', sort: true}
          ,{field:'city', width:80, title: '城市'}
          ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
          ,{field:'experience', title: '积分', sort: true}
          ,{field:'score', title: '评分', sort: true}
          ,{field:'classify', title: '职业'}
          ,{field:'wealth', width:137, title: '财富', sort: true}
        ]]
      });
    });

    </script>

    建一个table给一个id =test 后台返回的数据要和layui接收的数据一样查询出结果后用jsonObject再包裹一下  field里面的字段属性就是你页面table需要展示的数据 , url是你后台接口的路径   基本的数据展示就是这样的 是不是很简单~~~  layui最重要的感觉就是渲染。

    ----------------------------------------------------------------------------------------------------------------------------------

     <p><input type="submit" value="登录">&nbsp<input type="reset"  lay-submit=""   value="重置"  lay-filter="login2"></p>

    <script type="text/javascript">
    layui.use(['form', 'layedit'], function(){
        var form = layui.form
         , layer = layui.layer
         , $ = layui.jquery;
    form.on('submit(login2)', function(data){
    alert("11");
      alert(data);
    });
    });

    </script>

    事件的监听 我感觉和自己写ajax一样  用form.on必须实现use模板

    默认情况下,事件所监听的是全部的form模块元素,但如果你只想监听某一个元素,使用事件过滤器即可。

    如:<select lay-filter="test"></select>

     

    1. form.on('select(test)', function(data){
    2. console.log(data);
    3. });

     

    ----------------------------------------------------------------------------------------------------------------------------------

     

    初始化给你指定表单元素赋值

     

    1. //formTest 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值
    2. form.val("formTest", {
    3. "username": "贤心" // "name": "value"
    4. ,"sex": "女"
    5. ,"auth": 3
    6. ,"check[write]": true
    7. ,"open": false
    8. ,"desc": "我爱layui"
    9. })

     

    -----------------------------------------------------------------------------------------------------------------------------------------------

    后台返回的是Date类型 需要把时间弄到layui时间控件上freemake回显的 ${''?datetime}

     

     

    展开全文
  • , done: function (res, curr, count) { resetform1()//表单重置新增弹框 } 需要添上id
  • blockquote class="layui-elem-quote

    千次阅读 2018-10-12 19:05:47
    引用块、字段集区块、横线等等,这些元素都无需依赖任何模块 引用模块 &...layui-elem-quote layui-quote-nm"&gt;引用区域的文字&lt;/blockquote&gt; 横线 默认分割线 &
  • tablestr += "<a class=\"layui-btn layui-btn-mini layui-btn-primary\" onclick=\"gofenHBody('"+i+"')\">"; tablestr += "删除</a></td>"; tablestr += "</tr>"; $("#fenHBody1").append(tablestr); $("#...
  • layui-btn layui-btn-normal layui-btn-xs">超小型</button> <button class="layui-btn layui-btn-warm layui-btn-sm">小型</button> <button class="layui-btn ...
  • 文章目录1 form使用不当2 layui class="layui-btn"问题 有两种情况,一种是使用form的时候使用不当,一种是使用了layui的问题 1 form使用不当 上面写了个action,底下又去提交 这样的话,会提交两次 2 layui ...
  • 文章目录layui响应式:隐藏与显示官方文档 · 地址:1.1. 转化前:小尺寸,隐藏1.2....1. 隐藏class类名:layui-hide-后缀 2. 显示class类名:layui-show-后缀 官方文档 · 地址: https://www.layui.com/doc
  • layui按钮

    2020-02-28 10:42:24
    按钮类设置:class=“layui-btn” ;不设置其它任何二级类名就是普通按钮 1 主题类 :layui-btn-primary 原始主题。 原始 class=“layui-btn layui-btn-primary” 默认 class=“layui-btn” 百搭 class=“layui-btn ...
  • layui 标识、 layui排序

    2019-01-14 13:26:03
    div class="layui-inline"&gt; &lt;label class="layui-form-label"&gt;楼宇地址:&lt;/label&gt; &lt;div class="layui-input-inline"&gt; &lt;...
  • Layui文件下载

    万次阅读 多人点赞 2019-09-10 09:27:20
    Layui超实用10篇技术解决方案:https://blog.csdn.net/libusi001/article/details/100065911 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...div class="layui-body"> <!-- 内容主体区域 --> <...
  • layui入门

    2019-08-29 11:39:54
    layui入门 先解压下载的压缩包,然后导入文件: 导入一个layui.css代码和layui.js代码: <link rel="stylesheet" href="../layui-v2.5.4/css/layui.css"> <script src="../layui-v2.5.4/layui.js" type=...
  • layui表单提交

    千次阅读 2019-07-04 15:43:52
    layui标准的提交 ...form class="layui-form" action=""> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-f...
  • Layui使用

    千次阅读 2019-05-08 11:44:45
    一.1.layui模块化使用:如果你使用的是layui,那么你直接在官网下载layui框架即可,无需引入Query和layer.js,但需要引入layui.css和layui.js。 调用方式:通过layui.use(‘layer’,callback)加载和初始化layer模块。...
  • layui 表单搜索

    2020-11-10 10:55:45
    form class="layui-form" lay-filter="title" id="title"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">球员位置:&l...
  • layui 前端筛选

    2021-01-06 15:50:10
    form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">计划时间</label> <div class="layui-input-inline"> <input type
  • layui左右布局

    千次阅读 2019-08-13 14:50:45
    左右布局 点击左边右边内容...<div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree site-demo-nav" lay-filter="leftNav"> <...
  • layui禁止编辑

    千次阅读 2019-12-21 15:44:25
    禁止用户编辑 在标签的class属性上添加 layui-disabled就没办法编辑啦 class="layui-disabled
  • layui 上传视频

    千次阅读 2020-07-06 17:02:14
    div class="layui-form-item"> <label class="layui-form-label">上传视频</label> <button type="button" class="layui-btn cover" id="control_video_button">上传视频</button> &...
  • layui表单居中

    万次阅读 2019-11-28 15:53:14
    在外层用text-aglin:center无法居中的问题 <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">选择框</label&g...
  • layui上传

    万次阅读 2017-06-09 13:09:13
    上传模块<div class="yayun-div" > <form class="layui-form layui-form-pane" id="uploadExcelForm" action="" method="post" enctype="multipart/form-data" > <div class="yayun-div" > <in
  • <label class="layui-form-label">支付金额 <div class="layui-input-block"> 付款金额" class="layui-input"> <div class="layui-form-item"> <label class="layui-form-label">付款方式 <div class=...
  • layui多选

    千次阅读 2018-10-12 15:46:56
    效果如下,选择某个选项后,会弹出对应输入框填写数据 前端页面代码 &lt;style&gt; legend { font-size: 12px; font-weight: inherit;...div class="layui-form-item"&gt;...
  • Layui模糊查询

    千次阅读 2019-06-30 23:58:38
    Layui超实用10篇技术解决方案 ... ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 一、模糊查询条件 <form class="layui-form" action=""> ...label class="layui...
  • layui radio默认值

    2020-12-21 18:01:12
    1.后台传值 <input type="text" id="sex" ...div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name
  • Layui之进度条

    千次阅读 2020-07-03 11:10:18
    进度条 准备工作: ...fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>默认风格的进度条</legend> </fieldset> <div class="layui-

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,851
精华内容 9,540
关键字:

layui的class