コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > ライユイのチュートリアル > Lauiuiを使用してフォームをポップアップする方法

Lauiuiを使用してフォームをポップアップする方法

尚
リリース： 2019-07-31 08:59:58
オリジナル
6062 人が閲覧しました

Lauiuiを使用してフォームをポップアップする方法

layui を使用してポップアップ フォームをクリックします:

個人情報をクリックして、フォームをポップアップします:

Lauiuiを使用してフォームをポップアップする方法

Lauiuiを使用してフォームをポップアップする方法

#1. 1 つ目は、ページのクリック ポップアップ イベントです。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

$(function () {        var studentId="";        if ('${zyTb.sudentId}' != null &&'${zyTb.sudentId}' != '') {

           studentId='${zyTb.sudentId}';

       }        if ('${univcollection.studentId}' != null &&'${univcollection.studentId}' != '') {

           studentId='${univcollection.studentId}';

       }        var studentName = '';

       studentName = '${gkzyUser.name}';

 

       $("#personaLinfoButton").click(function(){

           layer.open({

               type: 2,

                //title: '收藏管理 (考生姓名：张无忌)',

               title: '个人信息',

                shadeClose: true,          

                //弹出框之外的地方是否可以点击

               offset: '10%',               

               area: ['60%', '80%'],               

               content: '/gkzytb/franchiser/personaLinfo?gkzyUserId='+studentId               

               // content: '/gkzytb/franchiser/rigthColumnJsonList'

           });

       });

   });

ログイン後にコピー

2. ポップアップ ウィンドウがクリックされると、コントローラーはフォーム データのレンダリングを要求されます。同時に、形式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

@RequestMapping("personaLinfo")   

public String personaLinfo(Student student,Model model){

       Area area = new Area();

       area.setParent(new Area("0"));       

       List<Area> areaList1 = areaService.findList(area);

       area.setParent(areaList1.get(0));       

       List<Area> areaList2 = areaService.findList(area);

       area.setParent(areaList2.get(0));       

       List<Area> areaList3 = areaService.findList(area);       

        

       List<Student> studentList = studentService.findList(student);       

       if (studentList.size()>0) {

           model.addAttribute("student",studentList.get(0));

           model.addAttribute("gkzyUser",gkzyUserService.get(studentList.get(0).getGkzyUserId()));

       }

       model.addAttribute("areaList1",areaList1);

       model.addAttribute("areaList2",areaList2);

       model.addAttribute("areaList3",areaList3);

       model.addAttribute("table","1");        return "modules/gkzytb/personal/personaLinfo";

   }

ログイン後にコピー

