easyUI快速入门第十讲——SSH+MySQL+easyUI实现CRM系统中客户管理模块的CRUD操作（四）

小鱼儿 2023-05-29 03:52 12阅读 0赞

# 实现客户管理模块中修改客户的功能 #

## 点击修改超链接，在修改客户的窗口中回显客户信息 ##

首先，我们应该修改数据表格上每一行记录最后一列的修改超链接，当我们点击了该修改超链接之后，要能弹出一个修改客户的窗口，该窗口里面应放置一个修改客户的表单，显然一开始该窗口默认是隐藏的，效果如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]  
实现这样的需求的思路应该是这样的：第一，在customer.html页面中添加一个修改客户的窗口，在窗口里面放置一个修改客户的表单，并且该窗口默认要是隐藏的；第二，点击修改超链接，要能弹出该窗口。按照这样的思路，我们就要将customer.html页面中的内容修改成下面这个样子了。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    <link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript"> $(function() { //页面加载完成后，创建数据表格datagrid $('#dg').datagrid({ //指定数据表格发送Ajax请求的地址 url:'customer_findAll.action', //定义标题行所有的列，注意这是一个二维数组 columns:[[ //像field、title等就是列属性 { field:'cust_name',title:'客户名称',width:100}, { field:'cust_source',title:'客户来源',width:100}, { field:'cust_level',title:'客户级别',width:100}, { field:'cust_industry',title:'客户所属行业',width:100}, { field:'cust_phone',title:'客户固定电话',width:100}, { field:'cust_mobile',title:'客户移动电话',width:100}, //row参数代表的是一行记录数据 { field:'xxxx',title:'操作',width:100,formatter:function(value,row,index){ return "<a href='#' οnclick='edit(" + row.cust_id + ")'>修改</a> | <a href='#' οnclick='del(" + row.cust_id + ")'>删除</a>"; } } ]], //显示斑马线效果，即数据表格中一行显示白色，一行显示浅灰色 striped:true, //显示分页工具栏（分页工具栏默认显示的是英文，但我们想显示中文，那么该怎么办呢？得引入locale目录下的easyui-lang-zh_CN.js文件） pagination:true, //分页工具栏显示的位置，默认就是在datagrid控件底部显示分页工具栏 pagePosition:"bottom", //初始化页数，即一开始显示第几页的东东 pageNumber:1, //每页显示多少条记录 pageSize:3, //下拉列表里面写什么（在分页显示时，可以选择每页显示的记录数） pageList:[3,5,10], toolbar: [{ iconCls: 'icon-add', //点击以上+这个小图标，就能触发下面这个函数，在该函数中，打开隐藏的添加客户窗口 handler: function() { $('#winAdd').window('open'); } }] }); }); function save() { //1. 提交数据到Action $('#formAdd').form('submit', { //指定发送Ajax请求的地址，例如customer_save.action url:"customer_save.action", //表单提交成功之后（即保存客户成功），执行的函数 success:function(data){ //2. 保存客户成功之后，是不是应该用一个普通的消息展示窗口提示一下保存客户成功的消息呢？ //eval()全局函数：计算JavaScript字符串，并把它作为脚本代码来执行。也即把一个普通的字符串转成一个JSON对象 var jsonData = eval("(" + data + ")"); //在屏幕右下角显示一个普通的消息展示窗口，并且3秒自动滑出，即窗口消失 $.messager.show({ title:'提示消息', msg:jsonData.msg, timeout:3000, showType:'slide' }); //3. 关闭添加客户的窗口 $("#winAdd").window("close"); //4. 重新加载数据表格 $("#dg").datagrid("reload"); } }); } function edit(cust_id) { //1. 打开隐藏的修改客户的窗口 $("#winUpdate").window("open"); } function del(cust_id) { //1. 点击数据表格中每条记录最后一列的删除超链接时，最好是能弹出一个确认是否删除的窗口 $.messager.confirm('确认','您确认想要删除记录吗？',function(r){ if(r) { //2. 已经确认要删除记录了，那么就向后台发送一个post请求，执行删除客户的操作 $.post("customer_delete.action", { "cust_id":cust_id}, function(data) { //var jsonData = eval("(" + data + ")"); //在屏幕右下角显示一个普通的消息展示窗口，并且3秒自动滑出，即窗口消失 $.messager.show({ title:'提示消息', msg:data.msg, timeout:3000, showType:'slide' }); //3. 重新加载数据表格 $("#dg").datagrid("reload"); }, "json"); } }); } </script>
    </head>
    <body>
    	<table id="dg"></table>
    	
    	
    	<div id="winAdd" class="easyui-window" title="添加客户" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true,closed:true"> 
            <form id="formAdd" method="post">
    			<TABLE cellSpacing=0 cellPadding=5 border=0>
    			<TR>
    				<td>客户名称：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_name">
    				</td>
    				<td>客户级别 ：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_level">
    				</td>
    			</TR>
    			
    			<TR>
    				<td>信息来源 ：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_source">
    				</td>
    				<td>客户行业：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_industry">
    				</td>
    			</TR>
    			
    			<TR>
    				<td>固定电话 ：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_phone">
    			</td>
    			<td>移动电话 ：</td>
    			<td>
    				<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_mobile">
    					</td>
    				</TR>
    				
    				<tr>
    					<td rowspan=2>
    						<button id="customerBtn" type="button" onclick="save()">保存</button>
    					</td>
    				</tr>
    			</TABLE>   
    		</form>
    	</div>
    	
    	
    	<div id="winUpdate" class="easyui-window" title="修改客户" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true,closed:true"> 
            <form id="formUpdate" method="post">
    			<TABLE cellSpacing=0 cellPadding=5 border=0>
    			<TR>
    				<td>客户名称：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_name">
    				</td>
    				<td>客户级别 ：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_level">
    				</td>
    			</TR>
    			
    			<TR>
    				<td>信息来源 ：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_source">
    				</td>
    				<td>客户行业：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_industry">
    				</td>
    			</TR>
    			
    			<TR>
    				<td>固定电话 ：</td>
    				<td>
    					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_phone">
    			</td>
    			<td>移动电话 ：</td>
    			<td>
    				<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_mobile">
    					</td>
    				</TR>
    				
    				<tr>
    					<td rowspan=2>
    						<button id="customerBtn" type="button" onclick="update()">保存</button>
    					</td>
    				</tr>
    			</TABLE>   
    		</form>
    	</div>
    </body>
    </html>

