layui 知识点1

1.layui监听 和 onclick事件

        $(document).on('click','.dianz',function(e){
            var id=e.currentTarget.dataset.index
            $.ajax({
                url: '/home/givetup',
                type: 'post',
                data: {
                    "id":id,
                },
                beforeSend: function () {
                    loading = layer.load();
                }, success: function (res) {
                    console.log(res)
                    layer.msg(res.msg, {time: 2000}, function () {
                        if (res.success) {
                            var idd='#'+id
                            $(idd).html(res.data)
                        }
                    })
                }, complete: function () {
                    layer.close(loading);
                }
            })
        })

 2.layui工具栏根据状态动态显示

<script type="text/html" id="structoption1">//此处id为layui中 toolbar: '#structoption1'（是表单中的工具条）

  {{# if(d.level==1){ }}//此处的level为数据库中字段，d随便起的

  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteonesub">删除</a>

  <a class="layui-btn layui-btn-xs" lay-event="addtwosub">添加二级科目</a>

  <a class="layui-btn layui-btn-xs" lay-event="updateDepart">修改科目</a>

  {{# } }} {{# if(d.level==2){ }}

  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deletetwosub">删除</a>

  <a class="layui-btn layui-btn-xs" lay-event="updateDepart">修改科目</a>

  {{# } }}

 </script>

https://www.layui.com/demo/layer.htm

https://www.layui.com/doc/modules/layer.html#use

3.三元

<script type="text/html" template>
  <select name="cartype" id="cartype" >
    <option value="1" {{ d.params.cartype==1?'selected':''}}>1</option>
    <option value="2" {{ d.params.cartype==2?'selected':''}}>1</option>
    <option value="3" {{ d.params.cartype==3?'selected':''}}>1</option>
    <option value="4" {{ d.params.cartype==4?'selected':''}}>1</option>
  </select>
</script>

4.layui table表格字段过长，展示不完整时，鼠标放到上面展示完整信息

function tdTitle(){
    $('th').each(function(index,element){
        $(element).attr('title',$(element).text());
    });
    $('td').each(function(index,element){
        $(element).attr('title',$(element).text());
    });
};

table.render({
  cols:  [[ //标题栏
    {checkbox: true}
    ,{field: 'id', title: 'ID', width: 80}
    ,{field: 'username', title: '用户名', width: 120}
  ]]
  ,done:function(res){
        tdTitle();
    }
});

5.checkbox监听有两个

监听checkbox复选

form.on('checkbox(filter)', function(data){}）

6.监听switch开关

form.on('switch(filter)', function(data){}）

7. layui与JQuery冲突的解决方法

这是由于在使用 layer 之类的模块时，它会首先判断你的页面是否已经引入了JQuery，如果没有，则加载内部的jQuery模块，如果有，则不会加载。

根据layui官网的说法，可以想到的解决方案就是让layui加载其自身携带的jquery即可，无需去判断我们的程序是否引入了JQuery。因此我们需要改动layui.js的代码。
找到语句：

 e="string"==typeof e?[e]:e,window.jQuery&&jQuery.fn.on&&(y.each(e,function(t,o){"jquery"===o&&e.splice(t,1)}),layui.jquery=layui.$=jQuery);

将其改下面语句并保存： 

 e="string"==typeof e?[e]:e,window.jQuery;

8.layui中的table checkbox 默认选中设置

{"name":"北京市","areaType":"省/直辖市","id":"110000","LAY_CHECKED":true}
第二种
 {"name":"北京市","areaType":"省/直辖市","id":"110000","checked":true}

9.layui实现鼠标移动到单元格上显示数据的方法

{
field : 'operNm',
//title是纯文本 
title : '<span title="用户姓名">用户姓名</span>',
width : 150,
align : 'center',
//下面的是从数据库里取出来的数据 
templet:'<div><span title="{{d.year}}">{{d.year}}</span></div>'
  
//判空
/*templet:'<div><span title="{{# if(d.operNm!=undefined){ }}{{d.operNm}}{{# }}}">
{{# if(d.operNm!=undefined){ }}{{d.operNm}}{{# }}}</span></div>'*/
},

table.render({
  cols:  [[ 
    {checkbox: true} //多选框
    ,{field: 'id', title: 'ID'}
    ,{field: 'name', title: '名字'}
  ]]
  ,done:function(res, curr, count){
        tabTitle();//调用方法
    }
});
function tabTitle(){
    $('th').each(function(index,element){
        $(element).attr('title',$(element).text());
    });
    $('td').each(function(index,element){
        $(element).attr('title',$(element).text());
    });
};

10.iframe中获取src的参数

var url = window.frames.location.href; 

推荐使用Layui镜像站：https://www.layui.sitehttps://www.layui.site/

Layer:layer 弹出层组件 - jQuery 弹出层插件https://www.layui.site/layer/index.htm

Mobile:layer 移动端弹层界面组件https://www.layui.site/layer/mobile/index.htm

Layui文档：Layui 开发使用文档 - 入门指南https://www.layui.site/doc/index.htm

Layui示例：在线示例 - Layuihttps://www.layui.site/demo/index.htm

Layer文档：layer弹层组件开发文档 - Layuihttps://www.layui.site/doc/modules/layer.html

layui文档镜像网站：www.layuis.comhttp://www.layuis.com/
社区交流网站： fly.layuis.comhttp://fly.layuis.com/