を含む JSP ページにジャンプします。 3. コントローラーを介して、persistenceaLinfo の JSP ページにジャンプします。

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

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/views/include/taglib.jsp" %><!DOCTYPE html><html><head>

    <meta charset="UTF-8">

    <title>内蒙古高考志愿规划-鄂尔多斯市微联网络科技有限责任公司</title>

    <meta name="keywords" content="内蒙古高考志愿规划，原金钥匙高考志愿指导站，高考志愿填报，专业测评，生涯规划，高考提分，升学测评"/>

    <meta name="description" content="内蒙古最专业高考志愿填报规划平台，历时八年钻研，采用三年数据精准定位，面对面一对一指导，网站系统，手工excel系统，模拟演练系统免费开放" />

    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" /></head><body><div style="margin: 25px 60px 0 0;">

    <form class="layui-form" action="studentInfoF">

        <input type="hidden" name="id" value="${student.id}"/>

        <input type="hidden" name="gkzyUserId" value="${student.gkzyUserId}"/>

        <input type="hidden" name="franId" value="${student.franId}"/>

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

            <label class="layui-form-label">姓名</label>

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

                <input type="text" name="name" value="${student.name}" required  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="radio" name="sex" value="1" title="男" checked>

                <input type="radio" name="sex" value="0" title="女">

            </div>

        </div>

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

            <label class="layui-form-label">民族</label>

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

                <input type="radio" name="nation" value="汉族" title="汉族" checked>

                <input type="radio" name="nation" value="蒙族" title="蒙族">

            </div>

        </div>

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

            <label class="layui-form-label">邮箱</label>

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

                <input type="text" name="email" value="${gkzyUser.email}" required  lay-verify="email" 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="middleSchool.name" value="${student.middleSchool.name}" required  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-inline">

                <select class="w_30" name="provid" lay-filter="provid">

                    <c:forEach items="${areaList1}" var="area">

                        <option value="${area.id}">${area.name}</option>

                    </c:forEach>

                </select>

            </div>

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

                <select class="w_30" id="cityid" name="cityid" lay-filter="cityid">

                    <c:forEach items="${areaList2}" var="area">

                        <option value="${area.id}">${area.name}</option>

                    </c:forEach>

                </select>

            </div>

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

                <select class="w_30" id="area" name="area.id">

                    <c:forEach items="${areaList3}" var="area">

                        <option value="${area.id}">${area.name}</option>

                    </c:forEach>

                </select>

            </div>

        </div>

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

            <div class="layui-inline">

                <label class="layui-form-label">语文</label>

                <div class="layui-input-inline" style="width: 127px">

                    <input type="text" name="chineseScore" value="${student.chineseScore}" lay-verify="required|number" autocomplete="off" class="layui-input">

                </div>

            </div>

            <div class="layui-inline">

                <label class="layui-form-label" style="width: 50px">数学</label>

                <div class="layui-input-inline" style="width: 127px">

                    <input type="text" name="englishScore" value="${student.englishScore}" lay-verify="required|number" autocomplete="off" autocomplete="off" class="layui-input">

                </div>

            </div>

            <div class="layui-inline">

                <label class="layui-form-label" style="width: 50px">英语</label>

                <div class="layui-input-inline" style="width: 127px">

                    <input type="tel" name="url" value="${student.actualScore}" lay-verify="required|number" autocomplete="off" class="layui-input">

                </div>

            </div>

        </div>

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

            <div class="layui-inline">

                <label class="layui-form-label">综合</label>

                <div class="layui-input-inline" style="width: 127px">

                    <input type="text" name="colligateScore" value="${student.colligateScore}" lay-verify="required|number" autocomplete="off" class="layui-input">

                </div>

            </div>

            <div class="layui-inline">

                <label class="layui-form-label" style="width: 50px">总分</label>

                <div class="layui-input-inline" style="width: 127px">

                    <input type="text" name="actualScore" value="${student.actualScore}" lay-verify="required|number" autocomplete="off" class="layui-input">

                </div>

            </div>

            <div class="layui-inline">

                <label class="layui-form-label" style="width: 50px">投档</label>

                <div class="layui-input-inline" style="width: 127px">

                    <input type="tel" name="applyScore" value="${student.applyScore}" lay-verify="required|number" autocomplete="off" class="layui-input">

                </div>

            </div>

        </div>

        <div class="layui-form-item" style="text-align: center">

            <div class="layui-input-block" style="margin: initial">

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

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

            </div>

        </div>

    </form></div><script type="text/javascript" language="JavaScript" src="/static/layui/layui.js" ></script><script type="text/javascript" language="JavaScript" src="/static/gkzytb/js/jquery-1.12.4.min.js" ></script></body><script>

    layui.use(&#39;form&#39;, function(){        var form = layui.form;        var $form = $(&#39;form&#39;);        //监听提交

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

 

            $.post(&#39;studentInfoF&#39;,data.field,function (json) {

                layer.msg(&#39;修改成功!&#39;);

                setTimeout(function () {

                    parent.location.href=parent.location.href;

                },1000);

            })            return false;

        });

        form.on(&#39;select&#39;,function (data) {            if ($(data.elem).attr(&#39;name&#39;) == &#39;provid&#39;) {

                cityEvent(data.value,&#39;cityid&#39;);

            }else if($(data.elem).attr(&#39;name&#39;) == &#39;cityid&#39;){

                cityEvent(data.value,&#39;area&#39;);

            }

 

        });        function cityEvent(id, name) {

            $.post(&#39;findAreaJson&#39;,{id:id},function(json){                if (json.state == 0) {

                    $form.find(&#39;select[id=&#39;+name+&#39;]&#39;).html("");

                    $.each(json.data, function (kt, vt) {

                        appendOptionTo($form.find(&#39;select[id=&#39;+name+&#39;]&#39;), vt.name, vt.id);

                    });

                    form.render();                    if (name == &#39;cityid&#39;) {

                        cityEvent(json.data[0].id,&#39;area&#39;);

 

                    }

                }

            });

        }        function appendOptionTo($o, k, v) {            var $opt = $("<option>").text(k).val(v);

            $opt.appendTo($o);

        }

    });</script></html>

ログイン後にコピー

推奨: layui フレームワーク チュートリアル

以上がLauiuiを使用してフォームをポップアップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
layui 形状
前の記事：レイウイテーブルのヘッダーを修正する方法 次の記事：ライウイの使い方
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
先生は、layui の開発ドキュメントを持っていますか?
から 1970-01-01 08:00:00
0
0
0
tp5 は、layui を追加するときに問題が発生しました
から 1970-01-01 08:00:00
0
0
0
PHP+layui プロジェクトの実践的なチュートリアルを探しています
から 1970-01-01 08:00:00
0
0
0
カルーセルの後にジャンプすることはできません。
から 1970-01-01 08:00:00
0
0
0
フォームのデータが認識できません。何が問題なのかを調べるのを手伝ってもらえますか?
から 1970-01-01 08:00:00
0
0
0
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート