LayUI中的注意事项

最新推荐文章于 2024-08-24 16:45:33 发布

insomnia_Y

最新推荐文章于 2024-08-24 16:45:33 发布

阅读量738

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/insomnia_Y/article/details/106022772

版权

这篇博客总结了LayUI在导航栏、Table数据表格、多级下拉菜单等方面的应用，包括如何实现半透明效果、从数据库获取下拉选项及解决工具栏事件点击后刷新页面的问题。适合初学者参考。

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

前言

此篇博客针对刚接触LayUI的小白新手，同时也是博主在使用LayUI做了几个前端开发总结出的注意事项和踩过的坑，希望对大家有所帮助，如果有帮助到你，请给博主点个赞哦！

导航栏

在使用LayUI的导航栏时，对，就是下面这个东西：
LayUI导航栏

如果没有引入layui.js而只引用了layui.all.js那么就不会用悬浮在标题上面的动画效果，就是图中标题下面的绿色的下划线。与此同时需要下面添加代码初始化导航栏的动画效果，同时导航栏的二级下拉菜单也依赖这串js代码。如果没有引用也没有二级下拉菜单

<script>
	layui.use('element', function () {
   
    var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
});
</script>

select下拉选项框需要放在layui-form中，添加初始化js代码，否则select的样式无法显示。

<form id="form1" runat="server">

<script>
	layui.use('form', function () {
   
		var form = layui.form;
   		form.render();//刷新界面 所有元素,否则单选框不出来，并且要加上layui-form
	});
</script>

Table数据表格

cols中可以设置数据的显示格式，有一下两种方法：

（1）直接在templet中写

, cols: [[
	{
   
		field: 'Rank', title: 'Rank',
     	templet: function (d) {
   
       		return '<span style="font-size:20px;">' + d.Rank + '</span>'
		}
	}
	, {
   
		field: 'UID', title: 'UID',
	  	templet: function (d) {
   
			return '<a href = "WebForm2.aspx?data=' + d.UID + '" target = "_blank" >' + d.UID + '</a >'
 		}
	}
	, {
    field: 'Name', title: 'Name' }
	, {
    field: 'Team', title: 'Team' }
	, {
   
		field: 'Total_Score', title: 'Total Score',
		templet: function (d) {
   
			return '<span>' + d.Total_Score.toFixed(2) + '</span>'
		}
	}
]]

（2）自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等

, {
   
	field: 'Status', width: 150, title: 'Status',
	templet: '#StatusTpl'
}

StatusTpl中的代码：

<script id="StatusTpl" type="text/html">
	{
   {
   #  if(d.Status === 'Not start'){
    }}
		<span>{
   {
    d.Status }}</span>
	{
   {
   #  } else if(d.Status === 'In progress'){
    }}
		<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm" type="button">{
   {
    d.Status }}</button>
	{
   {
   #  } else if(d.Status === 'Solved'){
   }}
		<button class

最低0.47元/天解锁文章