layui 常见使用及注意

最新推荐文章于 2025-07-19 15:38:08 发布

原创最新推荐文章于 2025-07-19 15:38:08 发布 · 8.7k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#layui 常见使用及注意

bootstrap+dataTables+layui 专栏收录该内容

13 篇文章

订阅专栏

本文深入解析layui框架的使用方法，涵盖菜单设置、table组件操作、form组件应用、上传文件功能及弹出框管理等核心功能。从菜单数据结构到table渲染细节，再到form表单赋值与事件监听，提供全面的技术指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.注意

1.layui-nav-itemed 这个加上就是默认展开菜单

二.菜单

1.菜单数据类型

[
	{
		"name": "审核管理",
		"id":1,//这个每个菜单都要不一样
		"icon": "",//这个字体图标
		"url": "shgl",//菜单路劲
		"children": null// 子集
	},
	{
		"name": "打印寄件管理",
		"icon": "",
		"id":2,
		"url": "dyjj",
		"children": [
			{
				"name": "首页2",
				"icon": "",
				"id":3,
				"url": "dyjj",
				"children": null
			},
			{
				"name": "首页3",
				"icon": "",
				"id":4,
				"url": "dyjj",
				"children": null
			}
		]
	}
]

三.table操作

1.简单的操作

layui.use(['form', 'jquery', 'laydate', 'layer', 'table'], function() {
	var table = layui.table;
	//表格的渲染
	var params={
		status:1,
		pageIndex:1,
		pageSize:9999
	}
	table.render({
		elem: '#hospUserTable',//table的id
		url: diseaseUrl.getSysUserList,//数据接口
		page: true, //开启分页
		height: window.innerHeight/2,//容器高度
		method:'post',
		where: params,
		cols:[[//表头
			 {
				field: 'sortNo',
				title: '序号',
				width: 60,
				align: 'center',
				templet: function(d) {
					return d.LAY_INDEX;
				}
			}, {
				field: 'name',
				title: '姓名',
				width: 100
			},  {
				field: 'sex',
				title: '性别',
				width: 80,
				templet: function(d) {
					if (d.sex == "1") {
						return "男";
					} else if (d.sex == "0") {
						return "女";
					}else{
						return "全部";
					}
				}
			},{
				title: '操作',
				width: 200,
				templet: function(d) {
					var html='';
						html+='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="updateAccount">修改配置</a>';
						if (d.status == '1') {
							html+='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">删除</a>';
						} else if (d.status == '0') {
							html+='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">恢复</a>';
						}
					return html;
				}
			}
		]],
     	done: function(res, curr, count){
		    //如果是异步请求数据方式，res即为你接口返回的信息。
		    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
		    console.log(res);
		    
		    //得到当前页码
		    console.log(curr); 
		    
		    //得到数据总量
		    console.log(count);
	  	}
	});
	
})

2.toolbar - 绑定列工具条

table.render({
	cols: [[{
				title: '操作',
				width: 200,
				templet: function(d) {
					var html='';
						html+='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="updateAccount">修改配置</a>';
						if (d.status == '1') {
							html+='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">删除</a>';
						} else if (d.status == '0') {
							html+='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">恢复</a>';
						}
					return html;
				}
			}
	]]
});
这个可以换成下面这个

