本文介绍了使用SSM框架实现云表格的过程，包括选择字段排序、按条件搜索、分页和文件上传等功能的实现细节及遇到的问题。
更新的代码
customerAdd.jsp 主要的代码(所有)
<script>
jQuery(document).ready(function($) {
//点击保存按钮，自动向后台提交数据
$("#btn_save").click(function(){
var sysUserName = $("#sysUserName").val();
var sourceK = $("#sourceK").val();
var statusK = $("#statusK").val();
var workPeopleId = $("#workPeopleId").val();
var telTime = $("#telTime").val();
var estimateTime = $("#estimateTime").val();
var money = $("#money").val();
var companyAddress = $("#companyAddress").val();
var lianXiFangShi = $("#lianXiFangShi").val();
$("#beiZhu").val(editor2.txt.text()); //把富文本编辑器中的内容放入到textarea中，方便向后台传送数据
var beiZhu = $("beiZhu").val();
$.ajaxFileUpload({
url : '${contextPath }/customerCtrl/save', //用于文件上传的服务器端请求地址
fileElementId : 'file', //文件上传空间的id属性 <input type="file" id="file" name="file" />
type : 'post',
data : {sysUserName:sysUserName,sourceK:sourceK,statusK:statusK,workPeopleId:workPeopleId,telTime:telTime,estimateTime:estimateTime,money:money,companyAddress:companyAddress,lianXiFangShi:lianXiFangShi,beiZhu:beiZhu},
dataType : 'text', //返回值类型 一般设置为json
success : function(data, status) //服务器成功响应处理函数
{
window.location.href="${contextPath }/customerList.jsp";
},
error : function(data, status, e)//服务器响应失败处理函数
{
alert("歌曲上传失败");
}
});
})
//function save1(){
// }
//初始化页面，包括动态的客户来源和销售状态和销售人员
$.ajax({
url : "${contextPath }/customerCtrl/initCustomerAdd",
type : "post",
dataType : "json",
success : function(msg){
//获取销售状态
var statusList = msg.statusList;
var statusStr = '';
for(var i = 0; i < statusList.length; i++){
var status = statusList[i];
statusStr += '<li statusK='+ status.k+'><span class="mod_category catcolor_o" ><span >'+ status.v +'</span></span></li>';
}
$("#status").html(statusStr);
//添加销售状态的样式，因为拼接字符串是采用异步刷新方式，所以在字段没有完全获取到时样式就已经加载完成了，所以把样式放在拼接字符串之后，就可以获得
//客户来源同理
$(".mod_categorylist").eq(1).find('li').each(function(index, el) {
$(this).click(function(event) {
var a = 'abcdefghijklmnopz';
var letter = a.charAt(parseInt(Math.random()*a.length+1))
$(this).find(".catcolor_o").toggleClass('color_'+letter)
$(this).siblings('li').find(".catcolor_o").attr("class","mod_category catcolor_o")
$("#statusK").val($(this).attr("statusK"));
});
});
//获取客户来源
var sourceList = msg.sourceList;
var sourceStr = '';
for(var i = 0; i < sourceList.length; i++){
var source = sourceList[i];
sourceStr += '<li sourceK='+ source.k+'><span class="mod_category catcolor_o" ><span >'+ source.v +'</span></span></li>';
}
$("#source").html(sourceStr);
//与销售状态的样式解释同理
$(".mod_categorylist").first().find('li').each(function(index, el) {
$(this).click(function(event) {
$(this).find(".catcolor_o").toggleClass('color_z')
$(this).siblings('li').find(".catcolor_o").removeClass('color_z')
$("#sourceK").val($(this).attr("sourceK"));
});
});
//在页面中显示工作区成员
var workPeopleList = msg.workPeopleList;
var workPeopleStr = '';
for(var i = 0; i < workPeopleList.length; i++){
var workPeople = workPeopleList[i];
workPeopleStr += '<li><span class="mod_avatar avt_middle" title='+ workPeople.name+' img=\"${contextPath }/static/image/'+ workPeople.img +'\" workPeopleId='+ workPeople.id +'><img src="${contextPath }/static/image/'+ workPeople.img +'" class="avatar" draggable="false" ></span></li>';
}
$("#workPeople").html(workPeopleStr);
// 工作区添加头像 选择完工作区成员后显示的内容
$(".mod_avatar").on("click",function (argument) {
var p_con ="<ul class='mod_avatarlist cl'><li><span class='drop'></span><span class='mod_avatar avt_middle' title='"+ $(this).attr('title')+"'><img src=\""+ $(this).attr("img") +"\" class='avatar' draggable='false' ><span>"+ $(this).attr('title')+"</span></span></li></ul>"
$(".value_contact").find(".popover").removeClass('left-bottom'); //不好使
$("#avatar").html(p_con)
$("#workPeopleId").val($(this).attr("workPeopleId"));
});
//工作区成员中搜索栏
$("#workPeopleSouSuo").keypress(function(event){
if(event.which === 13) { //判断键盘按下的是否为回车键
var v = 0;
for(var j = 0; j < workPeopleList.length; j++){
var workPeople = workPeopleList[j];
if($("#workPeopleSouSuo").val() == workPeople.name){
var p_con ="<ul class='mod_avatarlist cl'><li><span class='drop'></span><span class='mod_avatar avt_middle' title="+ workPeople.name+"><img src='${contextPath }/static/image/"+ workPeople.img +"' class='avatar' draggable='false' ><span>"+ workPeople.name +"</span></span></li></ul>"
$("#workPeopleSouSuo").val("");
$(".value_contact").find(".popover").removeClass('left-bottom');
$("#avatar").html(p_con);
break;
}
v = v + 1;
}
if(v == workPeopleList.length){
alert("搜索的销售人员不存在 ")
}
}
})
}//success
})//ajax
//日期控件
//联络时间
jeDate({
dateCell:"#telTime",
format:"YYYY-MM-DD",
isinitVal:false,
isTime:false,
minDate:"2014-09-19",
okfun:function(val){alert(val)}
})
//预计签约时间
jeDate({
dateCell:"#estimateTime",
format:"YYYY-MM-DD",
isinitVal:false,
isTime:false,
minDate:"2014-09-19",
okfun:function(val){alert(val)}
})
//处理文本框中金额的问题，输入的必须是数字以及小数点，并且小数点仅有一位，小数点后最多不能超过三位数
$("#money").keyup(function () {
var reg = $(this).val().match(/\d+\.?\d{0,3}/);
var txt = '';
if (reg != null) {
txt = reg[0];
}
$(this).val(txt);
}).change(function () {
$(this).keypress();
var v = $(this).val();
if (/\.$/.test(v))
{
$(this).val(v.substr(0, v.length - 1));
}
});
//富文本编辑器
var E = window.wangEditor
var editor2 = new E('#fuWenBenEditor')
editor2.create();
//editor2.txt.html() 获取富文本编辑器中的html代码
//editor2.txt.text() 获取富文本编辑器中的纯文本
})
$(".value_contact").on("click", function(e){
$(this).find('.popover').addClass('left-bottom');
$(document).one("click", function(){
$(".popover").removeClass('left-bottom');
});
e.stopPropagation();
});
$(".left-bottom").on("click", function(e){
e.stopPropagation();
});
// $(".date_btn").click(function () {
// var dateNum =$(this).find('input[type=hidden]').value();
// console.log(dateNum);
// var datestr ="<span class='rc-calendar-picker' ><span class='getdate' readonly='' value=''><span >"+dateNum+"</span><i class='drop'></i></span></span>"
// $(this).html(datestr)
// })
$(".date_inp").change(function(event) {
var d_str1 = "<span class='rc-calendar-picker'><span class='getdate' readonly='' value='' ><span >"+$(this).val()+"</span></span></span>"
$(this).parents(".date_btn").html(d_str1)
});
$(".lpage").click(function(event) {
location.href="customerList.jsp"
});
</script> customerList.jsp的主要的代码（所有）
<script>
jQuery(document).ready(function($) {
//日期格式化
Date.prototype.format =function(format)
{
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
};
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4- RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
};
ajaxAll();
function ajaxAll(){
$.ajax({
url : "${contextPath }/customerCtrl/select",
type : "post",
dataType : "json",
success : function(msg){
var customerList = msg.customerList;
var customerStr = '';
for(var i = 0; i < customerList.length; i++){
var customer = customerList[i];
customerStr += '<tr>';
customerStr += ' <td>'+ (i + 1)+'</td>';
customerStr += ' <td id="hideId" style="display:none">' + customer.id + '</td>';
customerStr += ' <td>'+ customer.name +'</td>';
customerStr += ' <td>'+ customer.sourceName +'</td>';
customerStr += ' <td><span class="mod_category catcolor_o color_e" title="'+ customer.statusName +'" cid="5">'+ customer.statusName +'</span></td>';
customerStr += ' <td>'+ customer.sname +'</td>';
customerStr += ' <td>'+ new Date(customer.telTime.time).format("yyyy-MM-dd")+'</td>';
customerStr += ' <td>'+ new Date(customer.estimateTime.time).format("yyyy-MM-dd")+'</td>';
customerStr += ' <td>'+ customer.money +'</td>';
customerStr += ' <td>'+ customer.address +'</td>';
customerStr += ' <td>电话：'+ customer.phone +'</td>';
customerStr += ' <td>'+ customer.remark +'</td>';
customerStr += ' <td>'+ customer.file +'</td>';
customerStr += '</tr>';
}
$("#select").html(customerStr);
//像页面中插入公共筛选的状态值
var statusList = msg.statusList;
var statusStr = '<li class="selected" ><b >全部</b></li>';
for(var i = 0; i < statusList.length; i++){
var status = statusList[i];
statusStr += '<li status='+ status.k +'><b >'+ status.v +'</b><cite ><i ></i></cite></li>';
}
$("#status").html(statusStr);
//通过li标签遍历左侧筛选的内容
$("li").click(function(){
if($(this).text() == "全部"){
$("#inp").val("全部");
ajaxAll();
}else{
$("#inp").val($(this).attr("status"));
shaiXuan();
}
})
//插入页码值
var pageInt = msg.pageInt;
var pageIntStr = '<a href="javascript:;" class="cur" name="上一页" >上一页</a>';
for(var i = 0; i < pageInt; i++){
pageIntStr += '<a href="#" class="cur" name='+ (i + 1)+'>'+ (i + 1) +'</a>';
}
pageIntStr += '<a href="#" class="cur" name="下一页">下一页</a>';
$("#page").html(pageIntStr);
$("#fenYe").val("1")
$(".cur").each(function(index, el) {
$(this).click(function(event) {
if($(this).attr("name") == "上一页"){
if($("#fenYe").val() == 1){
$("#fenYe").val("1")
}else{
$("#fenYe").val(($("#fenYe").val()-1))
}
}else if($(this).attr("name") == "下一页"){
if($("#fenYe").val() == pageInt){
$("#fenYe").val(pageInt)
}else{
var a = (Number)($("#fenYe").val());
$("#fenYe").val(a+1)
}
}else {
$("#fenYe").val($(this).attr("name"))
}
fenYe();
})
})
}//sucess
})//ajax
//将当前页码传入到后台
function fenYe(){
$.ajax({
url : "${contextPath }/customerCtrl/fenYe",
type : "post",
dataType : "json",
data : $("#fenYeForm").serialize(),
success : function(msg){
var customerList = msg.customerList;
var customerStr = '';
for(var i = 0; i < customerList.length; i++){
var customer = customerList[i];
customerStr += '<tr>';
customerStr += ' <td>'+ (i + 1)+'</td>';
customerStr += ' <td id="hideId" style="display:none">' + customer.id + '</td>';
customerStr += ' <td>'+ customer.name +'</td>';
customerStr += ' <td>'+ customer.sourceName +'</td>';
customerStr += ' <td><span class="mod_category catcolor_o color_e" title="'+ customer.statusName +'" cid="5">'+ customer.statusName +'</span></td>';
customerStr += ' <td>'+ customer.sname +'</td>';
customerStr += ' <td>'+ new Date(customer.telTime.time).format("yyyy-MM-dd")+'</td>';
customerStr += ' <td>'+ new Date(customer.estimateTime.time).format("yyyy-MM-dd")+'</td>';
customerStr += ' <td>'+ customer.money +'</td>';
customerStr += ' <td>'+ customer.address +'</td>';
customerStr += ' <td>电话：'+ customer.phone +'</td>';
customerStr += ' <td>'+ customer.remark +'</td>';
customerStr += ' <td>'+ customer.file +'</td>';
customerStr += '</tr>';
}
$("#select").html(customerStr);
}
})//ajax
}
function shaiXuan(){
$.ajax({
url : "${contextPath }/customerCtrl/shaiXuan",
type : "post",
dataType : "json",
data : $("#shaiXuan").serialize(),
success : function(msg){
var customerList = msg.customerList;
var customerStr = '';
for(var i = 0; i < customerList.length; i++){
var customer = customerList[i];
customerStr += '<tr>';
customerStr += ' <td>'+ (i + 1)+'</td>';
customerStr += ' <td id="hideId" style="display:none">' + customer.id + '</td>';
customerStr += ' <td>'+ customer.name+'</td>';
customerStr += ' <td>'+ customer.sourceName+'</td>';
customerStr += ' <td><span class="mod_category catcolor_o color_e" title="'+ customer.statusName+'" cid="5">'+ customer.statusName+'</span></td>';
customerStr += ' <td>'+ customer.sname+'</td>';
customerStr += ' <td>'+ new Date(customer.telTime.time).format("yyyy-MM-dd")+'</td>';
customerStr += ' <td>'+ new Date(customer.estimateTime.time).format("yyyy-MM-dd")+'</td>';
customerStr += ' <td>'+ customer.money+'</td>';
customerStr += ' <td>'+ customer.address+'</td>';
customerStr += ' <td>电话：'+ customer.phone+'</td>';
customerStr += ' <td>'+ customer.remark+'</td>';
customerStr += ' <td>'+ customer.file+'</td>';
customerStr += '</tr>';
}
$("#select").html(customerStr);
}
})// shaiXuan ajax
}
$(".item_search").on("click", function(e){
$(this).addClass('s_focus');
$(".orderBy").hide();
$(".drop").click(function(event) {
$('.s_focus').find(".popover").addClass('in')
});
$(document).one("click", function(){
$(".item_search").removeClass('s_focus');
$('.item_search').find(".popover").removeClass('in');
});
e.stopPropagation();
});
$(".s_focus").on("click", function(e){
e.stopPropagation();
});
$(".sel_all").click(function(event) {
if($(this).prop('checked'))
{
$(this).parents(".pop_tips").next(".pop_select").find('li').each(function(index, el) {
$(this).addClass('current').find('span').addClass('mod_category')
});
}else {
$(this).parents(".pop_tips").next(".pop_select").find('li').each(function(index, el) {
$(this).removeClass('current').find('span').removeClass('mod_category')
});
}
});
$(".all_del").click(function(event) {
if($(this).prop('checked'))
{
$(".tbl").find('th,td').each(function(index, el) {
$(this).show();
});
}else {
$(".tbl").find('th,td').each(function(index, el) {
$(this).hide();
});
}
});
//根据预计时间和签约时间排序
$(".orderByClass").eq(1).find('li').each(function(index, el) {
$(this).click(function(event) {
$(this).toggleClass('current') //找到orderByClass这个类下面的li标签，当li标签下的a被点击时，在后追加一个类current
$(this).siblings('li').attr("class","a")
$("#sortInp").val($(this).attr("sort"))
$.ajax({
url : "${contextPath }/customerCtrl/orderBy",
type : "post",
data : $("#souSuoForm").serialize(),
dataType : "json",
success : function(msg){
var customerList = msg.customerList;
var customerStr = '';
for(var i = 0; i < customerList.length; i++){
var customer = customerList[i];
customerStr += '<tr>';
customerStr += ' <td>'+ (i + 1)+'</td>';
customerStr += ' <td id="hideId" style="display:none">' + customer.id + '</td>';
customerStr += ' <td>'+ customer.name +'</td>';
customerStr += ' <td>'+ customer.sourceName +'</td>';
customerStr += ' <td><span class="mod_category catcolor_o color_e" title="'+ customer.statusName +'" cid="5">'+ customer.statusName +'</span></td>';
customerStr += ' <td>'+ customer.sname +'</td>';
customerStr += ' <td>'+ new Date(customer.telTime.time).format("yyyy-MM-dd")+'</td>';
customerStr += ' <td>'+ new Date(customer.estimateTime.time).format("yyyy-MM-dd")+'</td>';
customerStr += ' <td>'+ customer.money +'</td>';
customerStr += ' <td>'+ customer.address +'</td>';
customerStr += ' <td>电话：'+ customer.phone +'</td>';
customerStr += ' <td>'+ customer.remark +'</td>';
customerStr += ' <td>'+ customer.file +'</td>';
customerStr += '</tr>';
}
$("#select").html(customerStr);
}//sucess
})// orderby ajax
});
});
//按条件搜索
$(".popSelect").find('li').each(function(index, el) {
$(this).parents(".pop_select").siblings(".pop_tips").find(".sel_all").prop('checked',true)
$("#sortInp").val("name,workPeople,telTime,estimateTime,money,address,phone,remark,")
$(this).on("click",function(event) {
$(this).toggleClass('current').find('span').toggleClass('mod_category')
var str = '';
$(".popSelect").find('li').each(function(index, el) {
if($(this).attr("class") == "current"){
str += $(this).attr("name")+','
$("#sortInp").val(str)
}
})
})
});
$(".btn_orderBy").click(function(e) {
$(".orderBy").show();
$(".last_pop").hide();
$('.item_search').find(".popover").removeClass('in')
$(".item_search").removeClass('s_focus');
$(document).one("click", function(){
$(".orderBy").hide();
});
e.stopPropagation();
});
$(".btn_orderBy").on("click", function(e){
e.stopPropagation();
});
$("#souSuo").keypress(function(event){
if(event.which === 13) { //判断键盘按下的是否为回车键
$.ajax({
url : "${contextPath }/customerCtrl/souSuo",
type : "post",
data : $("#souSuoForm").serialize(),
dataType : "json",
success : function(msg){
var customerList = msg.customerList;
var customerStr = '';
for(var i = 0; i < customerList.length; i++){
var customer = customerList[i];
customerStr += '<tr>';
customerStr += ' <td>'+ (i + 1)+'</td>';
customerStr += ' <td id="hideId" style="display:none">' + customer.id + '</td>';
customerStr += ' <td>'+ customer.name +'</td>';
customerStr += ' <td>'+ customer.sourceName +'</td>';
customerStr += ' <td><span class="mod_category catcolor_o color_e" title="'+ customer.statusName +'" cid="5">'+ customer.statusName +'</span></td>';
customerStr += ' <td>'+ customer.sname +'</td>';
customerStr += ' <td>'+ new Date(customer.telTime.time).format("yyyy-MM-dd")+'</td>';
customerStr += ' <td>'+ new Date(customer.estimateTime.time).format("yyyy-MM-dd")+'</td>';
customerStr += ' <td>'+ customer.money +'</td>';
customerStr += ' <td>'+ customer.address +'</td>';
customerStr += ' <td>电话：'+ customer.phone +'</td>';
customerStr += ' <td>'+ customer.remark +'</td>';
customerStr += ' <td>'+ customer.file +'</td>';
customerStr += '</tr>';
}
$("#select").html(customerStr);
}//sucess
})// orderby ajax
}
})
/* $(".cur").click(function(){
}) */
/* $(".page").find('.cur').each(function(index, el) {
$(this).click(function(event) {
alert()
alert($(this).attr("name"))
})
}) */
}//ready方法
var lith="";
var ullist ="";
var thnum = 0;
$(".th_sel").click(function(e) {
$(".last_pop").show();
$(".orderBy").hide();
$('.item_search').find(".popover").removeClass('in')
$(".item_search").removeClass('s_focus');
$(document).one("click", function(){
$(".last_pop").hide();
});
var _this = $(this)
if(thnum==0){
$(".tbl").find('th').each(function(index, el) {
ullist = lith += "<li class='current'><span class='mod_category'>"+$(this).text()+"</span></li>"
_this.find(".pop_select").html(ullist)
_this.find(".pop_select").find('li:first-child').remove();
});
thnum= 1
$(this).find(".pop_select").find('li').each(function(index, el) {
$(this).on("click",function(event) {
$(this).toggleClass('current').find('span').toggleClass('mod_category')
$(this).parents(".pop_select").siblings(".pop_tips").find(".sel_all").prop('checked',false)
if($(this).not('.current')){
var num = index+2;
$(".tbl").find("th:nth-child("+num+")").toggle();
$(".tbl").find('tr').find("td:nth-child("+num+")").each(function(index, el) {
$(this).toggle();
});
}
});
});
}
e.preventDefault();
e.stopPropagation();
});
$(".th_sel").on("click", function(e){
e.stopPropagation();
});
// 表格操作
$(".tbl").find('tr').each(function(index, el) {
$(this).find('td').first().html(index)
});
$(".tbl").find('th').first().find('input[type=checkbox]').click(function(event) {
if($(this).prop('checked')){
$(".mod_bulkoperation").show()
$(".tbl").find('tr').each(function(index, el) {
var checkinp = "<input type='checkbox' checked='checked' name />"
$(this).find('td').first().html(checkinp)
});
}else {
$(".tbl").find('tr').each(function(index, el) {
var checkinp = "<input type='checkbox' class='check' name />"
$(this).find('td').first().html(checkinp)
});
}
});
$(".cancal_btn").click(function(event) {
$(".mod_bulkoperation").hide()
$(".tbl").find('tr').each(function(index, el) {
$(this).find('td').first().html(index);
});
});
//删除
$(".btn_del").click(function(event) {
var deleteStr = "";
$(".check").each(function(index,element){
if($(this).prop('checked')){
deleteStr += $(this).parent().siblings().eq(0).text()+","
}
});
$("#del").val(deleteStr);
$("#delete").submit();
});
});
function cancelCheck(e){
//取消冒泡
$("#sortInp").val("")
e.cancelBubble = true;
}
function souSuoCheck(obj){
if($(obj).prop('checked')){
//设置checked属性
$("input[name='checkboxall']").prop("checked", true);
$("#sortInp").val("name,workPeople,telTime,estimateTime,money,address,phone,remark,")
} else {
//设置checked属性
$("input[name='checkboxall']").prop("checked",false);
$("#sortInp").val("")
}
}
</script>customerBatch.jsp主要代码（全部）
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#btn_return").click(function(){
window.location.href="${contextPath }/customerList.jsp";
})
$("#btn_submit").click(function(){
$.ajaxFileUpload({
url : '${contextPath }/customerCtrl/jieXiXls', // 用于文件上传的服务器端请求地址
fileElementId : 'file', //文件上传空间的id属性 <input type="file" id="file" name="file" />
type : 'post',
dataType : 'text', //返回值类型 一般设置为json
success : function(data, status) //服务器成功响应处理函数
{
window.location.href="${contextPath }/customerList.jsp";
},
error : function(data, status, e)//服务器响应失败处理函数
{
alert("歌曲上传失败");
}
});
})
})
</script>customerCtrl.java(全部)
package org.jsoft.ctrls;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.text.ParseException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.jsoft.service.ICustomerService;
import org.jsoft.service.IStatusService;
import org.jsoft.service.ISysUserService;
import org.jsoft.util.XlsUtil;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.servlet.ModelAndView;
@Controller
@RequestMapping("customerCtrl")
public class CustomerCtrl extends BaseAction{
@Resource
private ICustomerService customerService;
@Resource
private IStatusService statusService;
@Resource
private ISysUserService sysUserService;
/**
* 查找所有的客户信息
* */
@RequestMapping("select")
public void select(HttpServletRequest request,HttpServletResponse response){
//List<Map<String,Object>> customerList = customerService.select();
//status 公共筛选的内容时动态的，从数据库中查出来的
Map<String,Object> statusMap = new HashMap<String, Object>();
//通过status查询
statusMap.put("columns", "status");
//将查询到的结果放在一个集合中
List<Map<String,Object>> statusList = statusService.select(statusMap);
Map<String, Object> data = new HashMap<String,Object>();
data.put("begin", 1);
data.put("num", 12);
List<Map<String,Object>> customerList = customerService.fenYe(data);
//查询customer总条数 一页12条
Integer page = customerService.count();
Integer pageInt;
if(page / 12 == 0){
pageInt = page/12;
}else{
pageInt = page/12 + 1;
}
//System.err.println(pageInt);
Map<String,Object> result = new HashMap<String,Object>();
result.put("customerList", customerList);
//把list的值放入一个Map中，用于json传值
result.put("statusList", statusList);
result.put("pageInt", pageInt);
response.setCharacterEncoding("UTF-8");
this.writeJSON(response, result);
}
/**
* 通过公共筛选，查找符合条件的客户信息
* */
@RequestMapping("shaiXuan")
public void shaiXuan(HttpServletRequest request,HttpServletResponse response){
String shaiXuan = request.getParameter("shaiXuan");
Map<String,Object> customerMap = new HashMap<String, Object>();
customerMap.put("status", shaiXuan);
List<Map<String,Object>> customerList = customerService.shaiXuan(customerMap);
Map<String,Object> result = new HashMap<String,Object>();
result.put("customerList", customerList);
response.setCharacterEncoding("UTF-8");
this.writeJSON(response, result);
}
/**
* 对选中的复选框进行删除
* */
@RequestMapping("delete")
public ModelAndView delete(HttpServletRequest request,HttpServletResponse response){
String delete = request.getParameter("delete");
String[] delId = delete.split(",");
customerService.delete(delId);
ModelAndView mv = new ModelAndView();
mv.setViewName("customerList");
return mv;
}
/**
* 保存从页面提交的数据
* 并插入到数据库中
* @throws IOException
* */
@RequestMapping(value = "save", method = RequestMethod.POST)
public ModelAndView save(HttpServletRequest request,HttpServletResponse response,ModelMap model,HttpSession session) throws IOException{
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile mFile = multipartRequest.getFile("file"); //getFile("file") 中间的file是页面中name的值
String sysUserName = multipartRequest.getParameter("sysUserName");
String source = multipartRequest.getParameter("sourceK");
String status = multipartRequest.getParameter("statusK");
String workPeopleId = multipartRequest.getParameter("workPeopleId");
String telTime = multipartRequest.getParameter("telTime");
String estimateTime = multipartRequest.getParameter("estimateTime");
String money = multipartRequest.getParameter("money");
String companyAddress = multipartRequest.getParameter("companyAddress");
String lianXiFangShi = multipartRequest.getParameter("lianXiFangShi");
String beiZhu = multipartRequest.getParameter("beiZhu");
String path="E:/eclipse/jr_jsp/file";//替换成你所要保存的文件的位置
String filename = mFile.getOriginalFilename(); //获取的文件名
InputStream inputStream = mFile.getInputStream();
byte[] b = new byte[1048576];
int length = inputStream.read(b);
String url =path + filename;
FileOutputStream outputStream = new FileOutputStream(url);
outputStream.write(b, 0, length);
inputStream.close();
outputStream.close();
Map<String,Object> customerMap = new HashMap<String, Object>();
customerMap.put("name", sysUserName);
customerMap.put("source", source);
customerMap.put("status", status);
customerMap.put("sysUserId", workPeopleId);
customerMap.put("telTime", telTime);
customerMap.put("estimateTime", estimateTime);
customerMap.put("money", money);
customerMap.put("address", companyAddress);
customerMap.put("phone", lianXiFangShi);
customerMap.put("remark", beiZhu);
customerMap.put("file", filename);
customerService.save(customerMap);
ModelAndView mv = new ModelAndView();
mv.setViewName("customerList");
return mv;
}
/**
* 初始化新增客户页，包括客户来源，销售状态，销售人员，页码
* **/
@RequestMapping("initCustomerAdd")
public void initCustomerAdd(HttpServletRequest request,HttpServletResponse response){
//查询source状态
Map<String,Object> sourceMap = new HashMap<String, Object>();
//通过status查询
sourceMap.put("columns", "source");
//将查询到的结果放在一个集合中
List<Map<String,Object>> sourceList = statusService.select(sourceMap);
//查询status状态
Map<String,Object> statusMap = new HashMap<String, Object>();
//通过status查询
statusMap.put("columns", "status");
//将查询到的结果放在一个集合中
List<Map<String,Object>> statusList = statusService.select(statusMap);
List<Map<String,Object>> workPeopleList = sysUserService.select();
Map<String,Object> result = new HashMap<String,Object>();
result.put("statusList", statusList);
result.put("sourceList", sourceList);
result.put("workPeopleList", workPeopleList);
response.setCharacterEncoding("UTF-8");
this.writeJSON(response, result);
}
/**
* 解析客户上传的Excel文件
* @throws ParseException
* **/
@SuppressWarnings("unchecked")
@RequestMapping(value = "jieXiXls", method = RequestMethod.POST)
public ModelAndView jieXiXls(HttpServletRequest request,HttpServletResponse response,ModelMap model,HttpSession session) throws IOException, ParseException{
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile mFile = multipartRequest.getFile("file"); //getFile("file") 中间的file是页面中name的值
String filename = mFile.getOriginalFilename(); //获取的文件名
InputStream inputStream = mFile.getInputStream();
byte[] b = new byte[1048576];
int length = inputStream.read(b);
String path="E:/eclipse/jr_jsp/file/1";//替换成你所要保存的文件的位置
String url =path + filename;
FileOutputStream outputStream = new FileOutputStream(url);
outputStream.write(b, 0, length);
inputStream.close();
outputStream.close();
List<Map<String,Object>> customerList = XlsUtil.importXls("E:/eclipse/jr_jsp/file/1/"+filename+"");
for(Map<String,Object> customerMap : customerList){
customerService.save(customerMap);
}
ModelAndView mv = new ModelAndView();
mv.setViewName("customerList");
return mv;
}
/**
* 根据预计签约时间和联络时间进行排序
* */
@RequestMapping("orderBy")
public void orderBy(HttpServletRequest request,HttpServletResponse response) throws IOException, ParseException{
String sort = request.getParameter("sort");
List<Map<String,Object>> customerList;
if(sort.equals("telTimeAsc")){
customerList = customerService.orderBy(1);
}else if(sort.equals("telTimeDesc")){
customerList = customerService.orderBy(2);
}else if(sort.equals("estimateTimeAsc")){
customerList = customerService.orderBy(3);
}else if(sort.equals("estimateTimeDesc")){
customerList = customerService.orderBy(4);
}else{
customerList = customerService.select();
}
Map<String,Object> result = new HashMap<String,Object>();
result.put("customerList", customerList);
response.setCharacterEncoding("UTF-8");
this.writeJSON(response, result);
}
/**
* 搜索，根据用户输入的内容进行模糊查询
* */
@RequestMapping("souSuo")
public void souSuo(HttpServletRequest request,HttpServletResponse response) throws IOException, ParseException{
//得到页面想要模糊查询的内容和查询的条件
String souSuo = request.getParameter("souSuo");
String sort = request.getParameter("sort");
String[] souSuoSort = sort.split(",");
//把数组里的内容与字段相匹配，如果相等则向map中插入字段，方便查询
Map<String,Object> souSuoMap = new HashMap<String, Object>();
souSuoMap.put("souSuo",souSuo);
for(int i = 0; i < souSuoSort.length; i++){
if("name".equals(souSuoSort[i])){
souSuoMap.put("name", souSuoSort[i]);
}else if("workPeople".equals(souSuoSort[i])){
souSuoMap.put("sname", souSuoSort[i]);
}else if("telTime".equals(souSuoSort[i])){
souSuoMap.put("telTime", souSuoSort[i]);
}else if("estimateTime".equals(souSuoSort[i])){
souSuoMap.put("estimateTime", souSuoSort[i]);
}else if("money".equals(souSuoSort[i])){
souSuoMap.put("money", souSuoSort[i]);
}else if("address".equals(souSuoSort[i])){
souSuoMap.put("address", souSuoSort[i]);
}else if("phone".equals(souSuoSort[i])){
souSuoMap.put("phone", souSuoSort[i]);
}else if("remark".equals(souSuoSort[i])){
souSuoMap.put("remark", souSuoSort[i]);
}
}
//将搜索的条件，和要搜索的内容去数据库中查找数据
List<Map<String,Object>> customerList = customerService.souSuo(souSuoMap);
Map<String,Object> result = new HashMap<String,Object>();
result.put("customerList", customerList);
System.err.println(customerList);
response.setCharacterEncoding("UTF-8");
this.writeJSON(response, result);
}
/**
* 分页，根据页面的点击事件进行分页查询
* */
@RequestMapping("fenYe")
public void fenYe(HttpServletRequest request,HttpServletResponse response) throws IOException, ParseException{
//获取页面传过来的值
Integer page = Integer.valueOf(request.getParameter("fenYe"));
Integer begin = (page - 1) * 12;
System.err.println(page);
Map<String, Object> data = new HashMap<String,Object>();
data.put("begin", begin);
data.put("num", 12);
List<Map<String,Object>> customerList = customerService.fenYe(data);
Map<String,Object> result = new HashMap<String,Object>();
result.put("customerList", customerList);
System.err.println(customerList);
response.setCharacterEncoding("UTF-8");
this.writeJSON(response, result);
}
}
customerServiceImpl.java(全部)
package org.jsoft.service.impl;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import org.jsoft.dao.DaoSupport;
import org.jsoft.service.ICustomerService;
import org.jsoft.util.Constants;
import org.springframework.stereotype.Service;
@Service
public class CustomerServiceImpl implements ICustomerService{
@Resource(name = "daoSupport")
private DaoSupport dao;
//字典值转换成中文
public void dic(List<Map<String, Object>> list){
for(Map<String, Object> map : list){
//查询客户的source字段
map.get("source");
map.get("status");
//通过客户的source字段找到 缓存中对应的中文value；
Constants.sourceMap.get(map.get("source"));
Constants.statusMap.get(map.get("status"));
//把对应的中文放回Map中
map.put("sourceName", Constants.sourceMap.get(map.get("source")));
map.put("statusName", Constants.statusMap.get(map.get("status")));
}
}
@SuppressWarnings("unchecked")
@Override
public List<Map<String, Object>> select() {
try {
List<Map<String, Object>> list = dao.findList("customerMapper.selectCAndS", null);
for(Map<String, Object> map : list){
//查询客户的source字段
map.get("source");
map.get("status");
//通过客户的source字段找到 缓存中对应的中文value；
Constants.sourceMap.get(map.get("source"));
Constants.statusMap.get(map.get("status"));
//把对应的中文放回Map中
map.put("sourceName", Constants.sourceMap.get(map.get("source")));
map.put("statusName", Constants.statusMap.get(map.get("status")));
}
return list;
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
@SuppressWarnings("unchecked")
@Override
public List<Map<String, Object>> shaiXuan(Map<String, Object> customer) {
try {
List<Map<String, Object>> list = dao.findList("customerMapper.selectCAndS", customer);
for(Map<String, Object> map : list){
//查询客户的source字段
map.get("source");
map.get("status");
//通过客户的source字段找到 缓存中对应的中文value；
Constants.sourceMap.get(map.get("source"));
Constants.statusMap.get(map.get("status"));
//把对应的中文放回Map中
map.put("sourceName", Constants.sourceMap.get(map.get("source")));
map.put("statusName", Constants.statusMap.get(map.get("status")));
}
return list;
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
@Override
public void delete(String[] arr) {
try {
dao.delete("customerMapper.batchDelete", arr);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
@Override
public void save(Map<String, Object> customer) {
try {
dao.save("customerMapper.insert", customer);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
@SuppressWarnings("unchecked")
@Override
public List<Map<String, Object>> orderBy(int i){
List<Map<String, Object>> list = null;
if(i == 1){
try {
list = dao.findList("customerMapper.telTimeAsc", null);
dic(list);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}else if(i == 2){
try {
list = dao.findList("customerMapper.telTimeDesc", null);
dic(list);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}else if(i == 3){
try {
list = dao.findList("customerMapper.estimateTimeAsc", null);
dic(list);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}else if(i == 4){
try {
list = dao.findList("customerMapper.estimateTimeDesc", null);
dic(list);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return list;
}
@Override
@SuppressWarnings("unchecked")
public List<Map<String, Object>> souSuo(Map<String, Object> customer) {
try {
List<Map<String, Object>> list = dao.findList("customerMapper.souSuo", customer);
dic(list);
return list;
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
//查询出数据库中有多少条数据
@Override
public Integer count(){
try {
return (Integer) dao.findOne("customerMapper.count", null);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return 0;
}
//分页查询
@SuppressWarnings("unchecked")
public List<Map<String, Object>> fenYe(Map<String, Object> customer) {
try {
List<Map<String, Object>> list = dao.findList("customerMapper.fenYe", customer);
dic(list);
return list;
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}
customerMapper.xml(全部)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace = "customerMapper">
<insert id="insert" parameterType="map">
insert into customer (name,source,status,sysUserId,telTime,estimateTime,money,address,phone,remark,file) values(#{name},#{source},#{status},#{sysUserId},#{telTime},#{estimateTime},#{money},#{address},#{phone},#{remark},#{file})
</insert>
<!-- jsp：jstl标签 -->
<!-- 批量删除，ognl标签 -->
<delete id="batchDelete" parameterType="object[]">
delete from customer where id in
<foreach collection="array" item="it" open="(" separator="," close=")">
#{it}
</foreach>
</delete>
<delete id="delete">
delete from customer where id = #{id}
</delete>
<!-- ognl的if标签 -->
<!-- <set>标签处理多出来的逗号“,”，注意：逗号“,”一定要放在后面 -->
<update id="update" parameterType="map">
update customer
<set>
<if test="id!=null">
id=#{id},
</if>
<if test="name!=null">
name=#{name},
</if>
<if test="source!=null">
source=#{source},
</if>
<if test="status!=null">
status=#{status},
</if>
<if test="sysUserId!=null">
sysUserId=#{sysUserId},
</if>
<if test="telTime!=null">
telTime=#{telTime},
</if>
<if test="estimateTime!=null">
estimateTime=#{estimateTime},
</if>
<if test="money!=null">
money=#{money},
</if>
<if test="address!=null">
address=#{address},
</if>
<if test="phone!=null">
phone=#{phone},
</if>
<if test="remark!=null">
remark=#{remark},
</if>
<if test="file!=null">
file=#{file},
</if>
<if test="remark1!=null">
remark1=#{remark1},
</if>
</set>
where
id=#{id}
</update>
<select id = "select" resultType = "map">
select * from customer
<where>
<if test = "id != null">
AND id like #{id}
</if>
<if test = "name != null">
AND name like #{name}
</if>
<if test = "source != null">
AND source like #{source}
</if>
<if test = "status != null">
AND status like #{status}
</if>
<if test = "sysUserId != null">
AND sysUserId like #{sysUserId}
</if>
<if test = "telTime != null">
AND telTime like #{telTime}
</if>
<if test = "estimateTime != null">
AND estimateTime like #{estimateTime}
</if>
<if test = "money != null">
AND money like #{money}
</if>
<if test = "address != null">
AND address like #{address}
</if>
<if test = "phone != null">
AND phone like #{phone}
</if>
<if test = "remark != null">
AND remark like #{remark}
</if>
<if test = "file != null">
AND file like #{file}
</if>
<if test = "remark1 != null">
AND remark1 like #{remark1 }
</if>
</where>
</select>
<select id = "selectCAndS" resultType = "map">
select c.*,s.name sname from customer c,sysUser s where c.sysUserId = s.id
<if test = "id != null">
AND id like #{id}
</if>
<if test = "name != null">
AND name like #{name}
</if>
<if test = "source != null">
AND source like #{source}
</if>
<if test = "status != null">
AND status like #{status}
</if>
<if test = "sysUserId != null">
AND sysUserId like #{sysUserId}
</if>
<if test = "telTime != null">
AND telTime like #{telTime}
</if>
<if test = "estimateTime != null">
AND estimateTime like #{estimateTime}
</if>
<if test = "money != null">
AND money like #{money}
</if>
<if test = "address != null">
AND address like #{address}
</if>
<if test = "phone != null">
AND phone like #{phone}
</if>
<if test = "remark != null">
AND remark like #{remark}
</if>
<if test = "file != null">
AND file like #{file}
</if>
<if test = "remark1 != null">
AND remark1 like #{remark1 }
</if>
</select>
<select id = "telTimeAsc" resultType = "map">
select c.*,s.name sname from customer c,sysUser s where c.sysUserId = s.id ORDER BY telTime
</select>
<select id = "telTimeDesc" resultType = "map">
select c.*,s.name sname from customer c,sysUser s where c.sysUserId = s.id ORDER BY telTime DESC
</select>
<select id = "estimateTimeAsc" resultType = "map">
select c.*,s.name sname from customer c,sysUser s where c.sysUserId = s.id ORDER BY estimateTime
</select>
<select id = "estimateTimeDesc" resultType = "map">
select c.*,s.name sname from customer c,sysUser s where c.sysUserId = s.id ORDER BY estimateTime DESC
</select>
<select id="souSuo" resultType = "map">
select * from
(select c.*, s.name sname from customer c,sysuser s where c.sysUserId=s.id ) a where
<if test = "name != null">
(name like '%${souSuo}%')
</if>
<if test = "telTime != null">
or (telTime like '%${souSuo}%')
</if>
<if test = "estimateTime != null">
or (estimateTime like '%${souSuo}%')
</if>
<if test = "money != null">
or (money like '%${souSuo}%')
</if>
<if test = "address != null">
or (address like '%${souSuo}%')
</if>
<if test = "phone != null">
or (phone like '%${souSuo}%')
</if>
<if test = "remark != null">
or (remark like '%${souSuo}%')
</if>
<if test = "sname != null">
or (sname like '%${souSuo}%')
</if>
</select>
<select id="count" resultType = "Integer">
SELECT count(*) c from customer
</select>
<select id="fenYe" resultType = "map">
select c.*,s.name sname from customer c,sysUser s where c.sysUserId = s.id limit ${begin },${num }
</select>
</mapper>总结
1.选择字段排序，按条件搜索，分页，文件上传的功能都完成
2.选择字段排序可以只选择一个字段进行排序，但仍存在一些问题，有时页面查不到
3.文件上传时在ajax中添加了data，而且使用json方式写进去的，后台就能查到
4.分页时，点击超链接跳到一个点击事件，虽然不难，但也坑了好久
5.SSM版本的云表格终于写完了，遇到超多超多问题，呃。。。真的是超多，刚开始的时候真是闹心闹心了很久很久，在老师的帮助下终于慢慢的摸到了一些技巧，找到了一些方法，才能磕磕绊绊的写完云表格，好开心，不知道下一个到手的项目是什么？有着怎样的挑战，加油！！！！我一定OK哒
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
