layui一些业务可能用的到到功能(?)

发布于 2020-03-27  1.42k 次阅读


1:layer.open父窗口获取子窗口到信息

获取修改,获取子窗口到元素对象
let body = layer.getChildFrame('body', index);
var iframeWin = layero.find('iframe')[0].contentWindow;
body.find('#id').val('xx'); 这里id为子窗口到id

2:动态删除table某列

首先要定义table和form

var table = layui.table;
var form = layui.form;
table.render({
    elem: '#tableId'
    , url: '接口url' //模拟接口
    , cols: [[
        {
            field: 'price', title: '实际金额', sort: true, minwidth: 150, templet: function (d) {
                return (d.price / 100).toFixed(2)+'元'
            }
        }
        , {field: 'count', title: '订单数量', sort: true, minwidth: 150}
        , {field: 'username', title: '用户账号', sort: true, minwidth: 150}
        , {field: 'nickname', title: '用户别名', sort: true, minwidth: 150}
        , {field: 'date', title: '时间', sort: true, minwidth: 150}

    ]]
    , page: true
    , limit: 30
    , height: 'full-220'
    , text: {
        none: '暂无相关数据' 
    }, done: function (d) {
        let type = d.user_type;
        if (type) {
            $("[data-field='username']").remove();
            $("[data-field='nickname']").remove();
        }

    }
});
因为某些原因总后台和用户后台是公用一个后台(做了权限隔离),如果是root权限用户登录应该是观看到所有的用户信息,如果是普通用户登录则让用户观看指定的列(不可能用户还要看自己的账号吧)

3:开关功能选中的用户禁用/启用

之前碰到个蛋疼的需求,table列表需要用layui的开关(switch)来控制用户的启用禁用于是乎有了下面的代码

//定义开关模板
var statusTpl = function (d) { // 参数d是当前行数据
    let isCheck = '';
    if (d.status == 1) {
        isCheck = 'checked';
    }
    return `<input type="checkbox" lay-filter="LAY-STATUS" lay-skin="switch" lay-text="启用|禁用" ${isCheck}>`;
};

var tableData = '';
//用户管理
table.render({
    elem: '#tableId'
    , url: '接口url' //模拟接口
    , cols: [[
         {field: 'name', title: '商品名', width: 300, sort: true}
        ,{field: 'status', title: '状态', sort: true, templet:       statusTpl}
        , {title: '操作', width: 280, align: 'center', fixed: 'right', toolbar: '#table-member-oper'}
    ]]
    , page: true
    , limit: 30
    , height: 'full-220'
    , text: {
        none: '暂无相关数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
    }, done: function () {
        tableData = table.cache['tableId']; //从缓存里面拿到table数据
    }
});

//监听开关点击事件
form.on('switch(LAY-STATUS)', function (data) {
    let status = Number(this.checked);
    //获取所需属性值
    var index = data.othis.parents('tr').attr("data-index");
    var name = tableData[index].name;
    //获取id值
    layui.admin.ajax({
        url: '接口url', data: {status: status, name: name}
, success: function f() {
            table.reload('tableId', {status: status});//刷新表格数据
        }
    });
});

一个逐渐被时间遗忘掉的人