table.render({
	cols: [[
		{field:'id', title:'ID', width:100},
		{ title: '操作',width:150, toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
	]]
});
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="updateAccount">修改配置</a>
	<!-- 这里同样支持 laytpl 语法，如： -->
	{{#  if(d.status == '1'){ }}
		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">删除</a>
	{{#  } }}
	{{#  if(d.status == '0'){ }}
		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">恢复</a>
	{{#  } }}
</script>

//这个操作 列表操作
    table.on('tool(hospUserTable)', function(obj){
    	var layEvent = obj.event;
    	var meetingId = obj.data.meetingId;
    	if( layEvent === 'updateAccount') { //查看明细
    		$.ajax({
			    url:diseaseUrl.getSysUserListByUserId,
			    type:'post',
			    data:{
			    	id:obj.data.id
			    },
			    success:function(res){
			    	//操作
		    		
			    }
			})
    	}else if( layEvent === 'delete'){
			//操作
		}
    });

3.固定返回数据格式

{
	"code": 0,//这个必须是0
	"msg": "",
	"count": 1000,//数据总量
	"data": [{}, {}],//数据
    
}

4.基础方法

> table.set(options); //设定全局默认参数。options即各项基础参数
> table.on('event(filter)', callback); //事件监听。event为内置事件名（详见下文），filter为容器lay-filter设定的值
> table.init(filter, options); //filter为容器lay-filter设定的值，options即各项基础参数。例子见：转换静态表格
> table.checkStatus(id); //获取表格选中行（下文会有详细介绍）。id 即为 id 参数对应的值
> table.render(options); //用于表格方法级渲染，核心方法。应该不用再过多解释了，详见：方法级渲染
> table.reload(id, options); //表格重载
> table.resize(id); //重置表格尺寸
> table.exportFile(id, data, type); //导出数据

5.搜索按钮

// 搜索
$('#search').on('click', function(){
	var params = {
	    pageIndex: 1,
	    pageSize: 20
	};
	var name = $('#name').val();
	var account = $('#account').val();
	table.reload('hospUserTable', {
		url: diseaseUrl.getSysUserList
		,where: params
	});
});

6.数据表格table在选项卡tabs中分页条不显示

加个内部样式就好

<style type="text/css">
.layui-table-page {
position:fixed;
}
</style>

7.横向滚动

body .layui-table-box, body .layui-table-view {
	::-webkit-scrollbar {
		height:15px !important;
	}
	::-webkit-scrollbar-thumb{
		background: #f2f2f2 !important;
	}
}
body .layui-table-body {
	overflow-x: auto !important;
}

8.表格偶数行背景颜色

table.render({
	elem: '#tables',
	done: function (res, curr, count) {// 表格渲染完成之后的回调
		var that = this.elem.next();
		res.data.forEach(function (item, index) {
			//console.log(item.empName);item表示每列显示的数据
			if (index%2==0) {
				var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "##f2f2f2");
			} else{
				var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#fff");
			} 
		});
	}
});

9.后端返回的数据格式

按照layui的table格式data必须是数组格式。但如果data是对象的情况下，可以使用parseData。注意这个parseData属性必须是2.4.0版本layui才可以使用

10.单击或是双击

//监听行单击事件
table.on('row(dataTable)', function(obj){
         var data = obj.data;
})
//监听双击事件 双击事件为：rowDouble
table.on('rowDouble(dataTable)', function(obj){
         var data = obj.data;
})

11. table的数据

 var  intTable =  layui.table.cache.dataTable;//最后一个table的id
console.log(intTable,'费用表单')

12.获取选中的值

 var selectData = layui.table.checkStatus('dataTable').data;// dataTable是table的id
console.log(selectData,'选中的数据')

13.layui table异步数据接口不支持跨域，不支持多层数据嵌套的替代办法

使用ajax 请求数据并且获取数据赋值给table

14.table中提示信息（鼠标移上显示）

table.render({
	cols: [[
        {
            field: 'name',
            title: '审核名称',
            align: 'center',
            templet: function(d) {
                var text = "";
                if (d.feedbackContent == '') {
                    text = d.checkName;
                } else {
                    text = "<span style='color:#f00;cursor: pointer;' data-text='" + d.feedbackContent +
                        "' onmouseover='showProStatus(this)' lay-event='proStatus'>" + d.checkName +
                        "<i>!</i></span>";
                }
                return text;
            }
        },
	]]
});

// table 的鼠标移上的效果
function showProStatus(obj) {
    layui.use(['element', 'form', 'jquery', 'laydate', 'layer', 'table'], function() {
        var $ = layui.jquery;
        layer.tips($(obj).attr('data-text'),$(obj), {
            tips: 1,
            time: 1000
        });
    }
}

15.禁用table拖拽列宽

unresize:true,// 默认是false，是可以拖

table.render({
	cols: [[
        {
            field: 'name',
            title: '审核名称',
            align: 'center',
             unresize:true,// 默认是false，是可以拖

        },
	]]
});

四.form操作

1. 解决取消按钮自动刷新

 function cancleFn(event){
     event.stopPropagation();
     event.preventDefault();
 }

2.表单赋值

2.5.5之后有form.val('filter', object);

之前可以

$.fn.extend({
    /*表单赋值 */
    setform: function (jsonValue) {
        var obj = this;
        $.each(jsonValue, function (name, ival) {
            var $input = obj.find("input[name=" + name + "]");
            if ($input.attr("type") == "radio" || $input.attr("type") == "checkbox") {
                $input.each(function () {
                    if (Object.prototype.toString.apply(ival) == '[object Array]') { // 是复选框，并且是数组  
                        for (var i = 0; i < ival.length; i++) {
                            if ($(this).val() == ival[i])
                                $(this).attr("checked", "checked");
                        }
                    } else {
                        if ($(this).val() == ival)
                            $(this).attr("checked", "checked");
                    }
                });
            } else if ($input.attr("type") == "textarea") { // 多行文本框  
                obj.find("[name=" + name + "]").html(ival);
            } else {
                obj.find("[name=" + name + "]").val(ival);
            }
        });
    },
    /*文本赋值 */
    setText: function (jsonValue) {
        var obj = this;
        $.each(jsonValue, function (name, ival) {
            obj.find("span[data-name=" + name + "]").text(ival);
        });
    }
})


var data = { "type1": "1"};
$('#registerCnt').setform(data);
form.render();

select 赋值的时候要在哪后面加form.render();

下拉框绑定回车键事件（form 有enter的事件）

 //绑定搜索事件
    form.on('select(trade_type)', function (data) {
        $("#search").trigger("click");
    });

3.checkbox监听事件

<div class="layui-input-inline" style="width: 300px;">
    <input type="checkbox" name="menuIdss" lay-filter="systemMenu" data-id="1" title="男" checked>
    <input type="checkbox" name="menuIdss" lay-filter="systemMenu"  data-id="2"  title="女">
</div>

var systemMenu = [1];
//权限列表 选择
form.on('checkbox(systemMenu)', function(sys) {
    var elem = sys.elem;
    var newDate = [];
    if (elem.checked == true) {
        systemMenu.push(elem.dataset.id);
    } else {
        for (var i = 0; i < systemMenu.length; i++) {
            if (elem.dataset.id != systemMenu[i]) {
                newDate.push(systemMenu[i]);
            }
        }
        systemMenu = newDate;
    }
    

});

console.log(systemMenu) checkbox的值

4.上传文件

<button name="file" type="button" class="btn btn-Other btn-lg"  id="btnImport" >导入</button>

 layui.use('upload', function() {
            var $ = layui.jquery,
                upload = layui.upload;
            upload.render({
                elem: '#btnImport',
                url: ylzBizID.importExcel(), //改成您自己的上传接口
                accept: "file",
                acceptMime: ".xls,.xlsx",
                exts: "xls|excel|xlsx",
                before: function(obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(); //上传loading
                    $("#formSearch input").val('');
                },
                done: function(res) {
                    if (res.success == true) {
                        layer.msg('导入成功');
                        searchData();
                        layer.closeAll('loading');
                    } else {
                        layer.closeAll('loading');
                    }
                },
                error: function(index, upload) {
                    layer.closeAll('loading'); //关闭loading
                }
            });
        })

参考材料

5.layUI-layDate时间控件点击闪烁问题

//列表时间选择
	layui.use('laydate', function(){
		var laydate = layui.laydate;
		//执行一个laydate实例
		laydate.render({
			 elem: '' //指定元素
			,trigger: 'click' //自动弹出控件的事件，采用click弹出
		});
	});

在绑定时间控件中加入 trigger:‘click’ 即可

选中时间后的事件回调

  laydate.render({
        elem: '#dateRange',
        theme: '#1E9FFF',
        trigger: 'click',
        done: function (value, date) {
            $("#search").trigger("click");
        }
    });

五.弹出框

1.关闭

layer.closeAll();

六.问题

1.控制台报错JSON parse error: Unrecognized token 'pageIndex': was expecting ('true', 'false' or 'null')

这是后端要求返回的数据格式是json

加这个就好contentType: 'application/json',


    table.render({
        elem: '#dataTable',
        url: diseaseUrl.getSysDoctorList,
        page: {
            theme: '#1E9FFF',
        },
        contentType: 'application/json',
        method: 'post',
        request: {
            pageName: 'pageIndex',
            limitName: 'pageSize',
        },
        cols: [
            [ {
                field: 'deptname',
                title: '科室',
            }
        ],
        response: {
            countName: "total"
        }
    });

2.Select2和layui-form冲突问题(会出现2个下拉框)

#deptidList + .layui-unselect.layui-form-select{
    display: none;
}
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">科室</label>
       <div class="layui-input-inline">
            <select id="deptidList" name="deptid"  class="example" style="width:200px">
                <option></option>
            </select>
        </div>
    </div>
</div>

$("#deptidList").select2({
    ajax: {
        url: diseaseUrl.getSysDoctorDeptList,
        dataType: 'json',
        type:'GET',
        delay: 250,
        data: function (params) {
            return {
                deptname: params.term == undefined? "":params.term,
            };
        },
        processResults: function (data) {
            var arr=[],newData = data.data;
            console.log(data,'sshudata')
            if(newData.length>0){
                for(var i=0;i<newData.length;i++){
                    arr.push({"id":newData[i].deptid,"text":newData[i].deptname})
                }
            }
            // 后端返回值改成 select2插件想要的格式
            return {
                results: arr
            };
        },
        cache: true
    }, 
    placeholder:'请选择科室',//默认文字提示
    formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
    formatSelection: function formatRepoSelection(repo){return repo.text;}, // 函数用于呈现当前的选择
    allowClear: true//允许清空
});
$("#deptidList").next().next().remove();