layui使用

最新推荐文章于 2023-05-13 09:25:51 发布
最新推荐文章于 2023-05-13 09:25:51 发布
阅读量267 收藏 1
点赞数
分类专栏： 前端 文章标签： layui 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuruizai110/article/details/88629533
版权

LK最近使用layui跟换i了系统中的前端框架，现将一些知识点做一总结：

layui官网：https://www.layui.com/doc/

介绍:是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

  1. code目录结构
    在这里插入图片描述
  2. 使用方法

获得 layui 后，引入
./layui/css/layui.css
./layui/layui.js

  1. 使用
    项目中采用的是它的模块化方法：

layui.use([‘table’, ‘form’], function() {
var table = layui.table;
var form = layui.form;
}）
4.表格使用

<table id="demo" lay-filter="test"></table>

	var tabObj = table.render({
				elem : '#demo',
				url : ctx + '/showUsers.do',// 数据接口
				method : "post",
				toolbar : '#toolbarDemo',//头部工具条
				page : true, // 开启分页
				cols : [[ // 表头
				{
							type : 'checkbox'
						}, {
							title : '序号',
							type : 'numbers'
						}, {
							field : 'id',
							title : 'ID',
							width : 80,
							sort : true,
							fixed : 'left',
							hide : true
						}, {
							field : 'username',
							title : '用户名',
							width : 160
						}, {
							field : 'role',
							title : '用户类型',
							width : 160
							// sort : true
					}	, {
							field : 'email',
							title : '邮箱',
							width : 160
							// sort : true
					}	, {
							field : 'status',
							title : '状态',
							width : 160,
							hide : true
							// sort : true
					}	, {
							field : 'administration',
							title : '管理',
							width : 280
							// sort : true
					}]],
				request : {
					pageName : 'page',// 页码的参数名称，默认：page
					limitName : 'rows' // 每页数据量的参数名，默认：limit
				},
				response : {
					statusCode : 200,// 规定成功的状态码，默认：0
					// msgNa 'hint', //规定状态信息的字段名称，默认：msg
					countName : 'records', // 规定数据总数的字段名称，默认：count
					dataName : 'rows' // 规定数据列表的字段名称，默认：data
				},
				done : function(res, curr, count) {//数据渲染完的回类似于bootstrap中的format函数

					var trs = $("#maindiv table").find("tr");
					for (var i = 0; i < trs.length; i++) {
						var dtr = trs[i];
						// 格式化用户类型
						var td4 = $(dtr).find("td").eq(4);
						var role = $(td4).find("div").html()
						var v = formatUserType(role);
						$(td4).find("div").html(v)
						var td7 = $(dtr).find("td").eq(7);
						// 格式化操作按钮
						var td6 = $(dtr).find("td").eq(6);
						var status = $(td6).find("div").html()
						var btn = formatBtn(status, role)
						$(td7).find("div").html(btn)
					}
				}

			});

	// 头工具栏事件
	table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				// 添加新用户
				if (obj.event == "addUser") {
					var addUser = layer.open({//弹出框
								type : 1,
								skin : 'layui-layer-demo', // 样式类名
								anim : 0,
								title : ['添 加 新 用户', 'font-size:18px;'],
								area : ['800px', '500px'],
								content : $("#addUser"),//所弹出内容的id
								closeBtn : 1,
								end : function() {//弹出完的回调
								//清楚记录
									$("#user_name").val("")
									$("#user_type").val("请选择用户类型")
									$("#user_pass").val("")
									$("#confirm_user_pass").val("")
									$("#user_email").val("")
								重新渲染form
									form.render('select');
									form.render()

								}
							});
					layer.full(addUser);

				}

			});
  1. form使用
