LayUI使用技巧

1.当在折叠面板上添加了按钮,点击按钮时折叠面板冒泡事件也会触发,随之打开收起。

TIM图片20181205104706.png

解决方法:
在按钮的点击事件中添加如下语句a/b,即可阻止冒泡事件。

//a:谷歌浏览器有效(火狐无效:因为无法识别window.event)
layui.stope(window.event);
//b:都有效
var evt = window.event || arguments.callee.caller.arguments[0]; // 获取event对象
 layui.stope(evt);
···

2.弹出层get方式传递参数:

table.on('tool(role_table)', function(obj){
            var data = obj.data;//选中行数据
            if(obj.event === 'limitRole'){
                layer.open({
                    type: 2,
                    title:'修改角色信息',
                    area: ['1200px', '800px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: "staff_jsqxsz_edit.html?'roleId'="+data.roleId
                });
            }
}

    var searchURL = window.location.search;
    searchURL = searchURL.substring(1,searchURL.length);
    var roleId=searchURL.substring(searchURL.indexOf("=")+1);
    //console.log(roleId);

3.layUI table隐藏某列:

1.隐藏ID列的值

...
, cols: [[ //标题栏
                    {field: 'data_id', title: 'ID', width: 50,style:'display:none;'}

2.隐藏ID列的表头

 $('table.layui-table thead tr th:eq(0)').addClass('layui-hide');

3.js转换数组类型:

staffRoleIds.map(Number)//转换为Int

4.阻止冒泡事件:

event.stopPropagation();
//======================
$('.imgHover').click(function (event) {
    event.stopPropagation();
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,568评论 1 11
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,437评论 0 2
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,086评论 2 59
  • CFA,特许金融师,号称金融第一考,然而现在网络上普遍的观点比如,没有一张好的学历证书,CFA没有用;CFA没有C...
    蓝阿白1017阅读 3,170评论 0 3
  • 关系型数据库 MySQL就是这类数据库的典型代表,它的语句支持对数据的筛选和排序,把多个对象的数据放在同一个表内。...
    饮长刀阅读 976评论 0 0