先看界面
点击编辑之后
具体代码请往下看
一、jsp界面
?1 <%@ page language="java" contentType="text/html; charset=UTF-8" ?2 ????pageEncoding="UTF-8"%> ?3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ?4 <html> ?5 <head> ?6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ?7 <title>Insert title here</title> ?8 </head> ?9 <link 10 ????href="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/css/bootstrap.css" 11 ????rel="stylesheet"></link> 12 <link 13 ????href="${pageContext.request.contextPath }/bootstrap-fileinput/css/fileinput.css" 14 ????media="all" rel="stylesheet" type="text/css" /> 15 <link 16 ????href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" 17 ????media="all" rel="stylesheet" type="text/css" /> 18 <link 19 ????href="${pageContext.request.contextPath }/bootstrap-fileinput/themes/explorer-fa/theme.css" 20 ????media="all" rel="stylesheet" type="text/css" /> 21 <link 22 ????href="${pageContext.request.contextPath }/bootstrap-table-develop/docs/dist/bootstrap-table.css" 23 ????rel="stylesheet"></link> 24 <script 25 ????src="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/jquery.js"></script> 26 <script 27 ????src="${pageContext.request.contextPath }/bootstrap-fileinput/js/plugins/sortable.js" 28 ????type="text/javascript"></script> 29 <script 30 ????src="${pageContext.request.contextPath }/bootstrap-fileinput/js/fileinput.js" 31 ????type="text/javascript"></script> 32 <script 33 ????src="${pageContext.request.contextPath }/bootstrap-fileinput/js/locales/fr.js" 34 ????type="text/javascript"></script> 35 <script 36 ????src="${pageContext.request.contextPath }/bootstrap-fileinput/js/locales/es.js" 37 ????type="text/javascript"></script> 38 <script 39 ????src="${pageContext.request.contextPath }/bootstrap-fileinput/themes/explorer-fa/theme.js" 40 ????type="text/javascript"></script> 41 <script 42 ????src="${pageContext.request.contextPath }/bootstrap-fileinput/themes/fa/theme.js" 43 ????type="text/javascript"></script> 44 <script 45 ????src="${pageContext.request.contextPath }/bootstrap-fileinput/js/locales/zh.js"></script> 46 <script 47 ????src="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/bootstrap.js"></script> 48 <script 49 ????src="${pageContext.request.contextPath }/bootstrap-table-develop/docs/dist/bootstrap-table.js"></script> 50 <script 51 ????src="${pageContext.request.contextPath }/bootstrap-table-develop/docs/dist/js/bootstrap-table-locale-all.js"></script> 52 <script 53 ????src="${pageContext.request.contextPath }/bootstrap-table-develop/src/locale/bootstrap-table-zh-CN.js"></script> 54 <body> 55 ????<table id="result" class="table table-hover" 56 ????????style="text-align: center;"> 57 ????????<thead style="text-align: center;"> 58 ????????????<th data-field="stuid">学生编号</th> 59 ????????????<th data-field="stuname">学生姓名</th> 60 ????????????<th data-field="classes.classname">班级名称</th> 61 ????????????<th data-field="userimage" data-formatter="image">头像</th> 62 ????????????<th data-field="state" data-formatter="state">状态</th> 63 ????????????<th data-field="caozuo" data-formatter="toolbar">操作</th> 64 ????????</thead> 65 ????</table> 66 ????<form action="#" id="formid" onsubmit="return false" 67 ????????enctype="multipart/form-data"> 68 ????????<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 69 ????????????aria-labelledby="myModalLabel" aria-hidden="true"> 70 ????????????<div class="modal-dialog"> 71 ????????????????<div class="modal-content"> 72 ????????????????????<div class="modal-header"> 73 ????????????????????????<button type="button" class="close" data-dismiss="modal" 74 ????????????????????????????aria-hidden="true">×</button> 75 ????????????????????????<h4 class="modal-title" id="myModalLabel">学生信息修改</h4> 76 ????????????????????</div> 77 ????????????????????<div class="modal-body"> 78 ????????????????????????学生编号：<input type="text" name="stuid" class="form-control" value="" 79 ????????????????????????????readonly="readonly" /><br> 学生姓名：<input type="text" 80 ????????????????????????????name="stuname" class="form-control" id="stuname" value=""><br> 81 ????????????????????????所在班级：<select id="class" name="classesid" class="form-control"> 82 ????????????????????????</select> 当前头像： 83 ????????????????????????<div> 84 ????????????????????????????<img alt="" style="width: 40px; height: 40px" id="img"> 85 ????????????????????????</div> 86 ????????????????????????用户头像： 87 ????????????????????????<div class="file-loading"> 88 ????????????????????????????<input id="file-fr" name="file" type="file" multiple> 89 ????????????????????????</div> 90 ?91 ????????????????????????<input type="hidden" id="userimage" name="userimage" value="" /> 92 ????????????????????</div> 93 ????????????????????<div class="modal-footer"> 94 ????????????????????????<button type="button" onclick="update()" class="btn btn-primary" 95 ????????????????????????????data-dismiss="modal">提交更改</button> 96 ????????????????????????<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 97 ????????????????????</div> 98 ????????????????</div> 99 ????????????????<!-- /.modal-content -->100 ????????????</div>101 ????????????<!-- /.modal -->102 ????????</div>103 ????</form>104 </body>105 <script>106 ????$(‘#file-fr‘).fileinput({107 ????????theme : ‘fa‘,108 ????????language : ‘zh‘,109 ????????uploadAsync : true,//异步上传110 ????????uploadUrl : ‘upload.do‘,111 ????????allowedFileExtensions : [ ‘jpg‘, ‘png‘, ‘gif‘, ‘mp4‘ ],112 ????????maxFileSize : 0,113 ????????maxFileCount : 1114 ????}).on("fileuploaded", function(event, data) { //异步上传成功结果处理115 ????????$("#userimage").val(data.response.src);116 ????})117 </script>118 <script type="text/javascript">119 ????$(function() {120 ????????$("#result").bootstrapTable({121 ????????????url : "selectAll.do",122 ????????????method : "post",123 ????????????cache : false,124 ????????????dataType : "json",125 ????????????contentType : "application/x-www-form-urlencoded",//post的方式提交的话需要写126 ????????????toolbar : "#toolbar",127 ????????????toolbarAlign : "left",128 ????????????striped : true,129 ????????????pagination : true,130 ????????????sidePagination : "server",131 ????????????pageNumber : 1,132 ????????????pageSize : 5,133 ????????????pageList : [ 5, 10, 15 ],134 ????????????locale : "zh-CN",135 ????????????queryParamsType : "limit",136 ????????????queryParams : queryParams137 ????????});138 ????});139 140 ????function queryParams(params) {141 ????????var params = {142 ????????????pageSize : params.limit,143 ????????????pageCode : params.offset / params.limit + 1144 ????????};145 ????????return params;146 ????};147 ????function state(value, row, index) {148 ????????if (row[‘state‘] === 0) {149 ????????????return "正常";150 ????????}151 ????????if (row[‘state‘] === 1) {152 ????????????return "锁定";153 ????????}154 ????????return value;155 ????}156 ????function image(value, row, index) {157 ????????return "<img src=‘"+row[‘userimage‘]+"‘ style=‘width:30px;height:30px;‘/>";158 ????}159 ????/*操作按钮*/160 ????function toolbar(value, row, index) {161 ????????var element = "<button type=‘button‘ onclick=‘edit(" + row.stuid162 ????????????????+ ")‘ class=‘btn btn-info‘>编辑</button>"163 ????????????????+ "<button type=‘button‘ onclick=‘del(" + row.stuid164 ????????????????+ ")‘ class=‘btn btn-danger‘>删除</button>";165 ????????return element;166 ????}167 ????/*编辑按钮，弹出模态框*/168 ????function edit(stuid) {169 ????????$("#class option").remove();170 ????????$("#formid")[0].reset();171 ????????$.ajax({172 ????????????url : "editBystuid.do?stuid=" + stuid,173 ????????????type : "post",174 ????????????dataType : "json",175 ????????????success : function(data) {176 ????????????????$(‘#myModal‘).modal(‘show‘);177 ????????????????$("[name=stuid]").val(data[0].stuid);178 ????????????????$("#stuname").val(data[0].stuname);179 ????????????????$("#userimage").val(data[0].userimage);180 ????????????????$("#img").attr(‘src‘, data[0].userimage);181 ????????????????$("#class").append(182 ????????????????????????"<option value=‘"+data[0].calssesid+"‘>"183 ????????????????????????????????+ data[0].classes.classname + "</option>");184 ????????????}185 ????????});186 ????????$.ajax({187 ????????????url : "selectAllClass.do",188 ????????????type : "post",189 ????????????dataType : "json",190 ????????????success : function(data) {191 ????????????????var obj = $("#class");192 ????????????????for (var i = 0; i < data.length; i++) {193 ????????????????????var op = "<option value=‘"+data[i].classesid+"‘>"194 ????????????????????????????+ data[i].classname + "</option>";195 ????????????????????obj.append(op);196 ????????????????}197 ????????????}198 ????????})199 ????};200 ????/*修改操作*/201 ????function update() {202 ????????$.ajax({203 ????????????url : "updateBystuid.do",204 ????????????type : "get",205 ????????????dataType : "text",206 ????????????data : $("#formid").serialize(),207 ????????????success : function(data) {208 ????????????????if (data == "ok") {209 ????????????????????$("#result").bootstrapTable("refresh", {210 ????????????????????????url : "selectAll.do"211 ????????????????????});212 ????????????????} else if (data == "error") {213 ????????????????????alert("修改失败！");214 ????????????????}215 ????????????}216 ????????});217 218 ????}219 ????/*删除操作*/220 ????function del(stuid) {221 ????????if (confirm(‘确定要删除吗？‘) == true) {222 ????????????$.ajax({223 ????????????????url : "delBystuid.do?stuid=" + stuid,224 ????????????????type : "post",225 ????????????????dataType : "text",226 ????????????????success : function(data) {227 ????????????????????if (data == "ok") {228 ????????????????????????$("#result").bootstrapTable("refresh", {229 ????????????????????????????url : "selectAll.do"230 ????????????????????????});231 ????????????????????} else if (data == "error") {232 ????????????????????????alert("删除失败");233 ????????????????????}234 ????????????????}235 ????????????})236 ????????????return false;237 ????????}238 ????}239 </script>240 </html>二、Controller层代码
?1 package com.llh.controller; ?2 ??3 import java.io.File; ?4 import java.io.IOException; ?5 import java.util.Date; ?6 import java.util.List; ?7 import java.util.Random; ?8 ??9 import javax.annotation.Resource; 10 import javax.servlet.http.HttpServletRequest; 11 import javax.servlet.http.HttpSession; 12 ?13 import org.springframework.context.annotation.Scope; 14 import org.springframework.stereotype.Controller; 15 import org.springframework.web.bind.annotation.ModelAttribute; 16 import org.springframework.web.bind.annotation.RequestMapping; 17 import org.springframework.web.bind.annotation.ResponseBody; 18 import org.springframework.web.multipart.MultipartFile; 19 ?20 import com.github.pagehelper.PageHelper; 21 import com.github.pagehelper.PageInfo; 22 import com.llh.entity.Student; 23 import com.llh.service.StudentService; 24 ?25 import net.sf.json.JSONArray; 26 ?27 @Controller 28 @Scope("prototype") 29 public class StudentController { 30 ?31 ????@Resource 32 ????private StudentService studentService; 33 ?34 ????/** 35 ?????* 分页查询所有 36 ?????* ?37 ?????* @param pageCode 38 ?????* @param pageSize 39 ?????* @return 40 ?????*/ 41 ????@RequestMapping(value = "selectAll", produces = "text/html;charset=utf-8") 42 ????public @ResponseBody String selectAll(int pageCode, int pageSize) { 43 ????????PageHelper.startPage(pageCode, pageSize); 44 ????????List<Student> slist = studentService.selectAll(); 45 ????????PageInfo<Student> spi = new PageInfo<Student>(slist); 46 ????????int count = (int) spi.getTotal(); 47 ????????JSONArray json = JSONArray.fromObject(slist); 48 ????????String str = "{\"total\":" + count + ",\"rows\":" + json.toString() + "}"; 49 ????????return str; 50 ????} 51 ?52 ????/** 53 ?????* 上传 54 ?????* ?55 ?????* @param request 56 ?????* @param file 57 ?????* @return 58 ?????* @throws IllegalStateException 59 ?????* @throws IOException 60 ?????*/ 61 ????@RequestMapping(value = "upload") 62 ????public @ResponseBody String upload(HttpServletRequest request, MultipartFile file) 63 ????????????throws IllegalStateException, IOException { 64 ????????String name = file.getOriginalFilename(); 65 ????????String path = request.getServletContext().getRealPath("/upload/");// 上传保存的路径 66 ????????String fileName = changeName(name); 67 ????????String rappendix = "upload/" + fileName; 68 ????????fileName = path + "\\" + fileName; 69 ????????File file1 = new File(fileName); 70 ????????file.transferTo(file1); 71 ????????String str = "{\"src\":\"" + rappendix + "\"}"; 72 ????????return str; 73 ????} 74 ?75 ????public static String changeName(String oldName) { 76 ????????Random r = new Random(); 77 ????????Date d = new Date(); 78 ????????String newName = oldName.substring(oldName.indexOf(‘.‘)); 79 ????????newName = r.nextInt(99999999) + d.getTime() + newName; 80 ????????return newName; 81 ????} 82 ?83 ????/** 84 ?????* 编辑 85 ?????* ?86 ?????* @param stuid 87 ?????* @param session 88 ?????* @return 89 ?????*/ 90 ????@RequestMapping(value = "editBystuid", produces = "text/html;charset=utf-8") 91 ????public @ResponseBody String editBystuid(Integer stuid) { 92 ????????System.out.println("编辑"); 93 ????????Student s = studentService.selectByPrimaryKey(stuid); 94 ????????JSONArray json = JSONArray.fromObject(s); 95 ????????String js = json.toString(); 96 ????????System.out.println(js); 97 ????????return js; 98 ????} 99 100 ????/**101 ?????* 修改102 ?????* 103 ?????* @param stuid104 ?????* @param stuname105 ?????* @return106 ?????*/107 ????@RequestMapping(value = "updateBystuid", produces = "text/html;charset=utf-8")108 ????public @ResponseBody String updateBystuid(@ModelAttribute Student s) {109 ????????System.out.println("修改中");110 ????????System.out.println(s.getStuname() + s.getStuid()+s.getUserimage());111 ????????int a = studentService.updateByPrimaryKey(s);112 ????????if (a != 0) {113 ????????????return "ok";114 ????????}115 ????????return "error";116 ????}117 118 ????/**119 ?????* 删除120 ?????* 121 ?????* @param stuid122 ?????* @return123 ?????*/124 ????@RequestMapping(value = "delBystuid", produces = "text/html;charset=utf-8")125 ????public @ResponseBody String delBystuid(Integer stuid) {126 ????????int a = studentService.deleteByPrimaryKey(stuid);127 ????????if (a != 0) {128 ????????????return "ok";129 ????????}130 ????????return "error";131 ????}132 133 }三、dao层和service层实体类就掠过了
这里使用到的有自动生成实体类，Maven的分页
具体操作请看首页
SSM+BootStrap增删改查，以及头像上传
原文地址：https://www.cnblogs.com/javallh/p/8289032.html