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="layui-btn layui-btn-sm layui-btn-radius" type="button">  {{ d.Status }}  </button>
{{# } }}
</script>
- 表格的done函数，是表格数据加载完成后执行的函数，可以用它来修改表格的样式等
, done: function (res, curr, count) {
$('th').css({ 'background-color': '#5b9bd5', 'color': '#fff', 'font-size': '20px', 'height': '30px', 'font-family': 'MaerskText-Bold' });
$('tr').css({ 'color': '#000000', 'font-size': '20px', 'font-family': 'MaerskText-Bold' });
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", "#d2deef");
} else {
var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#eeeeee");
}
});
}
Table表格实现半透明
这里参考了一位博主的代码：layui table 表格设置透明，然后改了一些里面的字体样式。
添加这个css样式效果
.transparentDataTable .layui-table {
background-color: transparent !important;
}
.transparentDataTable .layui-table-view {
background-color: rgba(255, 255, 255, 0.7) !important;
}
.transparentDataTable .layui-table-tool {
background-color: transparent !important;
}
.transparentDataTable .layui-table-tool .layui-icon {
color: black;
}
.transparentDataTable .layui-table-header, .transparentDataTable .layui-table-cell, .layui-table-header thead tr {
background-color: transparent !important;
}
.transparentDataTable .layui-table-header thead th, .transparentDataTable .layui-none {
/*border: 1px solid #FFFFFF;*/
color: #6b6b6b !important;/*例名颜色*/
}
.transparentDataTable .layui-table tbody tr a{
border: 1px solid #FFFFFF;
color: #6b6b6b;/*中间字体颜色*/
}
.transparentDataTable .layui-table-init, .transparentDataTable .layui-laypage-limits select, .transparentDataTable .layui-laypage-btn, .transparentDataTable .layui-laypage-skip input {
background-color: transparent !important;
color: black;
}
.transparentDataTable .layui-table-page a, .transparentDataTable .layui-table-page span {
color: black !important;
}
.transparentDataTable .layui-laypage-limits select, .transparentDataTable .layui-laypage-limits option {
-webkit-appearance: none; /* google */
-moz-appearance: none; /* firefox */
appearance: none; /* IE */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击去除高亮的颜色*/
background-color: rgba(0, 0, 0, 0.4) !important;
color: white;
}
.transparentDataTable .layui-table[lay-even] tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.5) !important;
}
添加类样式
<div class="transparentDataTable"><table class="layui-hide" id="allInfo" lay-filter="allInfo"></table></div>
最终效果
LayUI多级下拉菜单
- 首先写两个下拉选项框
<select name="province" id="province" lay-filter="province">
<option value="">请选择</option>
<option value="EFFPRE">四川省</option>
<option value="EFFPRN">浙江省</option>
<option value="EFFPRS">江苏省</option>
<option value="GFF">云南省</option>
</select>
<select name="city" id="city" lay-filter="Sub_Team"></select>
- 再利用js生成二级下拉菜单
<script>
layui.use('form', function () {
var form = layui.form;
layui.form.on('select(province)', function (data) {
if (data.value == "") {
$('#city').html('<option value="">请选择</option>');
layui.form.render("select");
}
else {
if (data.value == "四川省") {
$('#city').html('<option value="">请选择</option>')
$('#city').append(new Option("成都市", "成都市"));
$('#city').append(new Option("绵阳市", "绵阳市"));
$('#city').append(new Option("资阳市", "资阳市"));
}
else if (data.value == "浙江省") {
$('#city').html('<option value="">请选择</option>')
$('#city').append(new Option("杭州市", "杭州市"));
$('#city').append(new Option("嘉兴市", "嘉兴市"));
$('#city').append(new Option("义乌市", "义乌市"));
}
else if (data.value == "江苏省") {
$('#city').html('<option value="">请选择</option>')
$('#city').append(new Option("南京市", "南京市"));
$('#city').append(new Option("苏州市", "苏州市"));
}
else if (data.value == "云南省") {
$('#city').html('<option value="">请选择</option>')
$('#city').append(new Option("昆明市", "昆明市"));
$('#city').append(new Option("大理市", "GFFOT"));
}
layui.form.render("select");
}
});
});
</script>
LayUI下拉选项从数据库中选取
- 前端标签
<select name="Week" id="Week" lay-filter="Week"></select>
- js中的代码
layui.use('form', function () {
var form = layui.form;
layui.form.on('select(Month)', function (data) {
var month = $("#Month").val();
$.ajax({
type: "post",
url: "GetWeek.ashx",
dataType: "json",
data: {
Month: month
},
success: function (d) {
console.log(d);
var tmp = '<option value="">Choose</option>';
for (var i in d) {
tmp += '<option value="' + d[i].Week + '">' + d[i].Week + '</option>';
}
$("#Week").html(tmp);
layui.form.render("select");
}, error: function () {
layer.alert('请求失败');
}
});
});
});
- 后端GetWeek.ashx中的代码
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Web;
namespace Arena
{
/// <summary>
/// Getmonth 的摘要说明
/// </summary>
public class Getmonth : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string month = context.Request["Month"];
context.Response.ContentType = "application/json";
string JsonString = string.Empty;
using (SqlConnection conn = new SqlConnection("Server=.;Database=Arena;User ID=sa;Password=yymm7010212"))
{
conn.Open();
SqlCommand comm = new SqlCommand();
comm.CommandText = "select distinct DatePart(week, PerformanceDate) AS Week from Arena.dbo.Performance where DatePart(month, PerformanceDate)=" + month + "";
comm.Connection = conn;
SqlDataAdapter Adapter = new SqlDataAdapter();
Adapter.SelectCommand = comm;
DataSet ds = new DataSet();
Adapter.Fill(ds);
Adapter.Dispose();
comm.Dispose();
DataTable dt = ds.Tables[0];
JsonString = JsonConvert.SerializeObject(dt);
context.Response.Write(JsonString);
context.Response.End();
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
layUI表格工具栏事件点击后刷新页面的解决办法
我在用layUI写表格的时候发现，第一个表格写的顶部添加数据的按钮是没有问题的，但是我用同样的方法为第二个table表格添加工具栏事件的时候，我点击按钮却刷新的页面，我不太清楚为什么第一个表格的工具栏事件是正确的第二个表格却要刷新整个页面，然后找到了这样的解决办法：
<button class="layui-btn" lay-event="事件名">按钮</button> 增加 type="button" 属性
效果：<button type="button" class="layui-btn" lay-event="事件名">按钮</button>
这里参考了一位博主的总结：layUI表格工具栏事件点击后刷新页面的解决办法
全部评论 (0)
还没有任何评论哟~