前端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 });