前端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 });
原文地址：https://www.cnblogs.com/wangquanyi/p/11330017.html
时间： 2024-11-11 04:40:22