Layui表格和表单基础练习

最新推荐文章于 2024-09-06 09:05:47 发布
最新推荐文章于 2024-09-06 09:05:47 发布
阅读量522 收藏
点赞数
文章标签： css html layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/arvicky/article/details/119491692
版权
本文详细介绍了如何使用Layui创建基础表格和表单，包括表格的lay-even属性实现隔行换色，lay-skin设置边框效果，以及通过colgroup修饰表格格式。在表单部分，讲解了文字框、按键和下拉框的用法，如placeholder、lay-verify等属性的设置，以及lay-search和lay-skin在下拉框中的应用。
摘要由CSDN通过智能技术生成

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

一、表格

老样子先导入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>广场
最低0.47元/天 解锁文章
Arvicky
关注
layui练习（3）
qqyang_的博客
08-03 178
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
layui表单实现
aqzengkuasheng的博客
02-28 584
表单输入框的实现 1.要引入layui中的核心css和js资源 <link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui-v2.5.6/layui/css/layui.css"/> <script src="layui-v2.5.6/layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script> 2.要有依
Layui table.render的使用
最新发布
weixin_41203765的博客
09-06 2069
cols: [[// ... 其他列配置{field: 'wealth', title: '财富', width: 135, sort: true,// 假设d.wealth是数值或可以直接拼接的字符串}}// ... 其他列配置]]// ... 其他配置，如 data 或 url});
layui表单
taiyangwojiu的博客
12-13 621
layui表单 使用定义: 在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。 注意: 依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能） 表单控件 控件 含义 ...
Layui表单
灰白色
06-09 1536
开发工具与关键技术：visual Studio jquery 作者：邓伟征 撰写时间： 在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。 layui 针对各种表单元素做了较为全面的UI支持，你无需去书写那些 UI 结构，你只需要写 HTML 原始的 input...
layui-表单
博客园: https://www.cnblogs.com/fger/
06-14 349
首先不管是单选框还是复选框或者是下拉框，都要在你写的标签外面套一层div或者是form标签，如： &amp;amp;lt;div class=”layui-input-block”&amp;amp;gt;&amp;amp;lt;input type=”radio” name=”sex” value=”0” title=”男”&amp;amp;gt;&amp;amp;l
javaweb基础之layui小demo练习
weixin_44093711的博客
11-15 1087
什么是Servlet Servlet 运行在服务端的Java小程序，是sun公司提供一套规范（接口），用来处理客户端请求、响应给浏览器的动态资源。但servlet的实质就是java代码，通过java的API 动态的向客户端输出内容 servlet三个技术点： 1）servlet技术 2）filter技术—过滤器 3）listener技术—监听器 快速入门 1）创建类继承HttpServlet类 2）覆盖doGet和doPost 3）在web.xml中进行servlet的配置 配置： 其中url-patter
springboot+mybatis-plus+layui练习 增删改查、批量删除、分页，条件组合查询
weixin_55712503的博客
10-31 1118
springboot+mybatis-plus+layui练习 增删改查、批量删除、分页，条件组合查询
基于thinkPHP的在线练习系统，该系统基于Web平台、采用Layui、ThinkPHP 开发框架.zip
03-09
Layui是一个流行的前端UI框架，专为Web开发提供一套美观、实用的基础样式和组件。它包含了大量的页面元素、表单组件、弹出层、表格、导航等，且样式统一，易于定制。在本系统中，Layui为用户界面提供了简洁、直观的...
中享思途五天layui前后端设计课程，第三天
03-22
1. layui表格与表单：layui的表格组件支持动态加载数据、分页、排序等功能，是构建后台管理系统的重要工具。表单组件则提供了各种输入控件，便于用户交互。学员将学习如何创建和定制这些组件，以满足不同场景的需求...
LayuiForm表单.txt
12-10
form表单元素包括：text 文本输入框，password密码输入框，checkbox复选框，radio单选框，file 文件域，submit表单提交action指向的文件，reset表单清空，image图片提交按钮，button按钮，hidden隐藏域。 select option select 实现下拉选 callback 是回调函数 layui.模块   模块可以是layui已经存在的模块，也可以通过layui.define([mods], callback) 来自己自定义模块。 如果想要使用模块首先要做的必然是加载模块，layui.use(['laypage', 'layedit'], function(){}); 接下来使用layui风格控件  其实感觉layui帮我们定义好了CSS和许多JS文本，我们需要做的只是按照layui的命名规范选好样式进而使用就可以了。  layu官方文档的命名规范为： CSS命名规范 class命名前缀：layui，连接符：-，如：class="layui-form" 命名格式一般分为两种： 一：layui-模块名-状态或类型 二：layui-状态或类型 因为有些类并非是某个模块所特有，他们通常会是一些公共类。如： 一（定义按钮的原始风格）：class="layui-btnlayui-btn-primary" 二（定义内联块状元素）：class="layui-inline" 1 2 3 4 5 6 7 8 9 当然还有前面提到的使用模块的js代码： layui.use(['form', 'layedit', 'laydate'], function(){   var form = layui.form   ,layer = layui.layer   ,layedit = layui.layedit   ,laydate = layui.laydate;   //日期   laydate.render({     elem: '#date'   });   laydate.render({     elem: '#date1'   });   //创建一个编辑器   var editIndex = layedit.build('LAY_demo_editor');   //自定义验证规则   form.verify({     title: function(value){       if(value.length < 5){         return '标题至少得5个字符啊';       }     }     ,pass: [/(.+){6,12}$/, '密码必须6到12位']     ,content: function(value){       layedit.sync(editIndex);     }   });   //监听指定开关   form.on('switch(switchTest)', function(data){     layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {       offset: '6px'     });     layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)   });   //监听提交   form.on('submit(demo1)', function(data){     layer.alert(JSON.stringify(data.field), {       title: '最终的提交信息'     })     return false;   }); }); 下面我们按照官方文档的开发规范使用一下form表单的例子       表单集合演示           单行输入框                       验证必填项                             验证手机                                   验证邮箱                                       多规则验证                                   验证日期                                   验证链接                                 验证身份证                       自定义验证                   请填写6到12位密码               范围                           -                                 单行选择框                   </opt
JS_layui数据表格分组展示控件
11-08
虽然layui已经下架了，但是相信还是有很多伙伴在使用，但是layui table表格没有分组显示功能。 本资源对原layui table控件进行了扩展，增加了分组展示功能。 * layui分组表格控件，用于实现页面数据分组，并以树形结构显示 * 1、支持多级分组； * 2、支持自定义分组标题； * 3、支持分组数据行数显示； * 4、所有行数据会增加属性： * $treetype as [d|g] : 数据类型（d:数据;g:分组） * $treeid : 数据分组ID（分组：父ID+id；数据：父ID+行号[不连续]） * $treepid : 父级分组ID（一级分组父ID为$ROOT） * $index4all : 数据行号（从1开始，分组行不计数） * $index4group : 组内数据行号（从1开始，分组行不计数） * $treedepth : 属性结构层级（一级分组层级为0） * 5、支持展开全部expandAll/收拢全部foldAll
layui——表单
yilia_jia的博客
10-23 642
&lt;form class="layui-form" action=""&gt; &lt;div class="layui-form-item"&gt; &lt;label class="layui-form-label"&gt;用户类型&lt;/label&gt; &lt;div class="layu
Layui-------表单篇
weixin_44394054的博客
01-23 478
导航，面包屑：https://www.layui.com/doc/element/nav.htm 进度条：https://www.layui.com/doc/element/progress.html 面板：https://www.layui.com/doc/element/panel.html 徽章
Layui之表单form
热门推荐
XCMercy
12-23 1万+
1. 全家福代码以及效果图 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here $(function() { layui.use('form', function() { var form = layui.
layui页面元素之表单
userwang的博客
07-03 1181
目录前言模块功能编码输入框下拉选择框复选框单选框文本域组装行内表单表单赋值/取值 前言 本章给大家分享的是layui页面元素中表单的模块和赋值取值方式。 模块功能编码 在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。 先上效果图： 输入框 <input type="text" name="title" required lay-verify="requi
LayUI框架表单例子
PHP开光程序员的博客
06-20 852
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui.form小例子</title> <link rel="stylesheet" href="layui.css" media="all"> </head&...
layui-form
code袁的博客
12-31 2315
layui-form 1.单行排列 <div class="layui-form-item"> <label class="layui-form-label">姓名:</label> <div class="layui-input-block"> <!--layui-input-block 块级元素 --> <input type="text" name="title" required lay-verify="
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值