layui表单动态CURD功能
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、手残党的搬砖添瓦
- 二、使用步骤
-
- 1.引入CSS，JS样式
- 2.CURD实操
- 总结
前言
时间：2022-11-15
风吹一片叶，万物已惊秋
利用空余时间写了一个layui粗糙demo，有参考官方文档和借鉴博客主的地方仅供参考！
提示：以下是本篇文章正文内容，下面案例可供参考
一、手残党的搬砖添瓦
前端控件能CP就CP 能不用脑子坚决Say No
二、使用步骤
1.引入CSS，JS样式
代码如下（示例）：
<head>
<!--引用 layui.css，注意路径要写自己项目的-->
<!--<link rel="stylesheet" href="/js/layui-v2.6.8/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355" media="all"/>-->
<link rel="stylesheet" href="/js/layui-v2.6.8/layui/css/layui.css" media="all">
</head>
<body>
<!--引用 layui.js和jQuery，注意路径要写自己项目的-->
<script src="/js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="/js/layui-v2.6.8/layui/layui.js"></script>
<script src="/js/vue.min.js"></script>
</body>
2.CURD实操
代码如下（示例）：
<body>
<div id="app">
<form class="layui-form" lay-filter="userForm">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" name="userName" placeholder="请输入名称"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">地址</label>
<div class="layui-input-inline">
<input type="text" name="userAddress" placeholder="请输入内容"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="search">查询</button>
</div>
</div>
</div>
</form>
</div>
<div class="layui-row" id="TK_layForm" style="display:none;position: absolute;
top: 0; left: 0; bottom: 0; right: 0;">
<div class="layui-col-md11">
<form id="tk_form" lay-filter="ht_form" class="layui-form" action="" style="margin-top: 20px;align:center;">
<!--隐藏字段id,区分添加和修改-->
<input type="hidden" name="userId"/>
<!--lay-verify验证的值：required（必填项）,phone（手机号）,email（邮箱）
url（网址）,number（数字）,date（日期）,identity（身份证）
自定义值-->
<div class="layui-form-item">
<label class="layui-form-label">用户名：</label>
<div class="layui-input-block">
<input type="text" name="userName" id="name" lay-verify="required" placeholder="请填写用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">时间：</label>
<div class="layui-input-block">
<input type="text" name="userDate" lay-verify="required" placeholder="请填写时间" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">地址：</label>
<div class="layui-input-block">
<input type="text" name="userAddress" lay-verify="required" placeholder="请填写地址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-radius layui-btn-normal" lay-filter="btn_submit" lay-submit>提交</button>
<!--<input type="button" class="layui-btn layui-btn-radius layui-btn-normal" value="确认" onclick="" />-->
<button type="reset" class="layui-btn layui-btn-radius layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
<!--复选数据表格组件-->
<table class="layui-hide" id="tb-users" lay-filter="tb-users" cyProps="url:'/user/add',checkbox:'true',pageColor:'#2991d9'"></table>
<!--<script type="text/html" id="tool_bar">-->
<!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
<!--<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>-->
<!--</script>-->
<script type="text/html" id="tool_bar">
<a lay-event="detail" title="查看"><i class="layui-icon"></i></a>
<a lay-event="edit" title="编辑"><i class="layui-icon"></i></a>
<a lay-event="del" title="删除"><i class="layui-icon"></i></a>
</script>
<!--分页组件-->
<div id="laypage-user"></div>
<!--选项卡 简洁风格的TabTab组件-->
<div class="layui-tab layui-tab-brief" lay-filter="lb_parent">
<!--Tab 标题-->
<ul class="layui-tab-title">
<li class="layui-this">轮播图展示</li>
<li>日期</li>
<li>分页</li>
<li>上传</li>
<li>滑块</li>
</ul>
<div class="layui-tab-content">
<!--轮播图控件-->
<div class="layui-tab-item layui-show">
<div class="layui-carousel" id="lb_show">
<div carousel-item>
<div><p class="layui-bg-green demo-carousel">最伟大的作品</p></div>
<div><p class="layui-bg-red demo-carousel">Mojito</p></div>
<div><p class="layui-bg-blue demo-carousel">晴天</p></div>
<div><p class="layui-bg-orange demo-carousel">稻香</p></div>
<div><p class="layui-bg-cyan demo-carousel">以父之名</p></div>
</div>
</div>
</div>
<!--日期-->
<div class="layui-tab-item">
<div id="laydateDemo"></div>
</div>
<!--分页-->
<div class="layui-tab-item">
<div id="pageDemo"></div>
</div>
<!--上传-->
<div class="layui-tab-item">
<!--上传组件-->
<div class="layui-upload-drag" id="uploadDemo">
<i class="layui-icon"></i>
<p>点击上传，或将文件拖拽到此处</p>
<div class="layui-hide" id="uploadDemoView">
<hr>
<img src="" alt="上传成功后渲染" style="max-width: 100%">
</div>
</div>
</div>
<!--滑块-->
<div class="layui-tab-item">
<div id="sliderDemo" style="margin: 50px 20px;"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var vm;
layui.use(['table', 'form', 'laypage', 'layer'], function () {
var table = layui.table;
var laypage = layui.laypage;
var form = layui.form;
var laydate = layui.laydate;//日期
var table = layui.table;//表格
var carousel = layui.carousel;//轮播
var upload = layui.upload;//上传
var element = layui.element;//元素操作
var slider = layui.slider;//滑块
var dropdown = layui.dropdown;//下拉菜单
var page, limit;//分页参数
layer.msg('今天有坚持学习么？', {icon: 6});
vm = new Vue({
el: '#app',
data: {},
methods: {
},
created: function () {
console.log("Vue实例1...");
},
mounted: function () {
console.log("Vue实例2...");
}
});
//监听Tab切换
element.on('tab(lb_parent)', function (data) {
layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
tips: 1
});
});
//第一个实例
table.render({
elem: '#tb-users'
, height: 420
, url: '/user/list'
, even: true
, count: 55
, title: '用户表'
, page: true //开启分页
, toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
, totalRow: true //开启合计行
// , page: {//支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
// layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局
// ,curr: 1 //设定初始在第 5 页
// ,count: 53 //只显示 1 个连续页码
// ,first: false //不显示首页
// ,last: false //不显示尾页
// }
, cols: [ //表头
[
{type: 'checkbox'},//复选框
{field: 'userId', title: '用户ID', width: 150}
, {field: 'userName', title: '用户名', width: 150}
, {field: 'userDate', title: '时间', width: 200}
, {field: 'userAddress', title: '地址', width: 300}
,{fixed: 'right',title: '操作', width: 165, align:'center', toolbar: '#tool_bar'}
]
]
// ,response: {
// statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
// }
, parseData: function (res) { //res 即为原始返回的数据
// console.log(res.data.list);
// console.log(res.code);
return {
"code": 0,
"data": res.data.list //解析数据列表
};
}
});
/**
* 监听头工具栏事件
* toolbar - 绑定工具条模板
* 通常你需要在表格的每一行加上 查看、编辑、删除 这样类似的操作按钮，
* 而 tool 参数就是为此而生，你因此可以非常便捷地实现各种操作功能。
* tool 参数和 templet 参数的使用方式完全类似，通常接受的是一个选择器，也可以是一段HTML字符。
*/
table.on('toolbar(tb-users)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id)
,data = checkStatus.data; //获取选中的数据
console.log(checkStatus);
// var data = obj.data; //获得当前行数据
// var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
// var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
console.log(obj.event);
switch (obj.event) {
case 'add':
layer.msg('添加');
tk_form('添加','',500,400);
$("#tk_form").setForm({id:''});
break;
case 'update':
if (data.length === 0) {
layer.msg('请选择一行');
} else if (data.length > 1) {
layer.msg('只能同时编辑一个');
} else {
// layer.alert('编辑 [id]：' + data[0].userId);
tk_form('编辑','',600,600);
form.val("ht_form",{
"userId":data[0].userId,
"userName":data[0].userName,
"userDate":data[0].userDate,
"userAddress":data[0].userAddress
});
}
break;
case 'delete':
if (data.length === 0) {
layer.msg('请选择一行');
} else {
layer.msg('删除');
}
break;
}
;
});
//监听提交
form.on('submit(search)', function (data) {
//获取表单区域所有值
var result = form.val("userForm");
// console.log("form表单中的数据：" + data1);
// console.log("展示值：" + data1);
// console.log(data1.userName);
// layer.msg("表单按钮...");
// console.log("formDemo：" + data.field);
// console.log("展示值："+data);
// console.log(data.field.userName);
table.reload('tb-users', {
page: {
curr: 1
},
where: {
userName: result.userName,
userAddress: result.userAddress
},
url: '/user/sel'
});
return false;
});
form.on('submit(btn_submit)', function(data){
// console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
// console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
// layer.msg(JSON.stringify(data.field));
$.post(
"/user/add",
data.field,
function(res){
if(res.status){
layer.msg(res.message, {time: 2000});
var url = "/user/login";
setTimeout(window.location.href=url,2000);
}else{
layer.msg(res.message, {time: 2000});
}
},'json');
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
//分页
// laypage.render({
// elem: 'laypage-user',
// limit: 10,
// count: 55,
// curr: 1,
// layout: ['limit', 'prev', 'page', 'next', 'skip'],
// prev: '上一页',
// next: '下一页',
// start: '首页',
// end: '尾页',
// jump: function (obj, first) {
// var result = [];
// var page = obj.curr;
// var limit = obj.limit;
// //后端逻辑
// // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
// // console.log(obj.limit); //得到每页显示的条数
// $.ajax({
// type: 'post',
// url: 'http://localhost:8080/user/list?page=' + page + '&limit=' + limit,
// data: result,
// dataType: "json",
// async: true,
// success: function (result) {
// // console.log("结果集1：" + result);
// if (result.code == 200) {
// var data = result.data.list;
// // console.log(result.data.list);
// tableDrawing(data, limit) // 数据传到 table组件
// } else {
// console.log("结果集2：" + result);
// }
// },
// error: function () {
// console.log('访问失败');
// }
// });
// }
//
// });
//执行一个轮播实例
carousel.render({
elem: '#lb_show'
, width: '100%' //设置容器宽度
, height: 200
, arrow: 'none' //不显示箭头
, anim: 'fade' //切换动画方式
});
//获取后端JSON数据
function getTableData() {
var data = [];
$.ajax({
type: 'post',
url: 'http://localhost:8080/user/list?page=' + page + '&limit=' + limit,
data: result,
dataType: "json",
async: true,
success: function (result) {
console.log(result);
if (result.code == 200) {
var data = result.resultSet;
tableDrawing(data) // 数据传到 table组件
} else {
console.log(result);
}
},
error: function () {
console.log('访问失败');
}
});
};
//渲染表格
function tableDrawing(data, page_count) {
layui.table.render({
elem: '#tb-user',
cols: [ //表头
[
{type: 'checkbox'},//复选框
{field: 'userId', title: '用户ID', width: 150}
, {field: 'userName', title: '用户名', width: 150}
, {field: 'userDate', title: '时间', width: 200}
, {field: 'userAddress', title: '地址', width: 300}
]
],
data: data, // 数据
limit: page_count, // 每页显示的条数
even: true
});
};
function pagesDrawing(data) {
layui.laypage.render({
elem: 'laypage-user',
limit: 10,
curr: 1,
layout: ['limit', 'prev', 'page', 'next', 'skip'],
prev: '上一页',
next: '下一页',
start: '首页',
end: '尾页',
count: data.resultnNoList, //数据总数，从服务端得到
theme: '#0078ff',
limit: page_count, // 每页条数
// layout: ['prev', 'page', 'next', 'count'],
jump: function (obj, first) {
//console.log(obj)
//obj包含了当前分页的所有参数，比如：
//console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
//console.log(obj.limit); //得到每页显示的条数
//首次不执行
if (!first) {
numpage(obj.curr, obj.limit) // 分页点击传参
}
}
});
};
function numpage(curr, page_count) { // 分页切换-数据请求
var page_b = (curr - 1) * page_count;
var list_parameter = {
//当前页
page_b: page_b,
//分页数
page_count: page_count
};
// if (isSearch) { // 搜索列表
// var key = 'team_name';
// var value = keywords;
// list_parameter[key] = value;
// }
$.ajax({
type: 'post',
url: 'http://localhost:8080/user/login',
data: list_parameter,
dataType: "json",
async: true,
success: function (result) {
console.log(result);
if (result.code == 200) {
var data = result.resultSet;
tableDrawing(data) // 数据传到 table组件
} else {
console.log(result);
}
},
error: function () {
console.log('访问失败');
}
});
};
var index;//layer.open 打开窗口后的索引，通过layer.close(index)的方法可关闭
//表单弹出层
function tk_form(title, url, w, h) {
if (title == null || title == '') {title = false;};
if (url == null || url == '') {};// url="404.html";
if (w == null || w == '') {w = ($(window).width() * 0.9);};
if (h == null || h == '') {h = ($(window).height() - 50);};
index = layer.open({ //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
type: 1,
title: title,
area: ['25%', '55%'],//类型：String/Array，默认：'auto' 只有在宽高都定义的时候才不会自适应
// area: [w+'px', h +'px'],
fix: false, //不固定
maxmin: true,//开启最大化最小化按钮
shadeClose: true,//点击阴影处可关闭
shade: 0.4,//背景灰度
skin: 'layui-layer-rim', //加上边框
content: $("#TK_layForm").html()
});
}
});
</script>
总结
前端框架千千万 虐我一遍又一遍
Peace&Love