打开隐藏的修改客户的窗口之后，是不是应该在该窗口中回显客户的信息呢？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]  
要想实现这样的需求，就得用到form（表单）组件中的load方法了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]  
这时，点击修改超链接所触发的edit方法便要修改成下面这个样子了。  
![在这里插入图片描述][20191104114620883.png]  
然后，我们就要在CustomerAction类中编写一个根据客户ID查询客户信息的方法了。根据客户ID查询出来客户对象后，需要在修改客户的窗口中回显客户对象中携带的数据。

public String findById() throws IOException { 
        customer = customerService.findById(customer.getCust_id());
        JSONObject jsonObject = JSONObject.fromObject(customer);
        ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");
        ServletActionContext.getResponse().getWriter().println(jsonObject.toString());
        return NONE;
    }

此时，后台响应回前台的具体的数据格式应该是下面这样子的。

{ 
    	"cust_id": 2,
    	"cust_industry": "军事行业",
    	"cust_level": "军人",
    	"cust_mobile": "321",
    	"cust_name": "李云龙",
    	"cust_phone": "123",
    	"cust_source": "李家庄"
    }

根据form（表单）组件中的load方法中的代码示例可知，似乎能将以上JSON对象格式的数据填充到修改客户窗口的表单中，到底是不是这样呢？一试便知嘛！  
![在这里插入图片描述][20191104114638155.gif]  
至此，点击修改超链接，在修改客户的窗口中回显客户信息这个功能，我们便算是实现了。

## 编写代码实现修改客户的功能 ##

在修改客户的窗口中回显客户信息后，接下来，我们就要正式编写代码实现修改客户的功能了。

### 编写web层 ###

首先，我们要在修改客户窗口的表单中添加一个隐藏字段，即客户ID，在将表单提交到服务端时，也要将表单中隐藏的客户ID给传递过去。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]  
然后，在customer.html页面编写一个update方法。怎么写出来的，不用我在这儿瞎逼逼了吧！既然你都会保存客户了，难道这个update方法还会写不出来？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 4]  
接着，我们就要在CustomerAction类中编写一个修改客户的方法了。

public String update() throws IOException { 
        Map<String, String> map = new HashMap<String, String>();
        try { 
            customerService.update(customer);
            map.put("msg", "修改客户成功！");
        } catch (Exception e) { 
            e.printStackTrace();
            map.put("msg", "修改客户失败！");
        }
        JSONObject jsonObject = JSONObject.fromObject(map);
        ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");
        ServletActionContext.getResponse().getWriter().println(jsonObject.toString());
        return NONE;
    }

在编写以上update方法的过程中，或许你会遇到这样一个问题，后台修改客户无论是成功还是失败，在前台都要获取响应数据，因为你总该知道修改客户是成功还是失败吧！具体的响应数据的格式应该是怎样的呢？

*  后台修改客户成功，一个典型的响应数据格式应如下：
    
        { "msg":"修改客户成功！"}
 *  后台修改客户失败，一个典型的响应数据格式应如下：
    
        { "msg":"修改客户失败！"}

知道了后台响应回前台的具体的数据格式，那么我们就可以构建一个Map集合，再使用JSONObject类将其转成一个JSON对象格式的数据了。现在，你该明白update方法为什么要像上面那样写了吧！

### 编写service层 ###

首先，在CustomerService接口中添加一个修改客户的方法声明，如下：

package com.meimeixia.crm.service;
    
    import org.hibernate.criterion.DetachedCriteria;
    
    import com.meimeixia.crm.domain.Customer;
    import com.meimeixia.crm.domain.PageBean;
    
    public interface CustomerService { 
    
    	PageBean<Customer> findByPage(DetachedCriteria detachedCriteria, Integer page, Integer rows);
    
    	void save(Customer customer);
    
    	Customer findById(Long cust_id);
    	
    	void delete(Customer customer);
    
    	void update(Customer customer);
    
    }

