在layui layer 弹出层中加载 layui table

//    属性管理开始
    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: [[ //表头
                        {field: 'username', title: '地址', width:80}
                        ,{field: 'experience', title: '文本型', width: 90}
                        ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
                    ]]
                });

                //监听行工具事件
                table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
                    var data = obj.data //获得当前行数据
                        ,layEvent = obj.event; //获得 lay-event 对应的值
                    if(layEvent === 'del'){
                        layer.confirm('真的删除行么', function(index){
                            obj.del(); //删除对应行(tr)的DOM结构
                            layer.close(index);
                            //向服务端发送删除指令
                        });
                    }
                });
                //属性管理 第一个table弹窗结束
            },
            yes: function(){
                //弹出新增属性弹框开始
                parent.layer.open({
                    title: '新增属性',
                    shade: 0,
                    area: ['400px', '200px'],
                    offset: [ //为了演示,随机坐标
                        $(window).height()-$(window).height()/2-120,
                        $(window).width()-$(window).width()/2-200
                    ] ,
                    btn: ['取消', '确定'], //只是为了演示
                    content: $("#firstLayer1"),
                    zIndex: layer.zIndex, //重点1
                });
                //   弹出新增属性弹框结束
            },
            btn2: function(){
                layer.closeAll();
            },
        });


    })

        //    属性管理结束
});

你可能感兴趣的:(前端框架,插件)