Layui分步表单

最新推荐文章于 2024-05-02 20:30:37 发布
最新推荐文章于 2024-05-02 20:30:37 发布
阅读量5.8k 收藏 24
点赞数 4
文章标签： css js layui html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45275107/article/details/116204331
版权

Layui实现分步表单（2021-4-27）

项目截图：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

1、把step的css和js导入进项目

2、页面引入css以及js

<link rel="stylesheet" href="/layui/step-lay/step.css" type="text/css" media="all">
<script src="/layui/step-lay/step.js"></script>

3、主要实现代码

3.1 script头部写以下代码，并引入step

layui.config({
    base: '/'
}).extend({
    step:'/layui/step-lay/step'
}).use([ 'form', 'step', 'form', 'layer'], function () {
    var step = layui.step;
}

3.2 渲染step 有几步下面写几个 关联上html的表单

step.render({
    elem: '#stepForm',
    filter: 'stepForm',
    width: '100%', //设置容器宽度
    stepWidth: '750px',
    height: '500px',
    stepItems: [{
    title: '填写基本信息'
    }, {
    title: '填写停车场支付信息'
    }, {
    title: '填写联系信息'
    }]
});

3.3 实现点击上一步、下一步

 //第一步
 $('.pre').click(function () {
 	step.pre('#stepForm');
 });
 //下一步
 $('.next').click(function () {
 	step.next('#stepForm');
 });

3.4 提交

提交的问题，我是定义的所有参数，通过点击下一步之后为定义的参数赋值，最后一步提交的时候，直接把定义参数传到后台

var params= {
    parkId: null,
    parkName: null,
	...
}
form.on('submit(formStep)', function (data) {
    step.next('#stepForm');
    params.parkId = data.field.parkId;
    return false;
});
form.on('submit(add)', function (data) {
    params.ownerManagerName = data.field.ownerManagerName;
    params.ownerManagerMobile = data.field.ownerManagerMobile;
    //进行提交代码，参数为params
    return false;
});

完整代码：

<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>停车场添加</title>
    <link rel="stylesheet" href="/layui/step-lay/step.css" type="text/css" media="all">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                <div carousel-item>
                    <div style="padding-left: 9%">
                        <form class="layui-form" style="margin: 0 auto;max-width: 100%;padding-top: 40px;">
                                <div class="layui-input-inline" style="width: 10%">
                                    <div class="layui-btn" id="mapAddress">地图选点</div>
                                </div>
                                <label class="layui-form-label">纬度:</label>
                            </div>
                            <div class="layui-form-item" style="padding-left: 38%">
                                <div class="layui-input-inline">
                                    <button class="layui-btn" lay-submit lay-filter="formStep">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div style="padding-left: 22%">
                        <form class="layui-form" style="margin: 0 auto;max-width: 100%;padding-top: 40px;">
                            <div class="layui-form-item" style="max-width: 100%;">
                                <label class="layui-form-label">开户行账号名称:</label>
                                <div class="layui-input-inline" style="width: 20%">
                                    <input type="text" name="bankAccountName"  class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item" style="padding-left: 16%">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                    <button class="layui-btn" lay-submit lay-filter="formStep2">下一步</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div style="padding-left: 22%">
                        <form class="layui-form" style="margin: 0 auto;max-width: 100%;padding-top: 40px;">
                            <div class="layui-form-item" style="max-width: 100%;">
                                <label class="layui-form-label">联系电话:</label>
                                <div class="layui-input-inline" style="width: 20%">
                                    <input type="text" name="ownerManagerMobile" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-form-item" style="padding-left: 15%;padding-top: 8%">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                    <button class="layui-btn" type="submit" lay-submit="" lay-filter="add">提交信息</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/layui/layui.all.js"></script>
<script src="/layui/step-lay/step.js"></script>
<script src="/js/core.util.js"></script>
<script>
    var $ = layui.$
    var step = layui.step
    var form = layui.form;
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    layui.config({
        base: '/'
    }).extend({
        step:'/layui/step-lay/step'
    }).use([ 'form', 'step', 'form', 'layer'], function () {
        var params= {
            parkId: null,
            parkName: null,
        }
        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '填写基本信息'
            }, {
                title: '填写停车场支付信息'
            }, {
                title: '填写联系信息'
            }]
        });
        form.on('submit(formStep)', function (data) {
            step.next('#stepForm');
            params.parkId = data.field.parkId;
            params.parkName = data.field.parkName;
            return false;
        });
        form.on('submit(formStep2)', function (data) {
            step.next('#stepForm');
            params.tranChannel = data.field.tranChannel;
            return false;
        });
        form.on('submit(add)', function (data) {
            params.operateName = data.field.operateName;
            CoreUtil.sendAjax("/parking/add", JSON.stringify(params), function (res) {
                if(res.code == 0){
                    layer.msg("添加成功");
                }else{
                    layer.msg("添加失败");
                }
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index);
            }, "POST", false);
            return false;
        });
        //第一步
        $('.pre').click(function () {
            step.pre('#stepForm');
        });
        //下一步
        $('.next').click(function () {
            step.next('#stepForm');
        });
    });
