前端页面
$(function(){
//给创建按钮绑定单击事件
$("#createClueBtn").click(function (){
//清空表单
$("#createClueForm")[0].reset()
//弹出模态窗口
$("#createClueModal").modal("show")
})
//给创建线索的保存按钮绑定单击事件
$("#saveCreateClueBtn").click(function () {
//收集参数
var fullname =$.trim($("#create-fullname").val())
var appellation =$("#create-appellation").val()
var owner =$("#create-owner").val()
var company =$.trim($("#create-company").val())
var job =$.trim($("#create-job").val())
var email =$.trim($("#create-email").val())
var phone =$.trim($("#create-phone").val())
var website =$.trim($("#create-website").val())
var mphone =$.trim($("#create-mphone").val())
var state =$("#create-state ").val()
var source =$("#create-source").val()
var description =$.trim($("#create-description").val())
var contactSummary =$.trim($("#create-contactSummary").val())
var nextContactTime=$.trim($("#create-nextContactTime").val())
var address =$.trim($("#create-address").val())
//表单验证
if(!(owner != "" && company != "" && fullname != "")){
alert("请将表单必填项填写完整!")
return
}
//正则表达式
var regexEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
var regexPhone = /0\d{2,3}-\d{7,8}/
var regexWebSite = /[a-zA-z]+:\/\/[^\s]*/
var regexMPhone = /^1[3456789]\d{9}$/
if(email!="" && !regexEmail.test(email)){
alert("邮箱格式不正确")
return;
}
if(phone!="" && regexPhone.test(phone)){
alert("公司座机号码格式不正确")
return;
}
if(website!="" && !regexWebSite.test(website)){
alert("公司网站格式不正确")
return;
}
if(mphone!="" && !regexMPhone.test(mphone)){
alert("手机号码格式不正确")
return;
}
//发送请求
$.ajax({
url:'workbench/clue/saveClue.do',
data:{
fullname:fullname,
appellation:appellation,
owner:owner,
company:company,
job:job,
email:email,
phone:phone,
website:website,
mphone:mphone,
state:state,
source:source,
description:description,
contactSummary:contactSummary,
nextContactTime:nextContactTime,
address:address
},
dataType:'json',
type:'post',
//处理响应
success:function (data){
if(data.code == "1"){
//成功
//关闭模态窗口
$("#createClueModal").modal("hide")
//刷新页面
}else {
//失败
$("#createClueModal").modal("show")
//提示错误信息
alert(data.message)
}
}
})
})
$(".myDate").datetimepicker({
language:'zh-CN',//语言
format:'yyyy-mm-dd',//格式
minView:'month',//最小视图
initialDate:new Date(),//初始化显示的日期
autoclose:true,//日历是否自动关闭
todayBtn:true,//是否显示今天按钮
clearBtn:true//是否显示清空按钮
})
//页面刷新查询数据显示数据
queryClueByConditionForPage(1,10)
//给查询按钮绑定单击事件
$("#queryClueBtn").click(function (){
queryClueByConditionForPage(1,$("#demo-pagination").bs_pagination("getOption","rowsPerPage"))
})
//给全选按钮绑定单击事件
$("#checkAll").click(function (){
//全选按钮选中,所有的checkbox也选中
$("#tBody input[type='checkbox']").prop("checked", this.checked)
})
$("#tBody").on("click", "input[type='checkbox']", function (){
if ($("#tBody input[type='checkbox']").length == $("#tBody input[type='checkbox']:checked").length) {
$("#checkAll").prop("checked", true)
}else {
$("#checkAll").prop("checked", false)
}
})
});
function queryClueByConditionForPage(pageNo, pageSize){
//获取参数
var fullname = $("#query-fullname").val()
var company = $("#query-company").val()
var phone = $("#query-phone").val()
var source = $("#query-source").val()
var owner = $("#query-owner").val()
var mphone = $("#query-mphone").val()
var state = $("#query-state").val()
// var pageNo = 1
// var pageSize = 10
//发送Ajax请求
$.ajax({
url:"workbench/clue/queryCountOfClueByConditionForPage.do",
data:{
fullname:fullname,
company:company,
phone:phone,
source:source,
owner:owner,
mphone:mphone,
state:state,
pageNo:pageNo,
pageSize:pageSize
},
type:"post",
dataType: "json",
success:function (data){
// 显示页数
// $("#totalRowsB").text(data.totalRows)
// 显示数据
var htmlStr = ""
$.each(data.clueList, function (index, obj){
htmlStr += "<tr class=\"active\">"
htmlStr += "<td><input type=\"checkbox\" value='"+obj.id+"'/></td>"
htmlStr += "<td><a style=\"text-decoration: none; cursor: pointer;\" οnclick=\"window.location.href='detail.html';\">"+obj.fullname+"</a></td>"
htmlStr += "<td>"+obj.company+"</td>"
htmlStr += "<td>"+obj.phone+"</td>"
htmlStr += "<td>"+obj.mphone+"</td>"
htmlStr += "<td>"+obj.source+"</td>"
htmlStr += "<td>"+obj.owner+"</td>"
htmlStr += "<td>"+obj.state+"</td>"
htmlStr += "</tr>"
})
$("#tBody").html(htmlStr)
$("#checkAll").prop("checked", false)
var totalPages = 1
if(data.totalRows % pageSize == 0){
totalPages = data.totalRows / pageSize
}else {
totalPages = parseInt(data.totalRows / pageSize)+1
}
$("#demo-pagination").bs_pagination({
currentPage:pageNo, //当前页号
rowsPerPage:pageSize, //每页显示条数
totalRows:data.totalRows, //总条数
totalPages:totalPages, //总页数
visiblePageLinks: 5, //最多可以显示的卡片数
showGoToPage: true, //是否显示到‘跳转到’部分
showRowsPerPage: true, //是否显示‘每页显示页数’部分
showRowsInfo: true, //是否显示记录的信息
//用户每次切换页号,都会触发本函数
onChangePage:function (event, pageObj){
// alert(pageObj.currentPage)
// alert(pageObj.rowsPerPage)
queryClueByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage)
}
})
}
})
}
<!-- 创建线索的模态窗口 -->
<div class="modal fade" id="createClueModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 90%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">创建线索</h4>
</div>
<div class="modal-body">
<form id="createClueForm" class="form-horizontal" role="form">
<div class="form-group">
<label for="create-owner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="create-owner">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</select>
</div>
<label for="create-company" class="col-sm-2 control-label">公司<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="create-company">
</div>
</div>
<div class="form-group">
<label for="create-appellation" class="col-sm-2 control-label">称呼</label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="create-appellation">
<option></option>
<c:forEach items="${appellationList}" var="al">
<option value="${al.id}">${al.value}</option>
</c:forEach>
</select>
</div>
<label for="create-fullname" class="col-sm-2 control-label">姓名<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="create-fullname">
</div>
</div>
<div class="form-group">
<label for="create-job" class="col-sm-2 control-label">职位</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="create-job">
</div>
<label for="create-email" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="create-email">
</div>
</div>
<div class="form-group">
<label for="create-phone" class="col-sm-2 control-label">公司座机</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="create-phone">
</div>
<label for="create-website" class="col-sm-2 control-label">公司网站</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="create-website">
</div>
</div>
<div class="form-group">
<label for="create-mphone" class="col-sm-2 control-label">手机</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="create-mphone">
</div>
<label for="create-state" class="col-sm-2 control-label">线索状态</label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="create-state">
<option></option>
<c:forEach items="${clueStateList}" var="cl">
<option value="${cl.id}">${cl.value}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label for="create-source" class="col-sm-2 control-label">线索来源</label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="create-source">
<option></option>
<c:forEach items="${sourceList}" var="sl">
<option value="${sl.id}">${sl.value}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label for="create-description" class="col-sm-2 control-label">线索描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="create-description"></textarea>
</div>
</div>
<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>
<div style="position: relative;top: 15px;">
<div class="form-group">
<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
</div>
</div>
<div class="form-group">
<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control myDate" id="create-nextContactTime">
</div>
</div>
</div>
<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>
<div style="position: relative;top: 20px;">
<div class="form-group">
<label for="create-address" class="col-sm-2 control-label">详细地址</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="1" id="create-address"></textarea>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="saveCreateClueBtn">保存</button>
</div>
</div>
</div>
</div>
<!-- 修改线索的模态窗口 -->
<div class="modal fade" id="editClueModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 90%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">修改线索</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="edit-clueOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="edit-clueOwner">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</select>
</div>
<label for="edit-company" class="col-sm-2 control-label">公司<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-company" value="动力节点">
</div>
</div>
<div class="form-group">
<label for="edit-call" class="col-sm-2 control-label">称呼</label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="edit-call">
<option></option>
<c:forEach items="${appellationList}" var="al">
<option value="${al.id}">${al.value}</option>
</c:forEach>
</select>
</div>
<label for="edit-surname" class="col-sm-2 control-label">姓名<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-surname" value="李四">
</div>
</div>
<div class="form-group">
<label for="edit-job" class="col-sm-2 control-label">职位</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-job" value="CTO">
</div>
<label for="edit-email" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-email" value="lisi@bjpowernode.com">
</div>
</div>
<div class="form-group">
<label for="edit-phone" class="col-sm-2 control-label">公司座机</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-phone" value="010-84846003">
</div>
<label for="edit-website" class="col-sm-2 control-label">公司网站</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-website" value="http://www.bjpowernode.com">
</div>
</div>
<div class="form-group">
<label for="edit-mphone" class="col-sm-2 control-label">手机</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-mphone" value="12345678901">
</div>
<label for="edit-status" class="col-sm-2 control-label">线索状态</label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="edit-status">
<option></option>
<c:forEach items="${clueStateList}" var="cl">
<option value="${cl.id}">${cl.value}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label for="edit-source" class="col-sm-2 control-label">线索来源</label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="edit-source">
<option></option>
<c:forEach items="${sourceList}" var="sl">
<option value="${sl.id}">${sl.value}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label for="edit-describe" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="edit-describe">这是一条线索的描述信息</textarea>
</div>
</div>
<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>
<div style="position: relative;top: 15px;">
<div class="form-group">
<label for="edit-contactSummary" class="col-sm-2 control-label">联系纪要</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="edit-contactSummary">这个线索即将被转换</textarea>
</div>
</div>
<div class="form-group">
<label for="edit-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control myDate" id="edit-nextContactTime" value="2017-05-01">
</div>
</div>
</div>
<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>
<div style="position: relative;top: 20px;">
<div class="form-group">
<label for="edit-address" class="col-sm-2 control-label">详细地址</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="1" id="edit-address">北京大兴区大族企业湾</textarea>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">更新</button>
</div>
</div>
</div>
</div>
<div>
<div style="position: relative; left: 10px; top: -10px;">
<div class="page-header">
<h3>线索列表</h3>
</div>
</div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
<div class="btn-toolbar" role="toolbar" style="height: 80px;">
<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">名称</div>
<input class="form-control" type="text" id="query-fullname">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">公司</div>
<input class="form-control" type="text" id="query-company">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">公司座机</div>
<input class="form-control" type="text" id="query-phone">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">线索来源</div>
<select class="form-control" id="query-source">
<option></option>
<c:forEach items="${sourceList}" var="sl">
<option value="${sl.id}">${sl.value}</option>
</c:forEach>
</select>
</div>
</div>
<br>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">所有者</div>
<input class="form-control" type="text" id="query-owner">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">手机</div>
<input class="form-control" type="text" id="query-mphone">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">线索状态</div>
<select class="form-control" id="query-state">
<option></option>
<c:forEach items="${clueStateList}" var="cl">
<option value="${cl.id}">${cl.value}</option>
</c:forEach>
</select>
</div>
</div>
<button type="submit" class="btn btn-default" id="queryClueBtn">查询</button>
</form>
</div>
<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 40px;">
<div class="btn-group" style="position: relative; top: 18%;">
<button type="button" class="btn btn-primary" id="createClueBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#editClueModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
</div>
</div>
<div style="position: relative;top: 50px;">
<table class="table table-hover">
<thead>
<tr style="color: #B3B3B3;">
<td><input type="checkbox" id="checkAll"/></td>
<td>名称</td>
<td>公司</td>
<td>公司座机</td>
<td>手机</td>
<td>线索来源</td>
<td>所有者</td>
<td>线索状态</td>
</tr>
</thead>
<tbody id="tBody">
<%-- <tr>--%>
<%-- <td><input type="checkbox" /></td>--%>
<%-- <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">李四先生</a></td>--%>
<%-- <td>动力节点</td>--%>
<%-- <td>010-84846003</td>--%>
<%-- <td>12345678901</td>--%>
<%-- <td>广告</td>--%>
<%-- <td>zhangsan</td>--%>
<%-- <td>已联系</td>--%>
<%-- </tr>--%>
<%-- <tr class="active">--%>
<%-- <td><input type="checkbox" /></td>--%>
<%-- <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">李四先生</a></td>--%>
<%-- <td>动力节点</td>--%>
<%-- <td>010-84846003</td>--%>
<%-- <td>12345678901</td>--%>
<%-- <td>广告</td>--%>
<%-- <td>zhangsan</td>--%>
<%-- <td>已联系</td>--%>
<%-- </tr>--%>
</tbody>
</table>
</div>
<div id="demo-pagination"></div>
<%-- <div style="height: 50px; position: relative;top: 60px;">--%>
<%-- <div>--%>
<%-- <button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>--%>
<%-- </div>--%>
<%-- <div class="btn-group" style="position: relative;top: -34px; left: 110px;">--%>
<%-- <button type="button" class="btn btn-default" style="cursor: default;">显示</button>--%>
<%-- <div class="btn-group">--%>
<%-- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">--%>
<%-- 10--%>
<%-- <span class="caret"></span>--%>
<%-- </button>--%>
<%-- <ul class="dropdown-menu" role="menu">--%>
<%-- <li><a href="#">20</a></li>--%>
<%-- <li><a href="#">30</a></li>--%>
<%-- </ul>--%>
<%-- </div>--%>
<%-- <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>--%>
<%-- </div>--%>
<%-- <div style="position: relative;top: -88px; left: 285px;">--%>
<%-- <nav>--%>
<%-- <ul class="pagination">--%>
<%-- <li class="disabled"><a href="#">首页</a></li>--%>
<%-- <li class="disabled"><a href="#">上一页</a></li>--%>
<%-- <li class="active"><a href="#">1</a></li>--%>
<%-- <li><a href="#">2</a></li>--%>
<%-- <li><a href="#">3</a></li>--%>
<%-- <li><a href="#">4</a></li>--%>
<%-- <li><a href="#">5</a></li>--%>
<%-- <li><a href="#">下一页</a></li>--%>
<%-- <li class="disabled"><a href="#">末页</a></li>--%>
<%-- </ul>--%>
<%-- </nav>--%>
<%-- </div>--%>
<%-- </div>--%>
</div>
</div>
根据逆向工程生成实体类和mapper
controller
@RequestMapping("/workbench/clue/queryCountOfClueByConditionForPage.do")
public @ResponseBody Object queryCountOfClueByConditionForPage(String fullname, String company,String phone, String source,
String owner, String mphone, String state, int pageSize,int pageNo){
//封装参数
Map<String, Object> map = new HashMap<>();
map.put("fullname", fullname);
map.put("company", company);
map.put("phone", phone);
map.put("source", source);
map.put("owner", owner);
map.put("mphone", mphone);
map.put("state", state);
map.put("beginNo", pageSize * (pageNo - 1));
map.put("pageSize", pageSize);
//查询数据
List<Clue> clueList = clueService.queryClueByConditionForPage(map);
int totalRows = clueService.queryCountOfClueByCondition(map);
//封装数据
Map<String, Object> ret = new HashMap<>();
ret.put("clueList", clueList);
ret.put("totalRows", totalRows);
return ret;
}
点击线索自动调用实现分页查询线索信息