美文网首页
LayUI使用技巧

LayUI使用技巧

作者: 海棠晴yyh | 来源:发表于2018-12-05 10:53 被阅读0次

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();
})

相关文章

  • LayUI使用技巧

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

  • layui 的基本使用介绍

    layui 的基本使用介绍 全局配置 layui.config({dir: '/res/layui/' //lay...

  • LayUI的安装及使用

    LayUI 主要内容 LayUI 的安装及使用 LayUI 的介绍 ​ layui(谐音:类UI) 是一款采用自身...

  • layui第三方插件layui-excel的用法

    layui第三方插件layui-excel的用法 一. layui-excel模块化 想到使用layui-exce...

  • 2018 10 26

    学着使用layui构建页面

  • layui 下拉选择树(多选) + 异步加载

    效果描述: 可以点击,无线下拉,根据用户接口异步加载数据使用: layui/tree.js以前使用layui...

  • layui 框架使用学习

    将 layui 框架整体拖放入项目中; 在需要使用的地方首先引入 layui.css 文件;注意在使用 link ...

  • Layui使用

    1.遇到一个问题,需要动态的生成表头,并且使用分页,后台不用说了,前台layui初始化表格的时候想要,在done的...

  • 初始layui

    开始使用layui //一般直接写在一个js文件中layui.u...

  • Spring Boot + LayUi登陆遇到问题记录

    在使用Spring Boot 和LayUi Admin做项目的时候,因为之前没有用过layUI Admin这个框架...

网友评论

      本文标题:LayUI使用技巧

      本文链接:https://www.haomeiwen.com/subject/ikdicqtx.html