<%@ page language=
"java"
contentType=
"text/html; charset=UTF-8"
pageEncoding=
"UTF-8"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
>
<title>Insert title here</title>
</head>
<link
href=
"${pageContext.request.contextPath }/bootstrap-3.3.7-dist/css/bootstrap.css"
rel=
"stylesheet"
></link>
<link
href=
"${pageContext.request.contextPath }/bootstrap-fileinput/css/fileinput.css"
media=
"all"
rel=
"stylesheet"
type=
"text/css"
/>
<link
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
media=
"all"
rel=
"stylesheet"
type=
"text/css"
/>
<link
href=
"${pageContext.request.contextPath }/bootstrap-fileinput/themes/explorer-fa/theme.css"
media=
"all"
rel=
"stylesheet"
type=
"text/css"
/>
<link
href=
"${pageContext.request.contextPath }/bootstrap-table-develop/docs/dist/bootstrap-table.css"
rel=
"stylesheet"
></link>
<script
src=
"${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/jquery.js"
></script>
<script
src=
"${pageContext.request.contextPath }/bootstrap-fileinput/js/plugins/sortable.js"
type=
"text/javascript"
></script>
<script
src=
"${pageContext.request.contextPath }/bootstrap-fileinput/js/fileinput.js"
type=
"text/javascript"
></script>
<script
src=
"${pageContext.request.contextPath }/bootstrap-fileinput/js/locales/fr.js"
type=
"text/javascript"
></script>
<script
src=
"${pageContext.request.contextPath }/bootstrap-fileinput/js/locales/es.js"
type=
"text/javascript"
></script>
<script
src=
"${pageContext.request.contextPath }/bootstrap-fileinput/themes/explorer-fa/theme.js"
type=
"text/javascript"
></script>
<script
src=
"${pageContext.request.contextPath }/bootstrap-fileinput/themes/fa/theme.js"
type=
"text/javascript"
></script>
<script
src=
"${pageContext.request.contextPath }/bootstrap-fileinput/js/locales/zh.js"
></script>
<script
src=
"${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/bootstrap.js"
></script>
<script
src=
"${pageContext.request.contextPath }/bootstrap-table-develop/docs/dist/bootstrap-table.js"
></script>
<script
src=
"${pageContext.request.contextPath }/bootstrap-table-develop/docs/dist/js/bootstrap-table-locale-all.js"
></script>
<script
src=
"${pageContext.request.contextPath }/bootstrap-table-develop/src/locale/bootstrap-table-zh-CN.js"
></script>
<body>
<table id=
"result"
class=
"table table-hover"
style=
"text-align: center;"
>
<thead style=
"text-align: center;"
>
<th data-field=
"stuid"
>学生编号</th>
<th data-field=
"stuname"
>学生姓名</th>
<th data-field=
"classes.classname"
>班级名称</th>
<th data-field=
"userimage"
data-formatter=
"image"
>头像</th>
<th data-field=
"state"
data-formatter=
"state"
>状态</th>
<th data-field=
"caozuo"
data-formatter=
"toolbar"
>操作</th>
</thead>
</table>
<form action=
"#"
id=
"formid"
onsubmit=
"return false"
enctype=
"multipart/form-data"
>
<div class=
"modal fade"
id=
"myModal"
tabindex=
"-1"
role=
"dialog"
aria-labelledby=
"myModalLabel"
aria-hidden=
"true"
>
<div class=
"modal-dialog"
>
<div class=
"modal-content"
>
<div class=
"modal-header"
>
<button type=
"button"
class=
"close"
data-dismiss=
"modal"
aria-hidden=
"true"
>×</button>
<h4 class=
"modal-title"
id=
"myModalLabel"
>学生信息修改</h4>
</div>
<div class=
"modal-body"
>
学生编号:<input type=
"text"
name=
"stuid"
class=
"form-control"
value=
""
readonly=
"readonly"
/><br> 学生姓名:<input type=
"text"
name=
"stuname"
class=
"form-control"
id=
"stuname"
value=
""
><br>
所在班级:<select id=
"class"
name=
"classesid"
class=
"form-control"
>
</select> 当前头像:
<div>
<img alt=
""
style=
"width: 40px; height: 40px"
id=
"img"
>
</div>
用户头像:
<div class=
"file-loading"
>
<input id=
"file-fr"
name=
"file"
type=
"file"
multiple>
</div>
<input type=
"hidden"
id=
"userimage"
name=
"userimage"
value=
""
/>
</div>
<div class=
"modal-footer"
>
<button type=
"button"
onclick=
"update()"
class=
"btn btn-primary"
data-dismiss=
"modal"
>提交更改</button>
<button type=
"button"
class=
"btn btn-default"
data-dismiss=
"modal"
>关闭</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</form>
</body>
<script>
$(&
#39;#file-fr').fileinput({
theme : &
#39;fa',
language : &
#39;zh',
uploadAsync :
true
,
uploadUrl : &
#39;upload.do',
allowedFileExtensions : [ &
#39;jpg', 'png', 'gif', 'mp4' ],
maxFileSize : 0,
maxFileCount : 1
}).on(
"fileuploaded"
,
function
(event, data) {
$(
"#userimage"
).val(data.response.src);
})
</script>
<script type=
"text/javascript"
>
$(
function
() {
$(
"#result"
).bootstrapTable({
url :
"selectAll.do"
,
method :
"post"
,
cache :
false
,
dataType :
"json"
,
contentType :
"application/x-www-form-urlencoded"
,
toolbar :
"#toolbar"
,
toolbarAlign :
"left"
,
striped :
true
,
pagination :
true
,
sidePagination :
"server"
,
pageNumber : 1,
pageSize : 5,
pageList : [ 5, 10, 15 ],
locale :
"zh-CN"
,
queryParamsType :
"limit"
,
queryParams : queryParams
});
});
function
queryParams(params) {
var
params = {
pageSize : params.limit,
pageCode : params.offset / params.limit + 1
};
return
params;
};
function
state(value, row, index) {
if
(row[&
#39;state'] === 0) {
return
"正常"
;
}
if
(row[&
#39;state'] === 1) {
return
"锁定"
;
}
return
value;
}
function
image(value, row, index) {
return
"<img src='"
+row['userimage']+
"' style='width:30px;height:30px;'/>"
;
}
function
toolbar(value, row, index) {
var
element =
"<button type='button' onclick='edit("
+ row.stuid
+
")' class='btn btn-info'>编辑</button>"
+
"<button type='button' onclick='del("
+ row.stuid
+
")' class='btn btn-danger'>删除</button>"
+
"<button type='button' onclick='download("
+ row.stuid
+
")' class='btn btn-warning'>下载</button>"
;
return
element;
}
function
edit(stuid) {
$(
"#class option"
).remove();
$(
"#formid"
)[0].reset();
$.ajax({
url :
"editBystuid.do?stuid="
+ stuid,
type :
"post"
,
dataType :
"json"
,
success :
function
(data) {
$(&
#39;#myModal').modal('show');
$(
"[name=stuid]"
).val(data[0].stuid);
$(
"#stuname"
).val(data[0].stuname);
$(
"#userimage"
).val(data[0].userimage);
$(
"#img"
).attr('src', data[0].userimage);
$(
"#class"
).append(
"<option value='"
+data[0].calssesid+
"'>"
+ data[0].classes.classname +
"</option>"
);
}
});
$.ajax({
url :
"selectAllClass.do"
,
type :
"post"
,
dataType :
"json"
,
success :
function
(data) {
var
obj = $(
"#class"
);
for
(
var
i = 0; i < data.length; i++) {
var
op =
"<option value='"
+data[i].classesid+
"'>"
+ data[i].classname +
"</option>"
;
obj.append(op);
}
}
})
};
function
update() {
$.ajax({
url :
"updateBystuid.do"
,
type :
"get"
,
dataType :
"text"
,
data : $(
"#formid"
).serialize(),
success :
function
(data) {
if
(data ==
"ok"
) {
$(
"#result"
).bootstrapTable(
"refresh"
, {
url :
"selectAll.do"
});
}
else
if
(data ==
"error"
) {
alert(
"修改失败!"
);
}
}
});
}
function
del(stuid) {
if
(confirm(&
#39;确定要删除吗?') == true) {
$.ajax({
url :
"delBystuid.do?stuid="
+ stuid,
type :
"post"
,
dataType :
"text"
,
success :
function
(data) {
if
(data ==
"ok"
) {
$(
"#result"
).bootstrapTable(
"refresh"
, {
url :
"selectAll.do"
});
}
else
if
(data ==
"error"
) {
alert(
"删除失败"
);
}
}
})
return
false
;
}
}
function
download(stuid){
if
(confirm(&
#39;确定要下载头像?')==true){
location.href=
"download.do?stuid="
+stuid;
}
}
</script>
</html>