</script>
</body>
</html>
韩帅819921832
关注
  • 4
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
step步骤表单（分步表单测试测试测试）
02-03
step步骤表单（分步表单测试测试测试）
layui-步骤条step.rar
12-06
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
【前端】Layui的表格常用功能，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件
小5聊的博客
03-27 3325
最近在维护老系统，尽量使用过layui，但是时间久了，总会忘记一些方法的使用。 因此通过本篇文章大概记录常用的功能方法，比如，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件等
layui-steps:layui-steps 是一个 LayUI 实现的步骤条模板，可以切换步骤，跳转到指定步骤
04-30
layui-steps layui-steps 是一个 LayUI 实现的步骤条模板，可以切换步骤，跳转到指定步骤 使用方式：利用 layui extend，参考 config.js、demo.js 文件
layui步骤条插件模块化的开源组件
11-15
基于[Layui][1]模块化的开源组件 #### 快速使用 //定义数据，这里是为了模拟展示 let data0 = { //步骤细节 steps: [{"title" : "提交初审", "time" : "2018-07-22"}, {"title" : "初审完成", "time" : "2018-07-22"}, {"title" : "提交复审", "time" : "2018-07-22"}, {"title" : "复审完成", "time" : "2018-07-22"}, {"title" : "处理完成", "time" : "2018-07-22"}] //当前在第几步 ,current: 0 } layui.config({ base: 'layui/mods/extend/step/' }).use('step',function(){ var step
layui-步骤条step-源码-导入即用
10-16
基于layui框架的前端步骤通条组件，项目中直接导入，复制demo源码就能使用，开发方便，样式美观
Layui-滑块
weixin_54668937的博客
12-19 1576
文献种类：专题技术文献； 开发工具与关键技术： VS、JS 作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 12 月 18日 Layui-滑块 今天我们来将一下Layui插件里的滑块模块。 作为一个拖拽式的交互性组件，滑块往往能给产品带来更好的操作体验。 接下来我们先来看一下Layui插件里的滑块模块的基础使用， 首先老样子我们先把Layui的JS和CSS引入。 然后创建一个div用来充当放置滑块的容器，如图： 在script部分加载出Layui插件里的滑块模块， 然后对滑
LayUI⑹：分步表单
dawn0718的专栏
04-08 4185
　　在前端的开发中，页面多了让人纠结，也不好组织，在LayUI中有几种解决办法，分步表单就是比较不错的选择，缺点也明显，所有的页面集中在一个页面中，代码量也大。 　　在系统参数维护中，用户提出要一步步选择来维护，这样可以减少操作错误，我使用了LayUI的分步表单来完成。 　　用户的维护操作在一个页面中。 　　代码量有点大了，HTML部分将近180行，JavaScript代码将近500行，为了调试，我还是集中在一个HTML文件中。 　　开始网页界面部分设计得有点复杂，300行，结果因为一个<DI
layui step 步骤条（分步表单）的表单提交 配置
m0_69423937的博客
02-07 2141
从23.12.2-3号吧，从那时候就一直弄这个分步表单，差不多弄了两个月，出现了很多问题，这里面layui框架step组件好像是不存在自适应高度的，给大家一起避避坑（存在的主要问题还是1、摸鱼（嘿嘿，不能怪我，太无聊了）2、存在问题不知道找谁去问，不熟悉代码，喜欢套框架，拿来直接能用。跟最开始element-ui 一样。后续会深入了解代码）后期的话我想弄一个群，大家可以一起分享问题和解决问题（主要是我想厚脸皮问问题.🤭）。
layui组件步骤条step
for__future_的博客
06-10 1847
layui组件步骤条step
Layui 步骤条Step
weixin_43833100的博客
10-13 6842
效果图： step.js layui.define(['jquery'], function (exports) { var $ = layui.$ , step = { //设置全局项 set: function (options) { var that = this; that.config = $.extend({}, that.config, options);
layui-steps
11-15
layui-steps 是一个 LayUI 实现的步骤条模板，可以切换步骤，跳转到指定步骤
分步注册表单模板.rar
04-14
会员分步注册表单模板jQuery验证。 第一步：填写用户名，密码（密码强度验证），手机号（格式11位验证）输入错误红色字体提示； 第二步：手机验证码60秒时间验证; 第三步：姓名（中文验证）身份证号码（18位验证...
分步式注册表单
02-14
分步式注册表单
带验证的分步式注册表单
04-24
带验证的分步式注册表单，在项目中挺实用的，分享给大家！
form-step:Dcat Admin 分步表单扩展
05-09
Dcat Admin 分步表单扩展 安装 使用
手写的分步注册表单
11-30
自己手写的分步注册表单，HTML5单页面，操作起来很方面
CSS特性
lan_da_wang的博客
04-29 384
化简代码，定位问题，解决问题。
c3 笔记7 css基本语法
最新发布
weixin_63492023的博客
05-02 546
单位pt与px的差别pt是印刷使用的字号单位，不管屏幕分辨率是多少，打印到纸上看起来都是相同的，lot的长度是0.01384英寸，相当于1/72英寸，我们常用的Word软件设置的字号就是以pt为单位；而px是屏幕使用的字号单位，px能够精确地表示组件在屏幕中的位置与大小，不管屏幕分辨率怎么调整，网页版面都不会变化太大，但是打印到纸面上时，就可能有差异，然而网页的目的是为了屏幕浏览，因此CSS大多会选择以px为单位。letter-spacing用来设置字符与字符的间距，输入负值，字符间距就会变得紧密。
分步写
05-29
好的，下面是分步实现删除二维列表每个列表的第一个元素的代码： ```python # 示例二维列表 lst = [[1,2,3], [4,5,6], [7,8,9]] # 新建一个空列表用于存储删除后的列表 new_lst = [] # 遍历每个子列表 for sublst in lst: # 切片操作获取每个子列表的第二个元素到最后一个元素 new_sublst = sublst[1:] # 将新的子列表添加到新的列表中 new_lst.append(new_sublst) # 输出删除后的列表 print(new_lst) # [[2, 3], [5, 6], [8, 9]] ``` 在上面的代码中，我们首先新建一个空列表`new_lst`用于存储删除后的列表，然后遍历原始列表`lst`中的每个子列表。对于每个子列表，我们使用切片操作获取第二个元素到最后一个元素，即删除了第一个元素的新子列表，然后将新的子列表添加到`new_lst`中。最终输出删除后的`new_lst`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值