<!--添加窗口-->
<div id="addUser"  style="display:none;margin:10px" >
 <form class="layui-form" lay-filter="addUser" >
 
  <div class="layui-form-item">
	  	  	<label class="layui-form-label" style="width: 100px" ><span class="red">*</span>用户名：</label>
            <div class="layui-input-inline">
              <input type="text" name="user_name" id="user_name" value="" style="width: 120px"  lay-verify="required|userName"   class="layui-input">
            </div>
             <span id="username_error"style="display:none;" class="red"> </span> 
          </div>
 
      <div class="layui-form-item">
	  	  	<label class="layui-form-label" style="width: 100px" ><span class="red">*</span>用户类型：</label>
            <div class="layui-input-inline" style="width: 120px">
			    <select lay-verify="required" lay-filter="user_type"  class="u_select" id="user_type" name="user_type">
			     <option value="" selected="true">请选择用户类型</option>
			      <option value="1" >管理员</option>
			      <option value="2" >普通用户</option>
				</select>
			  </div> 
              <span id="groupname_error"style="display:none;" class="red"> </span> 
            </div>
 
	 <div class="layui-form-item">
	  	  	<label class="layui-form-label" style="width: 100px" ><span class="red">*</span>登录密码：</label>
          	  <div class="layui-input-inline" style="width: 120px">
			     <input type="text" name="user_pass" id="user_pass" value="" style="width: 120px"  lay-verify="required|user_pass"   class="layui-input">
			  </div>
			  <span id="dbId_error"style="display:none;" class="red"> </span> 
          </div>
          <div class="layui-form-item">
	  	  	<label class="layui-form-label" style="width: 100px" ><span class="red">*</span>确认密码：</label>
          	  <div class="layui-input-inline" style="width: 120px">
			    <input type="text" name="confirm_user_pass" id="confirm_user_pass" value="" style="width: 120px"  lay-verify="required|confirm_user_pass"   class="layui-input">
				 
			  </div>
			  <span id="confirm_user_pass_error"style="display:none;color:red" class="red">  </span> 
          </div>
          
           <div class="layui-form-item">
	  	  	<label class="layui-form-label" style="width: 100px" ><span class="red">*</span>邮箱：</label>
          	  <div class="layui-input-inline" style="width: 120px">
			    <input type="text" name="user_email" id="user_email" value="" style="width: 120px"  lay-verify="required|user_email"   class="layui-input">
				 
			  </div>
			  <span id="dbId_error"style="display:none;color:red" class="red"> </span> 
          </div>
          
         <div class="layui-form-item">
		    <div class="layui-input-block">
		      <button class="layui-btn layui-btn-green" lay-submit lay-filter="addUserInfo">立即提交</button>
		      <button type="reset" id="commit" class="layui-btn layui-btn-primary">重置</button>
		    </div>
	    </div>
	   </form>
	   
	  </div>


	// 用户验证,要在对应属性中使用lay-verify属性
	form.verify({

		userName : [/^[a-zA-Z]{1}([a-zA-Z0-9_@.]){5,29}$/,
				'用户名为字母、数字和下划线组成的6-30个字符,且以字母开头'],
		user_pass : [
				/^([a-zA-Z0-9]|[._]|[`~!@#$%^&*\(\)\-+\{\}\[\]\\|;:'",.\/<>?]){6,15}$/,
				'密码为英文字母、数字和特殊字符(不含空格)组成的6-15个字符'],
		confirm_user_pass : [
				/^([a-zA-Z0-9]|[._]|[`~!@#$%^&*\(\)\-+\{\}\[\]\\|;:'",.\/<>?]){6,15}$/,
				'密码为英文字母、数字和特殊字符(不含空格)组成的6-15个字符'],
		user_email : [
				/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/,
				'邮箱格式不对']

	})
// 提交新添加用户信息
	form.on('submit(addUserInfo)', function(data) {
				var user_name = $("#user_name").val().trim()
				var user_type = $("#user_type").val().trim()
				var user_pass = $("#user_pass").val().trim()
				var confirm_user_pass = $("#confirm_user_pass").val().trim()
				var user_email = $("#user_email").val().trim()

					// 提交字段信息
					jQuery.ajax({
								type : 'POST',
								url : ctx + '/checkNewUser.do',
								dataType : 'json',
								data : {
									username : user_name
								},
								success : function(data) {
									if (data) {
										if (data.status == "success") {
											saveUser(user_name, user_type,
													user_pass, user_email)
													//location.reload()
													 
													
										} else {
											layer.alert("用户名已存在！")
										}
									}
								},
								error : function() {
								}
							})
					return false
			})
yuruizai110
关注
专栏目录
layui table数据表格的使用（一）
mor31的博客
06-05 4721
layui的table模块用于对表格进行一些列功能和动态化数据操作，易上手操作，本篇介绍table常用的方法，更多的细节可参考官方文档：layui数据表格文档 一、引入layui文件 <link rel="stylesheet" href="/layui/css/layui.css" media="all"> <script src="/layui/layui.js"></script> 二、快速使用 创建一个table实例最简单的方式是，在页面放置一个元素 <
Layui - 数据表格 table
weixin_42361858的博客
12-03 4012
官网文档：https://www.layui.com/doc/modules/table.html 模块： layui.use('table', function(){ var table = layui.table; }); 目录 简单表格 参数 开放方法 方法 - 事件监听 简单表格 <!-- 注意class、layui参数、方法 --> <!-- 方法渲染 --> <table class="layui-table" id="simple"&gt.
layui的使用（table/form）——layui踩坑记录
yehaocheng520的博客
03-31 1810
公司之前的老系统是前后端不分离的MVC模式，是基于Layui开发的。 1.引入layui 引入文件的具体路径需要根据实际项目来。 <link href="~/Content/plugins/layui-v2.4.3/layui/css/layui.css" rel="stylesheet" /> <script src="~/Content/plugins/layui-v2.4.3/layui/layui.js"></script> 2. 页面功能分析 页面结构如上图
layui.table组件的用法
wgx_0504的博客
05-13 996
Layui 是一款轻量级的前端 UI 框架，其中的 layui.table 组件是用来展示表格数据的组件。下面是 layui.table 的用法示例。
layui.table快速使用
weixin_44570988的博客
10-08 302
创建一个table实例最简单的方法是在页面放置一个元素，代码如下： <table id="personageDate"></table> 绑定容器，设置数据接口，在表头设置对应的字段。渲染方式使用的是方法渲染，将基础参数的设定放在JS代码中，而且table的标签只需要一个选择器。 //table数据-----------------------------开始 layui.use('table',function() { var table = layui.table.
layui使用vue的例子
06-13
本项目结合了两者，提供了"layui使用vue的例子"，帮助初学者更好地理解和应用Vue技术。 layui以其简洁、易用和丰富的组件库而受到青睐，它涵盖了表格、表单、按钮、图标、弹窗（layer）等常见的网页元素。Vue.js则...
Layui 使用 citypicker 省市区级联选择地址
01-08
Layui 使用 TinyMCE 富文本编辑器Layui 使用 citypicker 省市区级联选择地址1.进入 Layui 第三方组件平台下载该拓展组件2.写一个测试 Demo3.结果查看及补充4.效果演示5.源码地址 Layui 使用 citypicker 省市区级联...
layui使用templet格式化表格数据的方法
10-16
在本文中，我们将深入探讨如何使用layui框架中的templet功能来格式化表格数据，以便更好地展示和处理数据。layui是一款轻量级的前端组件库，它提供了丰富的UI组件和便捷的API，使得开发者能够轻松地构建用户界面。...
layui使用表格渲染获取行数据的例子
01-19
需求：使用前端框架layui生成表格，点击表格中一行数据中的按钮，获取到这行数据。 解决办法： 在render中增加字段： done: function (res, curr, count) { // $('.x-body').find('.layui-table-body').find(table...
layui使用form表单实现post请求页面跳转的方法
10-16
本文将详细介绍如何使用layui的form表单实现POST请求并进行页面跳转，以确保数据安全且避免信息泄露。 通常，通过`window.location.href`的方式添加参数进行页面跳转会将数据暴露在URL中，这可能带来安全风险。为了...
layui实现table加载的示例代码
01-21
js实现： layui.use(['table','form'], function() { $ = layui.jquery; table = layui.table; tableIns = initTable(); }); //加载列表 function initTable(){ // 执行渲染 tableIns = table.render({ id: 'idTest', elem : '#deviceTable', // 指定原始表格元素选择器（推荐id选择器） size: 'lg', height : 'full-20', // 容器高度 url : '/csCloud-admin
Layui 使用use来渲染table表格时，触发自定义工具事件的只能触发一次的解决方案
比坚持更厉害的是把坚持日常化
03-23 1082
我的需求很简单，在下方的导药按钮触发请求后台，之后刷新表格数据。 尝试过很多解决办法，如下是定义layui table的html和对应初始化js 这里很多人看了layui官网可能会说使用官网的头工具栏监听事件和数据重载这两种方式来监听事件点击，但是在我反复尝试过程中，会莫名其妙的导致页面刷新这是我不想要的效果。 之后开始折腾绑定id来实现，如下： 可以看到我使用元素dom绑定click实现了，这里还要强调一下，你肯定会说，也可以使用a标签的onclick来监听，但是这里我们会使用到l
layui数据表格的使用（前端和后端）
热门推荐
qq_45598422的博客
03-26 1万+
数据表格（纯前端） 快速使用 首先需要引入layui的css和js <link rel="stylesheet" href="../static/layui/css/layui.css"> <script src="../static/layui/layui.js" charset="utf-8"></script> 然后再定义一个table标签，并写入js代码即可快速使用 <table id="demo"></table> <script
LayUI数据表格的使用指南，简述java运行原理
m0_64867152的博客
12-15 1714
public void setLimit(Integer limit) { this.limit = limit; } public String getSort() { return sort; } public void setSort(String sort) { this.sort = sort; } public String getOrder() { return order; } public void setOrder(String order) { this.order = order;
layUI的Table的使用方法
weixin_40029679的博客
12-25 803
使用方法获取到ajax请求： var table = layui.table ,form = layui.form; layui.use('table', function () { // 引入 table模块 table.render({ id:"dataTable",// elem: '#layui_table_id',//指定表格元...
layui中的table使用心得，json格式处理，json转字符串，json转对象，json转对象数组，layui表格图片显示修改。
Huathy的博客
04-26 1万+
layui表格使用，前后端数据交互的多种写法
LayUI中的内置模块之 table 数据表格文档(layui 重点维护的项目之一)
daimeijin的博客
08-14 6843
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 table 数据表格文档 table 模块是我们的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务
layui table表格详解
weixin_30788619的博客
12-02 5028
上次做table有些东西 忘记了 这次当作来个分析总结一下 跟大家共同学习 闲话不多说 直接上例子 代码： <form id="form1" runat="server"> <div> <table id="demo" lay-filter="test"></table> </div...
Layui插件 Table 数据表格文档
weixin_46767263的博客
08-18 883
开发工具与关键技术：Microsoft Visual Studio C# 作者：萧然 撰写时间：2020年8月 5日 今天我们引入了一个插件叫做Layui, layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底.
layui使用UEditor
最新发布
09-05
layui是一个轻量级的前端UI库，它提供了一系列简单易用的组件，而ueditor是一款功能强大的富文本编辑器，常用于在线内容编辑。要在layui项目中集成UEditor，你可以按照以下步骤操作： 1. **下载依赖**：首先从UEditor官网下载适合项目的版本，通常选择最新稳定版。 2. **引入资源**： - 将ueditor.all.min.js和对应的lang文件（如zh-cn.js）以及所需的图片、css等资源复制到你的项目中，并保证它们可以正常访问。 - 使用layui引入CSS和JS文件，例如： ```html <link rel="stylesheet" href="path/to/ueditor/uestyle.css"> <script src="path/to/ueditor/ueditor.all.min.js"></script> ``` 3. **初始化UEditor**： 在需要使用编辑器的地方，创建一个ueditor实例并配置选项。你可以通过layui提供的`layui.use()`方法注册依赖： ```javascript layui.use(['layedit', 'editor'], function() { var layedit = layui.layedit; var editor = layui.editor; // 初始化UEditor，这里假设你使用layedit作为容器ID let ue = editor.render({ elem: '#your-editor-id', url: '/upload/image', // 图片上传地址 toolbar: ['fullscreen', 'undo redo', 'bold italic underline', 'insertimage'] // 配置工具栏 }); }); ``` 4. **注意**: 要确保服务器端设置支持UEditor的请求，包括图片上传等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值