在layui layer 弹出层中加载 layui table

最新推荐文章于 2025-09-14 16:06:08 发布

原创

最新推荐文章于 2025-09-14 16:06:08 发布 · 5.8k 阅读

2 ·

CC 4.0 BY-SA版权

该博客介绍如何在layui的layer弹出层中加载并显示layui的表格组件。当点击‘属性管理’按钮时，会打开一个弹窗，其中包含一个表格，列出了用户名和文本型数据，并提供了删除操作。此外，弹窗还支持点击‘新增属性’按钮来打开另一个弹层进行新增操作。

<button data-method="setTop" data-type="auto" class="layui-btn layui-btn-normal proMent">属性管理</button>

//    属性管理开始
    layui.use(['layer','table'], function(){
        var layer = layui.layer;
        var table = layui.table; //表格

    $(".proMent").click(function(){

        layer.open({
            type: 1, //此处以iframe举例
            title: '管理属性',
            area: ['400px', '600px'],
            shade: 0,
            offset: [ //为了演示，随机坐标
                $(window).height()-$(window).height()/2-400,
                $(window).width()-$(window).width()/2-200
            ] ,
            content: $("#firstLayer"),
            btn: ['新增属性', '确定'], //只是为了演示
            success:function(layero){
                //属性管理 第一个table弹窗开始
                table.render({
                    elem: '#demo'
                    ,height: '600px'
                    ,url: '/demo/table/user' //数据接口
                    ,title: '用户表'
                    ,cols: [[ //表头