詳細參考jquery的API
這里主要展示實例,即寫法
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/paike/js/bootstrap-3.3.2-dist/css/bootstrap.css" />
<link rel="stylesheet" href="/paike/js/bootstrap-3.3.2-dist/css/bootstrap-theme.css" />
<script type="text/javascript" src="/paike/js/jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/paike/js/jquery.bootstrap.min.js"></script>
<script type="text/javascript" src="/paike/js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="/paike/js/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/paike/js/My97DatePicker/WdatePicker.js" ></script>
<script type="text/javascript" src="/paike/js/plugins/jquery.twbsPagination.min.js"></script>
<script type="text/javascript" src="/paike/js/plugins-override.js"></script>
<script>
$(function(){
$(".time").click(function(){
WdatePicker();
});
$(".queRenBtn").click(function(){
//獲取打鈎的內容
var checkbox = $("#cltcTable").find(":checked");
if(checkbox.length == 0 ){
return;
} else {
// 獲取id. 拼裝成一個字符串
var str = '';
for(var i = 0 ; i < checkbox.length;i++){
var ck = checkbox[i];
str+=$(ck).val().trim() + "_";
}
str = str.substr(0, str.length-1);
$.ajax({
url:'/paike/paike/queRen',
data:{ids:str},
success:function(data){
if(data.success){
window.location.href='/paike/paike/list'
} else {
window.alert(data.msg);
}
}
});
}
});
$("#cltcTable tr").click(function(){
$(this).find('input[type=checkbox]').click();
});
$("#query").click(function(){
$("#currentPage").val(1);
$("#searchForm").submit();
})
$("#pager").twbsPagination({ //生成分頁插件
totalPages:${pageResult.totlePage},//一共多少頁
visiblePages:5, //可見分頁數量
startPage:${pageResult.currentPage},//當前是多少頁
onPageClick:function(event,page){ //page就是你點的頁數
$("#currentPage").val(page); // 查詢的時候先設置一下多少頁
$("#searchForm").submit(); //表單提交
}
});
})
</script>
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="navbar">
<form action="/paike/paike/list" id="searchForm" class="form-inline">
<input type="hidden" name="currentPage" id="currentPage"/>
<div class="btn-group navbar-left clearfix">
<div class="form-group">
<label for="major_info">所學專業:</label>
<select id="major_info" class="form-control" name="majorid">
<option value="">請選擇</option>
<c:forEach items="${majorList }" var="major">
<option value="${major.id }" <c:if test="${major.id == classinfoVo.majorid }">selected</c:if>>${major.name }</option>
</c:forEach>
</select>
</div>
<div class="form-group">
<label for="pai">排課狀態:${classinfoVo.confirmstatus }</label>
<select id="pai" class="form-control" name="confirmstatus">
<option value="" >請選擇</option>
<option value="0" <c:if test="${'0' == classinfoVo.confirmstatus }">selected</c:if>>排課中</option>
<option value="1" <c:if test="${'1' == classinfoVo.confirmstatus }">selected</c:if>>已確認</option>
</select>
</div>
<div class="form-group">
<label for="finish">結課狀態:</label>
<select id="finish" class="form-control" name="finishstatus">
<option value="">請選擇</option>
<option value="0" <c:if test="${0 == classinfoVo.finishstatus }">selected</c:if>>未結課</option>
<option value="1" <c:if test="${1 == classinfoVo.finishstatus }">selected</c:if>>已結課</option>
</select>
</div>
<div class="form-group">
<label>入學時間:</label>
<input style="width:100px;" class="form-control time" name="startDate" type="text" value="${classinfoVo.startDate }" />~
<input style="width:100px;" class="form-control time" name="endDate" type="text" value="${classinfoVo.endDate }" />
</div>
</div>
<div class="">
<div class="btn-group navbar-right" style="margin-top:25px;">
<button type="submit" id="query" class="btn btn-default glyphicon-plus">查詢</button>
<a class="btn btn-default btn-danger">批量結課</a>
<a class="btn btn-default btn-warning queRenBtn" >批量確認</a>
</div>
</div>
</form>
</div>
<div class="panel panel-default">
<div class="panel-heading">班級信息</div>
<table id="cltcTable" class="table table-hover table-striped table-bordered" >
<tr>
<th></th>
<th>班級名稱</th>
<th>班級位置</th>
<th>班主任</th>
<th>入學時間</th>
<th>所修專業</th>
<th>排課狀態</th>
<th style="width:200px">操作</th>
</tr>
<c:forEach items="${pageResult.dataList }" var="classinfo">
<tr>
<td class="text-center"><input type="checkbox" name="classid" value="${classinfo.id }"/></td>
<td>${classinfo.name }</td>
<td>${classinfo.location }</td>
<td>${classinfo.manager.name }</td>
<td>${classinfo.starttime }</td>
<td>${classinfo.major.name }</td>
<td>
${classinfo.confirmstatus == 0? '排課中':'已確認' }
</td>
<td>
<c:if test="${classinfo.confirmstatus == 0 }">
<button class="btn btn-warning btn-xs" onclick="window.location.href='/paike/paike/gotoPai?classid=${classinfo.id}'">排課</button>
</c:if>
<c:if test="${classinfo.confirmstatus == 1 }">
<button class="btn btn-info btn-xs" onclick="window.location.href='pai.html'">詳情</button>
</c:if>
<c:if test="${classinfo.finishstatus == 0 }">
<button class="btn btn-danger btn-xs" onclick="window.location.href='pai.html'">結課</button>
</c:if>
</td>
</tr>
</c:forEach>
</table>
</div>
<div id="pager"></div>
</div>
</div>
</body>
</html>
后台接收
@RequestMapping("queRen")
@ResponseBody
public JsonResult queRen(String ids) {
JsonResult jsonResult = new JsonResult();
try {
classinfoService.queRen(ids);
jsonResult.setMsg("成功");
return jsonResult;
} catch (Exception e) {
e.printStackTrace();
jsonResult.setSuccess(false);
jsonResult.setMsg("服務器出錯, 請聯系管理員!");
return jsonResult;
}
}
jsonResult
package com.offcn.utils;
public class JsonResult {
private boolean success = true;
private String msg;
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}