精华内容
下载资源
问答
  • 但是在搜索经验的时候,发现很网友给出的代码有缺失,不适合小白开发 所以,小小整理一番,欢迎指摘 … 操作步骤: 首先 html 设计效果如下: 对应的源码为: <div class="layui-form-item"> <...
    • 首先,官方文档所给出的展示如下:监听 radio单选
    • 但是在搜索经验的时候,发现很多网友给出的代码有缺失,不适合小白开发
    • 所以,小小整理一番,欢迎指摘 …

    操作步骤:

    1. 首先 html 设计效果如下:

      对应的源码为:
     <div class="layui-form-item">
            <label class="layui-form-label">主题类型:</label>
                <div class="layui-input-inline" style="width: 660px">
                    <input type="radio" name="level" lay-filter="levelM" value="1" title="一级分类" {$theme.level=="1"?"checked":""}>
                    <input type="radio" name="level" lay-filter="levelM" value="2" title="二级分类" {$theme.level=="2"?"checked":""}>
                    <input type="radio" name="level" lay-filter="levelM" value="3" title="三级分类" {$theme.level=="3"?"checked":""}>
                </div>
        </div>
    

    【注】:

     注意上述源码总的 "lay-filter" 属性;
     此处需要填写一个用于区分监听事件的名称,我定为:"levelM"
    
     因为鄙人在进行 ThinkPHP 框架代码开发,所以其种牵扯到了部分内置代码,可自行忽略
    
    1. 然后就是 JavaScript 代码的编写,完整的代码如下:
    	    layui.use(['form'], function () {
            var upload = layui.upload;
            var form = layui.form;
            //此处即为 radio 的监听事件
            form.on('radio(levelM)', function(data){
            	console.log(data.elem); //得到radio原始DOM对象
      			console.log(data.value); //被点击的radio的value值
                var level = data.value;//被点击的radio的value值
    			//TODO 下面是我具体业务的处理代码,可忽略 ...
                $(".sel-parent-msg").hide();
                $(".sel-parent-msg-"+level).show();
           		 });
            });
    
    • 好像,大概,也许,差不多就是这样的了 …
    展开全文
  • 之前我试过用方案1 来实现该功能,发现这方案,代码量极大,最困难的地方就是在中加样式,特别是table中有很种控件时,样式的添加非常麻烦 ,可参见点击打开链接 后选择使用方案2 ,但是遇到了,添加的对象无法...
  • layui多个按钮绑定 文件上传事件

    千次阅读 2021-02-18 14:35:25
    正常来说吧 一般上传的接口 应该都是同一 但是可能有三上传按钮 还是有这种业务的存在的 这时候 我们绑定上传控件 其实会有一些小伙伴 不会注意到 layui人家是支持 根据类名实例化上传对象的 还是闲着没事...

    正常来说吧  一般上传的接口 应该都是同一个   但是可能有三个上传按钮  还是有这种业务的存在的

    这个时候 我们绑定上传控件

    其实会有一些小伙伴 不会注意到  layui人家是支持  根据类名实例化上传对象的    还是闲着没事多看看文档比较好的

    <button class="layui-btn layui-btn-radius layui-btn-primary" data-id="picture" id="picture" data-type="picture">上传图片</button>
        <button class="layui-btn layui-btn-radius layui-btn-normal" id="video" data-id="video" data-type="video">上传视频</button>
        <button class="layui-btn layui-btn-radius layui-btn-warm" id="music" data-id="music" data-type="music">上传音乐</button>

    根据对类名的绑定 就可以实现一次性对三个按钮的绑定了

    其实this.item  就是当前点击触发的那个按钮元素    这次可以进行 对上传完成之后的 元素进行操作   比如: 上传视频  根据元素的设置的自定义属性判断 来追加到 视频的预览的容器中

    layui.use(['jquery', 'upload'], function() {
                var $ = layui.jquery, upload = layui.upload;
                upload.render({
                    elem: '.layui-btn'
                    , url: ''
                    , done: function (res, index, upload) { //上传后的回调
    
                    },
                    choose: function() {
                        var el = this.item;
                        console.log($(el).data().type)
                    }
                    ,accept: 'file' //允许上传的文件类型
                    ,size: 50 * 1024 //最大允许上传的文件大小
                })
            })

    这下就很简单了  

    关注我 持续更新前端知识  

    新的一年新的开始  加油

    展开全文
  • 例子:一学院中的专业信息要包含着专业名称和专业编号。 效果图如下: 思路:在多层表头写出后,各个的表头位置都是没有在指定位置上,需要依靠colspan和rowspan这参数把各个表头定义好位置。 (1)...

    例子:一个学院中的专业信息要包含着专业名称和专业编号。 效果图如下:
    在这里插入图片描述
    在这里插入图片描述
    思路:在多层表头写出后,各个的表头位置都是没有在指定位置上,需要依靠colspan和rowspan这个两个参数把各个表头定义好位置。
    (1)rowspan:行数 ,可以看到图中的序号,学院名称和操作是占两行的,所以在这三行上写上rowspan:2。专业名称和专业编号是第二层也没给上行占2行(rowspan:2),所以两个表头自然在还在第二层占1行
    (2)colspan:列数,在专业信息是要包裹下面两个名称和编号的所以加上colspan:2,就可以把两列包含。

    总结:不需要包含的就扩行,要包含列的就扩列。

    展开全文
  • 目标:layui 实现点击按钮添加一行解决方案:方案1、table 是用转换静态表格的方式创建的,写一button,每次点击按钮,就添加一 标签;方案2、table 是用方法渲染的方式创建的,写一button,每次点击按钮,加载...
    • 目标:layui 实现点击按钮添加一行
    • 解决方案:
    • 方案1、table 是用转换静态表格的方式创建的,写一个button,每次点击按钮,就添加一个<tr> 标签;
    • 方案2、table 是用方法渲染的方式创建的,写一个button,每次点击按钮,加载数据时添加一个Object;

    之前我试过用方案1 来实现该功能,发现这个方案,代码量极大,最困难的地方就是在<tr>中加样式,特别是table中有很多种控件时,样式的添加非常麻烦 ,可参见点击打开链接

    后选择使用方案2 ,但是遇到了,添加的对象无法通过加载url来渲染t

    原来的数据表格使用方法渲染的方法传的值,其数据是从url中取出,
    发现layui的url传值方式,数据格式必须为:
    {"code":0,"msg":"","count":4,"data":[{"colName":"ID","colNo":0,"collator":"","comments":"","dbId":1,"defVal":"","deleted":"","dispersion":0,"domainId":0,"histogram":"","isHide":"","isSerial":"F","isVirtual":"","maxVal":"","minVal":"","notNull":"T","repetRate":0,"scale":-1,"serialId":0,"tableId":1048586,"timestampT":" ","typeName":"INTEGER","varying":"F","vcolNo":0,"vertNo":0}]}

    而我在reload方法中存放的data数据格式为
    [{"colName":"ID1","colNo":0,"collator":"","comments":"","dbId":1,"defVal":"","deleted":"","dispersion":0,"domainId":0,"histogram":"","isHide":"","isSerial":"F","isVirtual":"","maxVal":"","minVal":"","notNull":"T","repetRate":0,"scale":-1,"serialId":0,"tableId":1048586,"timestampT":" ","typeName":"INTEGER","varying":"F","vcolNo":0,"vertNo":0}]


    因此,解决方案:
    1、将新增的data格式修改为url返回的格式,失败;
    2、将url的返回值,以data的array格式返回,并作为变量传给data;成功。
    全部方法如下:
    首先:用ajax请求将数据取出存于变量,将变量赋值给table的data
    var tableData=new Array(); // 用于存放表格数据
    $.ajax({
              url: "${ctp}/TableOperate/GetColsInfo?tabId=1048586&dbId=1"
              ,type:"get"
              ,async:false
              ,dataType:"json"
              , success: function(result){
                  tableData=result;
              console.log(result);
              }
         });
    table.render({
             elem: '#baseInfo'
              ,data:tableData
              ,cols: [[
              {title : '序号',type:'numbers',Width: 20}
                /*  ,{field:'tableId'  , title:'tableId' }
                 ,{field:'dbId'     , title:'dbId'    } */
                 ,{field:'colNo'    , title:'colNo'   , sort: true}
                 ,{field:'domainId' , title:'domainId', minWidth: 120, templet: '#switchTpl', unresize: true }
                 ,{field:'colName'  , title:'colName' , minWidth: 120, sort: true           , edit: 'text'}
                 ,{field:'typeName' , title:'typeName', minWidth: 120, sort: true   ,templet: '#selectTpl'}
                 ,{field:'scale'    , title:'scale'   , minWidth: 80,  edit: 'text'}
                 ,{field:'notNull'  , title:'notNull' , minWidth: 100, templet: '#switchNullTpl', unresize: true}
                   ]]
              ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
               layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
               ,curr: 1 //设定初始在第 1 页
               ,groups: 1 //只显示 1 个连续页码
               ,first: false //不显示首页
               ,last: false //不显示尾页
             }
              , done: function(res, curr, count){
                   }
    
           });


    最后,调用按钮的点击方法
    //点击加号按钮时,新添一行
         $("#addTable").click(function(){
              var oldData =  table.cache["baseInfo"];
              var data1={"colName":"ID2","colNo":0,"collator":"","comments":"","dbId":1,"defVal":"","deleted":"","dispersion":0,"domainId":0,"histogram":"","isHide":"","isSerial":"F","isVirtual":"","maxVal":"","minVal":"","notNull":"T","repetRate":0,"scale":-1,"serialId":0,"tableId":1048586,"timestampT":" ","typeName":"INTEGER","varying":"F","vcolNo":0,"vertNo":0};
              oldData.push(data1);
              table.reload('baseInfo',{
                  data : oldData
              });
         });
    
    效果如图所示:




    展开全文
  • button class="layui-btn layui-btn-normal"id="add" οnclick="clickme()">新增</button> </div> <div class="layui-row " id='shezhi'style="display: none;" > <la
  • 效果图: ... 2、选择好将要上传的文件,文件名称显示在...4、还可以上传多个文件。 效果图上完了,就开始代码咯!   //layUI代码 &lt;div class="layui-upload"&gt; &lt;span...
  • 今天要写的是layui表单审核及代码实现 我对layui 真是又爱又恨 学不完的layui 首先明确自己的功能需求,我的后台管理主要是把审核修改状态,根据这需求只需要些一 修改状态的代码。 其余的就是layui实现功能了。...
  • layui多图上传实现删除功能

    万次阅读 热门讨论 2018-04-09 14:34:03
    在使用layui图上传时发现没有删除功能在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手下面附上代码HTML:&lt;div class="layui-upload"&gt;  &lt;button type=&...
  • layui form 提交按钮触发两次 今天测试项目的时候出现了一很诡异的BUG,每次点提交按钮凑会触发两次提交按钮, 导致每次创建记录的时候都创建双份的,查了半天什么也没发现。 最后上网查才发现是引用了两次layui...
  • 目标:layui 实现点击按钮添加一行解决方案:方案1、table 是用转换静态表格的方式创建的,写一button,每次点击按钮,就添加一<tr> 标签;方案2、table 是用方法渲染的方式创建的,写一button,每次点击...
  • Layui-按钮

    2021-09-28 09:57:31
    今天介绍一下layui里的按钮,通过框架中定义好的各种按钮类进行装饰...接着介绍圆角按钮,该按钮类只有一,将四角变成90度的圆弧 下面以图片展示效果 HTML代码 在页面上的效果 接着介绍按钮图标,按钮..
  • layui表单中的按钮会自动提交,这是一很麻烦的事情。 这几天项目中次用到表单按钮,仔细研究了下,找到了解决方法: 1、如果不需要放在表单中的按钮,最好不要放在表单中,不在layui的form中的按钮就不会进行...
  • 解决layui表单中按钮自动提交的问题

    万次阅读 热门讨论 2018-07-09 13:39:26
    layui表单中的按钮会自动提交,这是一很麻烦的事情。 这几天项目中次用到表单按钮,仔细研究了下,找到了解决办法: 1、如果不需要放在表单中的按钮,最好不要放在表单中,不在layui的form中的按钮就不会进行...
  • 如何让表格的工具按钮列显示更的时候也能点击触发table的事件 layUI列表中,操作栏按钮过多时会自动隐藏,点击弹出隐藏按钮后,按钮本身绑定得监听事件失效.(原文链接) 效果图: 解决思路可点击原文连接查看,...
  • layui switch开关按钮

    2019-10-06 23:51:51
    <input type="checkbox" name="switch" id="" lay-skin="switch" lay-filter="sfzs" lay-text="是|否"> 属性:checked ——默认开启 监听: form.on('switch(sfzs)',function(data){ ...
  • 1、在layer下新建文件夹和css 文件:css内容:body .layui-ext-yourskin .layui-layer-btn0{border-color: #55ff83;...}HTML内容:Title一标准的按钮layui.use(['form','layer','jquery'], function(...
  • Layui动画、按钮、表单  在实用价值的前提之下,我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中,发挥着重要的作用。layui 的动画全部采用 CSS3,因此不支持ie8和部分不支持ie9(即ie8/9无...
  • 最近在功能时遇到一个问题,要给项目中每一个产品添加详细的(pdf,docx,xlsx,doc,xls)资料。... layui的文件上传模块都是在页面加载的时候绑定到一个页面元素上,即不可能为上面多个按钮都绑定一个独立的...
  • layui单选按钮

    千次阅读 2018-09-05 10:41:21
    其次,单选按钮和复选框都是表单元素,所以,在父层要给form或者一类(layui-form), 最后,想要单选按钮或者复选框生效就要在js中渲染一次表单 layui.use('form', function(){  var...
  • var upload = layui.upload; $('.importCase').each(function(){ var btn = $(this); //点击按钮对象 upload.render({ elem: this, url: 'url', accept: 'file', //普通文件 data:{...
  • 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 上传控件非自动上传只能实现一个或的多个图片同时在一个上传控件中实现,并传回到controller处理上传结果 若需要多个上传控件上传图片,提交时再分别获取图片信息如何处理呢? ---经过测试可以采用ajax提交...
  • 可以有多个,三两个还好,如果操作的按钮过多的时候就不美观了,这时候我们就想把一下按钮添加到一个按钮列表中,在正常的情况下就隐藏起来,点击的时候弹出这个按钮列表, 如: 我们想要实现这种效果 当我们点击更...
  • layui一个页面使用多个文件上传按钮

    千次阅读 2020-02-18 13:39:30
    经过思考,其实没有必要为每个按钮实现一个文件上传功能,因为只要能保证:点击不同路径的上传按钮时,能够更新传入实例的路径id即可(即data参数)。 所以这里我的思路是: 在页面创建一个隐藏的button,为...
  • Layui按钮

    2021-02-11 14:46:42
      向任意HTML元素添加 “layui-btn” 类,即可建立一基础按钮,通过追加格式为layui-btn-{type}的class来定义其它按钮风格,内置的按钮class可以进行任意组合,从而形成更按钮风格。   虽然可以将任意的...
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一适合你的列表创建一表格设定内容居中、居左、...
  • Layui中使用Js代码对两个单选按钮之间的禁用与启用 需求是这样的: ... 当点击配置禁忌时,严重等级最后一个按钮禁用,并...lay-filter=“beshared” 两个按钮都要加。 严重等级哪里每个按钮都需要加上ID //结果标识

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,715
精华内容 1,486
关键字:

layui多个按钮实现