然后，在以上接口的一个实现类（CustomerServiceImpl.java）中实现修改客户的方法。

package com.meimeixia.crm.service.impl;
    
    import java.util.List;
    
    import org.hibernate.criterion.DetachedCriteria;
    import org.springframework.transaction.annotation.Transactional;
    
    import com.meimeixia.crm.dao.CustomerDao;
    import com.meimeixia.crm.domain.Customer;
    import com.meimeixia.crm.domain.PageBean;
    import com.meimeixia.crm.service.CustomerService;
    
    @Transactional
    public class CustomerServiceImpl implements CustomerService { 
    	
    	private CustomerDao customerDao;
    
    	public void setCustomerDao(CustomerDao customerDao) { 
    		this.customerDao = customerDao;
    	}
    
    	@Override
    	public PageBean<Customer> findByPage(DetachedCriteria detachedCriteria, Integer page, Integer rows) { 
    		PageBean<Customer> pageBean = new PageBean<Customer>();
    		pageBean.setCurrentPage(page);
    		pageBean.setPageSize(rows);
    		Integer totalCount = customerDao.findCount(detachedCriteria);
    		pageBean.setTotalCount(totalCount);
    		double tc = totalCount;
    		Double num = Math.ceil(tc / rows);
    		pageBean.setTotalPage(num.intValue());
    		Integer begin = (page - 1) * rows;
    		List<Customer> list = customerDao.findByPage(detachedCriteria, begin, rows);
    		pageBean.setList(list);
    		return pageBean;
    	}
    
    	@Override
    	public void save(Customer customer) { 
    		customerDao.save(customer);
    	}
    
    	@Override
    	public Customer findById(Long cust_id) { 
    		return customerDao.findById(cust_id);
    	}
    	
    	@Override
    	public void delete(Customer customer) { 
    		customerDao.delete(customer);
    	}
    
    	@Override
    	public void update(Customer customer) { 
    		customerDao.update(customer);
    	}
    }

### 编写dao层 ###

首先，在CustomerDao接口中添加一个修改客户的方法声明，如下：

package com.meimeixia.crm.dao;
    
    import java.util.List;
    
    import org.hibernate.criterion.DetachedCriteria;
    
    import com.meimeixia.crm.domain.Customer;
    
    public interface CustomerDao { 
    
    	Integer findCount(DetachedCriteria detachedCriteria);
    
    	List<Customer> findByPage(DetachedCriteria detachedCriteria, Integer begin, Integer rows);
    
    	void save(Customer customer);
    
    	Customer findById(Long cust_id);
    
    	void delete(Customer customer);
    
    	void update(Customer customer);
    }

然后，在以上接口的一个实现类（CustomerDaoImpl.java）中实现修改客户的方法。

package com.meimeixia.crm.dao.impl;
    
    import java.util.List;
    
    import org.hibernate.criterion.DetachedCriteria;
    import org.hibernate.criterion.Projections;
    import org.springframework.orm.hibernate5.support.HibernateDaoSupport;
    
    import com.meimeixia.crm.dao.CustomerDao;
    import com.meimeixia.crm.domain.Customer;
    
    public class CustomerDaoImpl extends HibernateDaoSupport implements CustomerDao { 
    
    	@Override
    	public Integer findCount(DetachedCriteria detachedCriteria) { 
    		detachedCriteria.setProjection(Projections.rowCount());
    		List<Long> list = (List<Long>) this.getHibernateTemplate().findByCriteria(detachedCriteria);
    		if (list.size() > 0) { 
    			return list.get(0).intValue();
    		}
    		return null;
    	}
    
    	@Override
    	public List<Customer> findByPage(DetachedCriteria detachedCriteria, Integer begin, Integer rows) { 
    		detachedCriteria.setProjection(null);
    		return (List<Customer>) this.getHibernateTemplate().findByCriteria(detachedCriteria, begin, rows);
    	}
    
    	@Override
    	public void save(Customer customer) { 
    		this.getHibernateTemplate().save(customer);
    	}
    
    	@Override
    	public Customer findById(Long cust_id) { 
    		return this.getHibernateTemplate().get(Customer.class, cust_id);
    	}
    	
    	@Override
    	public void delete(Customer customer) { 
    		this.getHibernateTemplate().delete(customer);
    	}
    
    	@Override
    	public void update(Customer customer) { 
    		this.getHibernateTemplate().update(customer);
    	}
    
    }

至此，客户管理模块中修改客户的功能，我们就已经实现了，至于测试的话，我就不再这里测试了（偷懒了），反正是好使的！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104114553252.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191104114605490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191104114613577.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70
[20191104114620883.png]: https://img-blog.csdnimg.cn/20191104114620883.png
[20191104114638155.gif]: https://img-blog.csdnimg.cn/20191104114638155.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191104121212420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191104121220376.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70