前言

时间：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">&#xe63c;</i></a><a lay-event="edit" title="编辑"><i class="layui-icon">&#xe642;</i></a><a lay-event="del" title="删除"><i class="layui-icon">&#xe640;</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

layui表单动态CURD功能相关推荐

layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...
element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
前言开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的在线访问:动态表单校验 github(欢迎star): https://github.com ...
layui表单提交使用form.on(‘submit(sub)‘,function (){}) 使用ajax请求时回调不执行的原因及解决方法
layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法参考文章: (1)layui表单提交使用form.on(' ...
php 自动验证表单类,thinkPHP 表单自动验证功能
昨天晚上我们老大叫我弄表单自动验证功能,愁了半天借鉴了好多官网的知识,才出来,诶,总之分享一下我自己的成果吧! thinkphp 在Model基类为我们定义了自动验证的函数和正则表达式,我们只需要在对 ...
springmvc+ztree v3实现类似表单回显功能
在做权限管理系统时,可能会用到插件zTree v3,这是一个功能丰富强大的前端插件,应用很广泛,如异步加载菜单制作.下拉选择.权限分配等.在集成SpringMVC中,我分别实现了zTree的添删改查, ...
layui表单验证内置自定义规则 - 使用说明
关于 layui表单的验证规则.调用.自定义规则的使用经验总结: 除了 layui 本身配套的一个验证体系,还支持开发者自定义验证规则(如上表中的[自定义密码验证(代码参考下文)]),并直接嵌入到页面 ...
element实现form表单动态添加email效果
前言: vue中使用element实现form表单动态添加email效果效果: 实现步骤: 实现源代码: <template><div><el-form ref=&qu ...
vue + element-ui 对登录功能、重置表单、退出功能、路由重定向、挂载路由导航守卫的实现
vue + element-ui 对登录功能.重置表单.退出功能.路由重定向.挂载路由导航守卫的实现表单验证规则: 重置表单和对登录功能的验证: 路由重定向: 挂载路由导航守卫: 退出功能的实现 ...
Html利用函数输入学生的性别,JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)...
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证) 发布时间:2020-10-08 04:15:08 来源:脚本之家阅读:73 作者:水山奇问题:表单怎么在输入后 ...

layui表单动态CURD功能

文章目录

前言

一、手残党的搬砖添瓦

二、使用步骤

1.引入CSS，JS样式

2.CURD实操

总结

layui表单动态CURD功能相关推荐

最新文章

热门文章