> 웹 프론트엔드 > 레이이 튜토리얼 > 레이어 팝업 및 Layui 폼을 사용하여 새로운 기능을 추가하는 방법

레이어 팝업 및 Layui 폼을 사용하여 새로운 기능을 추가하는 방법

풀어 주다: 2020-01-10 17:12:59
앞으로
5045명이 탐색했습니다.

레이어 팝업 및 Layui 폼을 사용하여 새로운 기능을 추가하는 방법

1. 레이어를 사용하여 팝업 창에서 추가를 완료한 후 페이지(상위 페이지, 목록 페이지)를 프롬프트하고 새로 고칩니다.

페이지 렌더링 구현

레이어 팝업 및 Layui 폼을 사용하여 새로운 기능을 추가하는 방법 페이지 코드:

양식에서 빌드

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<div id="add-main"   style="max-width:90%">

              <form class="layui-form" id="add-form"  action="">

                  <div class="layui-form-item center" >

                    <label class="layui-form-label" style="width: 100px" >配置名称</label>

                    <div class="layui-input-block">

                      <input type="text" name="name" required value="" style="width: 240px"  lay-verify="required" placeholder="请输入配置名称" autocomplete="off" class="layui-input">

                    </div>

                  </div>

                  <div class="layui-form-item">

                    <label class="layui-form-label" style="width: 100px">配置类型</label>

                    <div class="layui-input-block">

                      <input type="text" name="type" required  style="width: 240px" lay-verify="required" placeholder="请输入配置类型" autocomplete="off" class="layui-input">

                    </div>

                  </div>

                  <div class="layui-form-item">

                    <label class="layui-form-label" style="width: 100px">配置值&emsp;</label>

                    <div class="layui-input-block">

                      <input type="text" name="value" required  style="width: 240px" lay-verify="required" placeholder="请输入配置值" autocomplete="off" class="layui-input">

                      <!-- <input type="hidden" name="id" style="width: 240px" autocomplete="off" class="layui-input"> -->

                    </div>

                  </div>

                  <div class="layui-form-item">

                    <div class="layui-input-block">

                      <button class="layui-btn" lay-submit lay-filter="save" >立即提交</button>

                      <button type="reset" class="layui-btn layui-btn-primary" id="closeBtn" >重置</button>

                    </div>

                  </div>

              </form>   

        </div>

로그인 후 복사

레이어 팝업 창 만들기

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

function onAddBtn(){

         //页面层-自定义

        layer.open({

                type: 1,

                title:"新建配置",

                closeBtn: false,

                shift: 2,

                area: [&#39;400px&#39;, &#39;300px&#39;],

                shadeClose: true,

               // btn: [&#39;新增&#39;, &#39;取消&#39;],

               // btnAlign: &#39;c&#39;,

                content: $("#add-main"),

                success: function(layero, index){},

                yes:function(){

                     

                }

            });

   }

로그인 후 복사

핵심 제출 방법

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

<script type="text/javascript">

  

  layui.use([&#39;layer&#39;, &#39;form&#39;], function () {

   var layer = layui.layer,

   $ = layui.jquery,

   form = layui.form;

 

   //表单验证

   form.verify({

       firstpwd: [/(.+){6,12}$/, &#39;密码必须6到12位&#39;],

       secondpwd: function(value) {

                     if(value != $("#firstpwd").val()){

                            $("#secondpwd").val("");

                     return &#39;确认密码与密码不一致&#39;;

                    }

        },

        productCodes: function(value){

                      if(value == &#39;&#39;){

                     return "请选择系统分配";

                    }

        },

        sysqx: function(value){

                    if(value == &#39;&#39;){

                    return "请选择权限";

                    }

           

    });

 

 

 //提交监听事件

  form.on(&#39;submit(save)&#39;, function (data) {

        params = data.field;

        //alert(JSON.stringify(params))

        submit($,params);

        return false;

    })

     

      var obj = document.getElementById(&#39;closeBtn&#39;);

      obj.addEventListener(&#39;click&#39;, function cancel(){

                  CloseWin();

        });

})

 

//提交

function submit($,params){

          $.post(&#39;${ctx}/golbal/add1&#39;, params, function (res) {

                if (res.status==1) {

                    layer.msg(res.message,{icon:1},function(index){

                        CloseWin();

                    })

                }else if(res.status==2){

                    layer.msg(res.message,{icon:0},function(){

                        parent.location.href=&#39;${ctx}/golbal/main&#39;;

                        CloseWin();

                       })

                }else{

                    layer.msg(res.message,{icon:0},function(){

                        location.reload(); // 页面刷新

                             return false

                    })

                }

            }, &#39;json&#39;);

       }

debugger;

 //关闭页面

 function CloseWin(){

     parent.location.reload(); // 父页面刷新

     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

     parent.layer.close(index); //再执行关闭

 

    

</script>

로그인 후 복사

백엔드 코드

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

/**

     * 新增配置

     * @return

     */

    @RequestMapping("/add1")

    @ResponseBody

    public ResultEntity addItem(ZkGolbal golbal) {

        ResultEntity res = new ResultEntity();

        try {

            golbal.setStatus("1");

            res.setData(golbalService.addItem(golbal));

            res.setSuccess("success");

            res.setMessage("新增成功");

        } catch (Exception e) {

            res.setMessage("操作失败");

            e.printStackTrace();

        }

        return res;   

    }

로그인 후 복사

layui에 대한 더 많은 지식은 PHP 중국어 웹사이트

layui 사용법 튜토리얼

column을 참고하세요. .

위 내용은 레이어 팝업 및 Layui 폼을 사용하여 새로운 기능을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:cnblogs.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