layui踩坑知识点大全(持续更新)

一、监听layui日期时间变化

layui.use(['table'], function() {
	var table = layui.table;
	laydate = layui.laydate,
	laydate.render({
	    elem: '#date1',
	    type: 'datetime',
	    range: '至',
	    done: function(value, date){ //监听日期被切换
			//触发的函数
	        liuhais();
	    }
	});
});

二、去除layui表头右边的功能键

.layui-table-tool-self {
    display: none;
}  

在这里插入图片描述

三、删除前的提示

layui踩坑知识点大全(持续更新)_第1张图片

layer.confirm('确定要删除吗', function(){
    $.ajax({
        url: "{:url('del')}",
        type: 'post',
        data:{
            id:id
        },
        success:function (data) {
            if (data.code==200){
                layer.msg('删除成功');
                window.location.reload();
            }else{
                layer.msg('删除失败');
            }
        },
        error:function () {
            layer.msg('请求失败');
        }
    })
});

四、增加表格的滚动条宽度

layui踩坑知识点大全(持续更新)_第2张图片

<style>
    .layui-table-tool{
        display: none;
    }
    ::-webkit-scrollbar {
        width: 20px;
        height: 20px;
    }
style>

五、全选删除

layui踩坑知识点大全(持续更新)_第3张图片

现在js中给表格定义id

table.render({
    id:"tables",
    elem: '#dataTable'
    ,url: '{:url()}' //数据接口
    ,page: true //开启分页
    ,skin: 'row'
    ,even: true
    ,limits: [100,200,300]
    ,limit: 100
    ,text: {
        none : '暂无相关数据'
    }
    ,toolbar: '#toolbar'
    ,defaultToolbar: ['filter']
    ,cols: [[ //表头
        {type:'checkbox'}
        ,{field:'zizeng', title: '序号',templet:'#zizeng'}
        ,{field: 'doctor_id', title: '医生'}
        ,{field: 'dl_id', title: '科室'}
        ,{field: 'sitting_time',width:200, title: '时间'}
        ,{field: 'type', title: '号别'}
        ,{field: 'visiting_number', title: '号源总数'}
        ,{field: 'booking_method', title: '预约方式'}
        ,{title: '操作', align:"center", templet: '#buttonTpl'}
    ]],
    done: function() {
        layui.global.addTableTool();
    }

定义一个方法,触发这个事件:

function deleteall() {
    var table = layui.table;
    //将页面全部复选框选中的值拼接到一个数组中
    var checkStatus = table.checkStatus("tables");
    var data = checkStatus.data;
    var res_arr = new Array();

    $.each(data, function(key, val) {
        res_arr.push(val.id);
    });
    console.log(res_arr);
    return false;
}

此时,res_arr这个值就是复选框选中的ID值,有了这些id,对此相应操作即可。

你可能感兴趣的:(Layer)