Layui表格和表单基础练习

最新推荐文章于 2022-02-28 16:26:40 发布

原创最新推荐文章于 2022-02-28 16:26:40 发布 · 614 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #layui

本文详细介绍了如何使用Layui创建基础表格和表单，包括表格的lay-even属性实现隔行换色，lay-skin设置边框效果，以及通过colgroup修饰表格格式。在表单部分，讲解了文字框、按键和下拉框的用法，如placeholder、lay-verify等属性的设置，以及lay-search和lay-skin在下拉框中的应用。

创建基础表格和表单以及基础属性

一、表格

老样子先导入layui包到工程中并加载

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/layui-v2.6.8/layui/css/layui.css">
<script src="/layui-v2.6.8/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<title>表格1</title>
</head>

静态表格应该使用layui-table
表格中的属性：lay-even 隔行换色效果在class中加入。表框效果：lay-skin=“” 三种效果：line行边框，row列边框，nob无边框。
表格整体大小lay-size=“” 可以填写：小：“sm” 大：“lg”。
另外在table中可以使用colgroup标签来对表格格式进行修饰

标签用于对表格中的列进行组合，以便对其进行格式化。如需对全部列应用样式，标签很有用，这样就不需要对各个单元和各行重复应用样式了。标签只能在 table 元素中使用。表格内部可以分为thead,tbody和tfoot。分别是表头，主体，页脚。下面是表格代码，放了三块基本相同的表格只是修改了部分显示属性

<body>
<!-- 设置样式 -->
<!-- 表1 -->
<table class="layui-table" lay-even lay-skin="line" lay-size="sm">
	<colgroup>
	<col width="150">
	<col width="150">
	</colgroup>
	<thead>
	<tr>
		<td>昵称</td>
		<td>事件</td>
		<td>地点</td>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	</tbody>
</table>
<!-- 表2 -->
<table class="layui-table" lay-even lay-skin="row" lay-size="lg">
	<colgroup>
	<col width="150">
	<col width="150">
	</colgroup>
	<thead>
	<tr>
		<td>昵称</td>
		<td>事件</td>
		<td>地点</td>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	</tbody>
</table>
<!-- 表3 -->
<table class="layui-table" lay-even lay-skin="nob">
	<colgroup>
	<col width="150">
	<col width="150">
	</colgroup>
	<thead>
	<tr>
		<td>昵称</td>
		<td>事件</td>
		<td>地点</td>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	</tbody>
</table>
</body>
</html>

在这里插入图片描述

二、表单

表单今天练习部分功能：
1.文字框
2.按键
3.下拉框
*---------------------------------------------------------------------------------------------------------------------------

表单中，除了加载基本的layui.css和layui.js，需要加载对应使用form的js

<script type="text/javascript">
layui.use('form',function(){
	var form=layui.form;
});
</script>

1.文本框中可以使用的属性有：
（1）placeholder=""; 在文本框中设置初始在框中显示的文字
（2）aotucompolete=""; 填on或off。这里是否自动填充，如果开启类似于社交软件登录的保存密码，会在本地数据记录中填入。
（3）Layui-input-*；可选替换block或者inline； block时，文本框会占据整行空间，inline会占用本行的一定比例空间
下面是文本框实例
（4）required 加入后表示该项必须填写内容不可为空
（5）lay-verify=“required”；校验方式，里面可以填email，手机号等。填required表示有内容即可

<body>
 <form action="" class="layui-form">
	<div class="layui-form-item">
	<label class="layui-form-label">标签区域</label>
	<div class="layui-input-inline">
	<!--此处在input中设置文本框各个属性-->
	<input type="text" name="title" placeholder="请输入" required lay-verify="required" class="layui-input">
	</div>
	</div>
</body>

在这里插入图片描述

2.加入按键可以对表单进行提交等操作

<div class="layui-form-item">
		<div class="layui-input-block">
		<button class="layui-btn layui-btn-nomal" lay-submit >立即提交</button>
		<button type="reset" class="layui-btn layui-btn-nomal ">重置</button>
		</div>
</div>

两个小框框按键对文字框进行操作
在这里插入图片描述

3.下拉框
在form中如果每次要添加新的div块，要记得要在class中设置class=“layui-form-item”
下拉框中可以使用到的一些属性和标签；
（1）optgroup，可以给下拉框进行分组，类似这种效果。
在这里插入图片描述
（2）lay-search ；将这个加入后，下拉框可以写入文字进行筛选选项。适用于框中选项超多，例如城市。
（3）lay-skin 可以设置勾选框的样式 title="" 可以让勾选框上显示一定的文字信息

	<!--普通框-->
	<div class="layui-form-item">
	<label class="layui-form-label">城市</label>
		<div class="layui-input-inline">
		<select name="city"   >
		<option value="">请选择</option>
			<option value="11">北京</option>
		<option value="22">上海</option>
			<option value="33">杭州</option>
			</select>
		</div>
	</div>
	
<!-- 分组下拉框-->
	<div class="layui-form-item">
		<label class="layui-form-label">发现地点</label>
		<div class="layui-input-inline">
		<select name="qqq">
		<option value="">请选择</option> 
		<optgroup label="选择地点">
			<option value="1">广场</option>
		</optgroup>
	<optgroup label="城市">
		<option value="22">北京</option>
		<option value="33">南京</option>
	</optgroup>	
		</select>
		</div>
	</div>
	<!--带筛选-->
		<div class="layui-form-item">
	<label class="layui-form-label">姓</label>
		<div class="layui-input-inline">
		<select name="city"  lay-verify="" lay-search >
		<option value="">请选择</option>
		<option value="11">王</option>
		<option value="22">李</option>
		<option value="33">刘</option>
		</select>
		</div>
	</div>
	<!-- 勾选框  -->
	<div class="layui-form-item">
		<label class="layui-form-label">特殊能力</label>
		<div class="layui-input-block">
		<!--默认勾选-->
			<input type="checkbox" name="hobby" title="瞬间移动" checked value="101"/>
			<input type="checkbox" name="hobby" title="穿墙"value="201"/>
			<input type="checkbox" name="hobby" title="透视"/>
			<input type="checkbox" name="hobby" title="水上行走" lay-skin="primary"/>
			<input type="checkbox" name="hobby" title="飞行" lay-skin="primary" />
			
		</div>
	</div>