layui的js写法，部分代码
Posted wangquanyi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了layui的js写法，部分代码相关的知识，希望对你有一定的参考价值。
前端html写法：
1 <!DOCTYPE html> 2 <html lang="en" xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>学生管理</title> 6 <!-- 引入前端框架 --> 7 <link th:href="@/css/index.css" rel="stylesheet" type="text/css"/> 8 <link rel="stylesheet" th:href="@/layui-v2.4.5/layui/css/layui.css" media="all"> 9 <script th:src="@/jquery/jquery.min.js"></script> 10 <script th:src="@/jquery/jquery.cookie.js"></script> 11 <script th:src="@/layui-v2.4.5/layui/layui.js"></script> 12 <script th:src="@/js/anruan/xingrenjiansuo.js"></script> 13 <!--<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>--> 14 </head> 15 <body class="layui-layout-body"> 16 <div class="layui-layout layui-layout-admin"> 17 <div class="layui-header"> 18 <div class="layui-logo">学生管理</div> 19 <!-- 头部区域（可配合layui已有的水平导航） --> 20 <ul class="layui-nav"> 21 <li class="layui-nav-item" id="primaryStudent"><a th:href="@/init/primaryStudent"><b>小学生</b></a></li> 22 <li class="layui-nav-item" id="midgleSchoolStudent"><a 23 th:href="@/init/midgleSchoolStudent"><b>中学生</b></a></li> 24 <li class="layui-nav-item" id="universityStudent"><a th:href="@/init/universityStudent"> 25 <b>大学生</b></a> 26 </li> 27 <li class="layui-nav-item" id="selfTaughtExamStudent"><a 28 th:href="@/init/selfTaughtExamStudent"><b>自考</b></a></li> 29 <li class="layui-nav-item" id="postgraduate"><a th:href="@/init/postgraduate"><b>研究生</b></a></li> 30 </ul> 31 </div> 32 <div class="anruan-condition-index"> 33 <div class="layui-side layui-bg-black"> 34 <div class="layui-side-scroll"> 35 <!-- 左侧导航区域（可配合layui已有的垂直导航） --> 36 <div class="layui-nav layui-nav-tree" lay-filter="test"> 37 <div class="layui-nav-item layui-nav-itemed left-menu"> 38 <form class="layui-form"> 39 <label class="layui-form-label">上学时间</label> 40 <div class="layui-input-inline"> 41 <input type="text" class="layui-input" id="datetime" 42 lay-verify="required"> 43 </div> 44 <div class="layui-form-item"> 45 <label class="layui-form-label">毕业时间</label> 46 <div class="layui-input-block"> 47 <select name="addrcode" id="addrcodeId"> 48 <option value="">全部</option> 49 </select> 50 </div> 51 </div> 52 <div class="layui-form-item"> 53 <label class="layui-form-label">性别</label> 54 <div class="layui-input-block"> 55 <select name="genderCode" id="genderCode"> 56 <option value="">全部</option> 57 <option value="男">男</option> 58 <option value="女">女</option> 59 </select> 60 </div> 61 </div> 62 <div class="layui-form-item"> 63 <label class="layui-form-label">年龄</label> 64 <div class="layui-input-block"> 65 <select name="age" id="age"> 66 <option value="">全部</option> 67 <option value="10-20">10-20</option> 68 <option value="20-30">20-30</option> 69 </select> 70 </div> 71 </div> 72 <div class="layui-form-item"> 73 <label class="layui-form-label">上衣</label> 74 <div class="layui-input-block"> 75 <select name="coatStyle" id="coatStyle"> 76 <option value="">全部</option> 77 <option value="长袖">长袖</option> 78 <option value="短袖">短袖</option> 79 </select> 80 </div> 81 </div> 82 <div class="layui-form-item"> 83 <label class="layui-form-label">上衣颜色</label> 84 <div class="layui-input-block"> 85 <select name="coatColor" id="coatColor"> 86 <option value="">全部</option> 87 <option value="黑色">黑色</option> 88 <option value="白色">白色</option> 89 <option value="灰色">灰色</option> 90 <option value="红色">红色</option> 91 <option value="黄色">黄色</option> 92 <option value="绿色">绿色</option> 93 <option value="蓝色">蓝色</option> 94 <option value="紫色">紫色</option> 95 <option value="棕色">棕色</option> 96 <option value="粉色">粉色</option> 97 </select> 98 </div> 99 </div> 100 <div class="layui-form-item"> 101 <label class="layui-form-label">裤子</label> 102 <div class="layui-input-block"> 103 <select name="trousersStyle" id="trousersStyle"> 104 <option value="">全部</option> 105 <option value="长裤">长裤</option> 106 <option value="短裤">短裤</option> 107 <option value="长裙">长裙</option> 108 <option value="短裙">短裙</option> 109 </select> 110 </div> 111 </div> 112 <div class="layui-form-item"> 113 <label class="layui-form-label">裤子颜色</label> 114 <div class="layui-input-block"> 115 <select name="trousersColor" id="trousersColor"> 116 <option value="">全部</option> 117 <option value="黑色">黑色</option> 118 <option value="白色">白色</option> 119 <option value="灰色">灰色</option> 120 <option value="红色">红色</option> 121 <option value="黄色">黄色</option> 122 <option value="绿色">绿色</option> 123 <option value="蓝色">蓝色</option> 124 <option value="紫色">紫色</option> 125 <option value="棕色">棕色</option> 126 <option value="粉色">粉色</option> 127 </select> 128 </div> 129 </div> 130 <div class="layui-form-item"> 131 <label class="layui-form-label">鞋子颜色</label> 132 <div class="layui-input-block"> 133 <select name="shoesColor" id="shoesColor"> 134 <option value="">全部</option> 135 <option value="黑色">黑色</option> 136 <option value="白色">白色</option> 137 <option value="灰色">灰色</option> 138 <option value="红色">红色</option> 139 <option value="黄色">黄色</option> 140 <option value="绿色">绿色</option> 141 <option value="蓝色">蓝色</option> 142 <option value="紫色">紫色</option> 143 <option value="棕色">棕色</option> 144 <option value="粉色">粉色</option> 145 </select> 146 </div> 147 </div> 148 <div class="layui-form-item"> 149 <div class="layui-input-block"> 150 <button class="layui-btn" lay-submit lay-filter="formDemo" onclick="return false"> 151 立即提交 152 </button> 153 <button type="reset" class="layui-btn layui-btn-primary">重置</button> 154 </div> 155 </div> 156 </form> 157 </div> 158 </div> 159 </div> 160 </div> 161 162 <div class="layui-body"> 163 <!-- 内容主体区域 --> 164 <div style="padding: 15px;" class="dataShow">检索结果：</div> 165 <div class="layui-form" action=""> 166 <div class="form_body_div"> 167 <ul class="test" id="form_body_div_ul"></ul> 168 <button type="button" class="layui-btn body-data-btn">保存</button> 169 <button type="reset" class="layui-btn body-data-btn1 layui-btn-primary">重选</button> 170 </div> 171 </div> 172 </div> 173 </div> 174 </div> 175 </body> 176 </html>
前端js写法：
1 layui.use(‘form‘, function () 2 var form = layui.form; 3 //监听提交 4 form.on(‘submit(formDemo)‘, function (data) 5 var datas = JSON.stringify(data.field); 6 var datas1; 7 datas1 = datas; 8 var reg = RegExp(/file/) 9 if (reg == false) 10 var d = datas.substring(datas.indexOf(",") + 1); 11 datas1 = "" + d; 12 13 console.log(datas1); 14 $.ajax( 15 type: "POST", 16 url: "/init/demo01", 17 dataType: "json", 18 contentType: "application/json", 19 data: datas1, 20 success: function (data)
//得到的数据遍历 21 var personList = data.conditionSearch.personList; 22 var html = ""; 23 var bigImgData = ""; 24 for (var j = 0; j < personList.length; j++) 25 var depid = personList[j].source.depId; 26 var age= personList[j].source.age; 27 var coatStyle = personList[j].source.coatStyle; 28 var genderCode = personList[j].source.genderCode; 29 var coatColor = personList[j].source.coatColor; 30 var trousersColor = personList[j].source.trousersColor; 31 var shoesColor = personList[j].source.shoesColor; 32 var trousersStyle = personList[j].source.trousersStyle; 33 var picPath = personList[j].source.picPath; 34 var camAddrCode = personList[j].source.camAddrCode; 35 var camTime = personList[j].source.camTime; 36 37 /*转换时间格式*/ 38 function timeTrans(camTime) 39 var date = new Date(camTime); 40 var Y = date.getFullYear() + "-"; 41 var M = (date.getMonth() + 1 < 10 ? ‘0‘ + (date.getMonth() + 1) : date.getMonth() + 1) + "-"; 42 var D = (date.getDate() < 10 ? ‘0‘ + (date.getDate()) : date.getDate()) + " "; 43 var h = (date.getHours() < 10 ? ‘0‘ + date.getHours() : date.getHours() + ‘:‘); 44 var m = (date.getMinutes() < 10 ? ‘0‘ + date.getMinutes() : date.getMinutes()) + ":"; 45 var s = (date.getSeconds() < 10 ? ‘0‘ + date.getSeconds() : date.getSeconds()); 46 return Y + M + D + h + m + s; 47 48 //截取字符串 49 var bigImgPath = picPath.split(‘_‘)[0]; 50 var time = timeTrans(camTime); 51 var camAddr = personList[j].source.base.camAddr;
//拼接到html 52 html += `<li> 53 <input type="checkbox" class="checkbox-li" name="checkboxName" lay-skin="primary"> 54 <div class="testDiv1"> 55 <p> 56 <img src="http=//192.169.1.202:8000/192.168.1.210:80/upload/$picPath" class="form_body_div_li_div_p_img" genderCode=‘$genderCode‘ coatStyle=‘$coatStyle‘ coatColor=‘$coatColor‘ trousersStyle=‘$trousersStyle‘ trousersColor=‘$trousersColor‘ shoesColor=‘$shoesColor‘ isRider=‘$isRider‘ time=‘$time‘camTime=‘$camTime‘ camAddr=‘$camAddr‘ camAddrCode=‘$camAddrCode‘ depid=‘$depid‘ bigImgPath=‘$bigImgPath‘ picPath=‘$picPath‘> 57 </p> 58 </div> 59 <div class="testDiv2"> 60 <p title="$time">时间：$time</p> 61 <p title="$camAddr">地址：$camAddr</p> 62 </div> 63 </li>`; 64 65 $("#form_body_div_ul").html(html); 66 form.render(); 67 /*点击图片显示大图弹框*/ 68 $(".form_body_div_li_div_p_img").on(‘click‘, function ()
//得到之前的参数 69 var bigImgPath = $(this).attr("bigImgPath"); 70 var genderCode = $(this).attr("genderCode"); 71 var coatStyle = $(this).attr("coatStyle"); 72 var coatColor = $(this).attr("coatColor"); 73 var trousersStyle = $(this).attr("trousersStyle"); 74 var trousersColor = $(this).attr("trousersColor"); 75 var shoesColor = $(this).attr("shoesColor"); 76 var age= $(this).attr("age"); 77 var time = $(this).attr("time"); 78 var camAddr = $(this).attr("camAddr"); 79 var camAddrCode = $(this).attr("camAddrCode"); 80 var depid = $(this).attr("depid");
//调用layui的弹窗 81 layer.open( 82 type: 1, 83 skin: ‘layui-layer-rim‘, 84 area: [‘1000px‘, ‘600px‘], 85 content: `<div class="alert_bigImgData"> 86 <img src="$bigImgPath"> 87 <ul class="alert_bigImgData_text"> 88 <li> 89 <p style= "line-height: 20px;" >详细信息：<br/> 90 性别：$genderCode<br/> 91 上衣款式：$coatStyle<br/> 92 上衣颜色：$coatColor<br/> 93 裤子款式：$trousersStyle<br/> 94 裤子颜色：$trousersColor<br/> 95 鞋子颜色：$shoesColor<br/> 96 年龄：$age<br/> 97 拍摄时间：$time<br/> 98 拍摄地址：$camAddr<br/> 99 地址编号：$camAddrCode<br/> 100 部门ID：$depid<br/> 101 </p> 102 </li> 103 </ul> 104 </div>` 105 ); 106 ); 107 var alertForm = ‘‘;
//复选框选中的内容，保存的点击事件 108 $(".body-data-btn").on("click", function () 109 var _this = $("input:checked"); 110 var array = []; 111 for (var i = 0; i < _this.length; i++) 112 var dataList = _this.eq(i).parent().find(‘.form_body_div_li_div_p_img‘);//得到弹出框内的值 113 var datajson = 114 "bigImgPath": dataList.attr("bigImgPath"), 115 "picPath": dataList.attr("picPath"), 116 "genderCode": dataList.attr("genderCode"), 117 "coatStyle": dataList.attr("coatStyle"), 118 "coatColor": dataList.attr("coatColor"), 119 "trousersStyle": dataList.attr("trousersStyle"), 120 "trousersColor": dataList.attr("trousersColor"), 121 "shoesColor": dataList.attr("shoesColor"), 122 "isRider": dataList.attr("age"), 123 "time": dataList.attr("camTime"), 124 "camAddr": dataList.attr("camAddr"), 125 "camAddrCode": dataList.attr("camAddrCode"), 126 "depid": dataList.attr("depid"), 127 128 array.push(datajson); 129 130 debugger
//提交到后台存入数据库 131 $.ajax( 132 type: "POST", 133 url: "/init/SaveToDatabase", 134 dataType: "json", 135 async: false, 136 data: decodeURIComponent(JSON.stringify(array)), 137 success: function (result) 138 var statusCode = result.StatusCode; 139 console.log(statusCode); 140 if (statusCode == 200) 141 layer.msg("成功：请求已经成功..."); 142 else if (statusCode == 500) 143 layer.msg("失败：请求失败，请重试...") 144 145 146 ); 147 ); 148 149 150 ); 151 );
以上是关于layui的js写法，部分代码的主要内容，如果未能解决你的问题，请参考以下文章
spring-boot-jap-layui-mysql 完整的jpa多对一