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

三、删除前的提示

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('请求失败');
        }
    })
});

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

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

五、全选删除

现在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，对此相应操作即可。

六、Layui通过判断php变量实现按钮是否隐藏

实现效果

实现过程

通过{ {d.id}}能够把每个数据的id都输入出来：

但是在和php模板标签一起使用的话就会报错：

最后换了这种写法就可以实现：

<script type="text/html" id="barDemo">
    {
     
     {
     
     #  if(d.is_index=='未启用'){
     
      }}
    <button class="layui-btn layui-btn-xs layui-btn-normal" hisi-data="{width: '40%', height: '50%'}" onclick="return enable({
     
     {d.id}},1)">启用</button>
    {
     
     {
     
     # }if(d.is_index=='启用'){
     
      }}
    <button class="layui-btn layui-btn-xs layui-btn-normal" hisi-data="{width: '40%', height: '50%'}" onclick="return enable({
     
     {d.id}},2)">不启用</button>
    {
     
     {
     
     #  }}}
    <a href="{:url('cancel')}?id={
     
     {d.id}}" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</script>

七、选中一整行

控制选中样式：

.layui-table-click{
    
    background: #3c9;color: black;}

table.on('row(dataTable1)', function (obj) {
    
    
    tableRowData = obj.data;
    //方法一：选中后，无法取消
    obj.tr.addClass('layui-table-click');
    obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
    //方法二：选中后，可以取消
    obj.tr.addClass('layui-table-click').removeClass('layui-table-click');
    obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
})

八、监听表格按钮选择的整行数据变化

其中，dataTable为elem: '#dataTable'

    <script type="text/html" title="操作按钮模板" id="buttonTpl">
        <button class="layui-btn layui-btn-xs" lay-event="appoint" value="{
    
    {d.timeslot}}">预约</button>
    </script>
    <scritp>
    	//预约
       table.on('tool(dataTable)', function(obj){
    
    
           console.log(obj);
           if (obj.event=="appoint"){
    
    
              
           }
       });
    </script>

九、关闭弹窗并刷新父页面

var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name
parent.layer.close(index);		//关闭窗口
window.parent.location.reload();

十、监听下拉框的变化

form表单中需要加class="layui-form"，select中需要加lay-filter="all"：

<form action="{:url('')}" id="hisi-table-search" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">选择科室</label>
                <div class="layui-input-inline" id="cont">
                    <select name="department" id="department" lay-filter="all">
                        <option value="0">请选择</option>
                        {
    
    foreach $departInfo as $k=>$v}
                        <option value="{
      
      $v.section_id}">{
    
    $v.section_name}</option>
                        {
    
    /foreach}
                    </select>
                </div>
            </div>
</form>            

layui.use(['jquery','layer','table', 'form','laydate'],function(){
    
    
    var form = layui.form;
	form.on('select(all)',function(data){
    
    
		
	}
});

十一、日期选择框

<input type="text" id="elemDate" class="layui-input">

layui.use(['jquery','layer','table', 'form','laydate'],function(){
    
    
            var $ = layui.jquery;
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;
            laydate.render({
    
    
                elem:"#elemDate"
            })
});

十二、获取多个相同name所选中的a标签的值

其中a标签是循环出来的，class的名字都是一样的：

<a class="_order" onclick="fun(this)" value="{$v.timeslot}"></a>

function fun(val){
    
    
   //获取时间段
   var timeslot = $(val).attr("value");  
}

如果是用button按钮，直接使用fun(this.value)就可以获取到点击的那个button按钮的值。

十三、弹出后并关闭子窗口

parent.layui.table.reload('dataTable2');
layer.alert(data.msg,function () {
    
    
    var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name
    parent.layer.close(index);		//关闭窗口
});

十四、自动展开搜索框

把<div class="layui-form hisi-search hide">改为：

<div class="layui-form hisi-search show">

即可。

十五、在框架中去除公共样式部分

原先的：

改之后的：

十六、两个时间段的筛选

html中：

<form action="{:url('order_index')}" method="get" id="hisi-table-search" class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">日期选择</label>
		<div class="layui-input-inline">
			<input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
		</div>
	</div>
</form>

js中：

layui.use(['jquery','layer','table', 'form','laydate'], function() {
    
    
	var table = layui.table;
	var $ = layui.jquery;
	var form = layui.form;
	var laydate = layui.laydate;
	//排班日期时间选择器
	laydate.render({
    
    
		elem: '#date1',
		type: 'datetime',
		range: '至',
		done: function(value, date){
    
     //监听日期被切换
			fun(value);
		}
	});
});

十七、穿梭框

其中，$insepectInfo值为二维数组，必须是json后的并包含title和value下标。$insepects的值为value所对应的ID号，格式为[1,2,3]

transfer.render({
    
    
    elem: '#test4'
    ,data: {
    
    :$insepectInfo}
    ,title: ['检查方式', '选中方式']
    ,id: 'insepects' //定义唯一索引
    ,showSearch: true
    ,value: {
    
    :$insepects}
});

<div class="layui-inline">
    <label class="layui-form-label">检查方式</label>
    <div class="layui-input-inline">
        <div id="test3" class="demo-transfer"></div>
    </div>
</div>

获取右侧选中的值，其中insepects为ransfer.render的唯一ID值：

var getData = transfer.getData('insepects');