首先，官方文档所给出的展示如下：监听 radio单选
但是在搜索经验的时候，发现很多网友给出的代码有缺失，不适合小白开发
所以，小小整理一番，欢迎指摘 …
 
操作步骤：
 
首先 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 框架代码开发，所以其种牵扯到了部分内置代码，可自行忽略
 
然后就是 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();
       		 });
        });
 
好像，大概，也许，差不多就是这样的了 …

 
正常来说吧  一般上传的接口 应该都是同一个   但是可能有三个上传按钮  还是有这种业务的存在的
 
这个时候 我们绑定上传控件
 
其实会有一些小伙伴 不会注意到  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）rowspan：行数 ，可以看到图中的序号，学院名称和操作是占两行的，所以在这三行上写上rowspan：2。专业名称和专业编号是第二层也没给上行占2行（rowspan：2），所以两个表头自然在还在第二层占1行
 （2）colspan：列数，在专业信息是要包裹下面两个名称和编号的所以加上colspan：2，就可以把两列包含。
 
总结：不需要包含的就扩行，要包含列的就扩列。

目标：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
          });
     });
 

 效果如图所示：