3. 客户添加
3.1.页面
customer_manage.jsp
- 设计一个工具条：
datagrid有一个属性叫toolbar，可以用来添加一个工具条：
在table标签下一行写：
<!-- 工具条 -->
<div id="tb">
<a id="addBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
<a id="editBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
<a id="deleteBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
</div>
在 datagrid 上面绑定：
在显示分页的下一行写：
toolbar:"#tb"
运行，显示如下：
点击添加按钮输入信息，所以接下来要设计一个录入窗口
- 设计一个录入窗口
easyUI有一个window组件
在工具条下面添加：
<!-- 编辑窗口 -->
<div id="win" class="easyui-window" title="客户数据编辑" style="width:500px;height:300px"
data-options="iconCls:'icon-save',modal:true,closed:true">
<form id="editForm" method="post">
<%--提供id隐藏域 --%>
<input type="hidden" name="id">
客户姓名：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/><br/>
客户性别：
<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="女"/>女
<br/>
客户手机：<input type="text" name="telephone" class="easyui-validatebox" data-options="required:true"/><br/>
客户住址：<input type="text" name="address" class="easyui-validatebox" data-options="required:true"/><br/>
<a id="saveBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
</form>
</div>
<a id="saveBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
这一行是把保存的按钮改成easyUI的样式
为了校验输入项，使用easyUI的validatebox组件，设置属性为必填（data-options="required:true"）
设置窗口属性（closed:true），这样子才不会一打开客户管理页面就弹出窗口，
- 点击按钮，打开窗口
然后要给添加按钮绑定点击事件
//打开编辑窗口
$("#addBtn").click(function(){
$("#win").window("open");
});
- 提交表单数据
提交数据用的是easyUI的一个submit函数，这个函数要传递的三个参数：url、onSubmit、success
给保存按钮设置点击事件，给编辑窗口那里的表单设置一个id：editForm，在保存按钮的保存数据操作那里，拿到这个表单调用submit方法，给上三个参数，
在onSubmit里验证，使用validate方法进行验证
//保存数据
$("#saveBtn").click(function(){
$("#editForm").form("submit",{
//url: 提交到后台的地址
url:"customer/save.action",
//onSubmit: 表单提交前的回调函数，true：提交表单 false：不提交表单
onSubmit:function(){
//判断表单的验证是否都通过了
return $("#editForm").form("validate");
},
//success:服务器执行完毕回调函数
success:function(data){ //data: 服务器返回的数据，类型字符串类
//要求Controller返回的数据格式：
//成功：{success:true} 失败:{success:false,msg:错误信息}
//把data字符串类型转换对象类型
data = eval("("+data+")");
if(data.success){
//关闭窗口
$("#win").window("close");
//刷新datagrid
$("#list").datagrid("reload");
$.messager.alert("提示","保存成功","info");
}else{
$.messager.alert("提示","保存失败："+data.msg,"error");
}
}
});
});
3.2.Controller
Controller要提供一个save方法，来接收数据（对应上面的url:"customer/save.action",）
CustomerController.java
/**
* 保存数据
*/
@RequestMapping("/save")
@ResponseBody
public Map<String,Object> save(Customer customer){
try {
customerService.save(customer);
result.put("success", true);
} catch (Exception e) {
e.printStackTrace();
result.put("success", false);
result.put("msg", e.getMessage());
}
return result;
}
3.3.Service
要求Service生成一个save方法
接口：
CustomerService.java：
public void save(Customer customer);
实现：
CustomerServiceImpl.java
public void save(Customer customer) {
customerMapper.save(customer);
}
3.4.Mapper
CustomerMapper.java：
package cn.sm1234.dao;
import java.util.List;
import cn.sm1234.domain.Customer;
public interface CustomerMapper {
/**
* 查询所有数据
*/
public List<Customer> findAl();
/**
* 保存数据
* @param customer
*/
public void save(Customer customer);
}
但这样子这个方法还是不能执行的，要补充sql的映射文件
3.5.sql 映射文件
CustomerMapper.xml：
<!-- 添加客户 -->
<insert id="save" parameterType="cn.sm1234.domain.Customer">
INSERT INTO ssm.t_customer
(
NAME,
gender,
telephone,
address
)
VALUES
(
#{name},
#{gender},
#{telephone},
#{address}
)
</insert>
insert语句还是从数据库那边生成粘贴过来
到这里保存数据的功能就搞定了，但是我们提交之后没有提示，没有自动返回数据页面，数据也没有刷新，所以再优化一下：
在保存之后要设置关闭窗口、刷新datagrid（代码上面给了）
重新运行，填写数据，提交，提示保存成功：
点击确定之后可以看到新添加的数据：
然后再优化一下，每次打开编辑窗口，清空一下上一次填写的数据
4. 客户修改的数据回显
4.1.页面
customer_manage.jsp
//修改数据
$("#editBtn").click(function(){
//判断只能选择一行
var rows = $("#list").datagrid("getSelections");
if(rows.length!=1){
$.messager.alert("提示","修改操作只能选择一行","warning");
return;
}
//表单回显
$("#editForm").form("load","customer/findById.action?id="+rows[0].id);
$("#win").window("open");
});
4.2.Controller
需要有一个方法去查询对象的数据，起名为findById
CustomerController.java
/**
* 根据id 查询对象
*/
@RequestMapping("/findById")
@ResponseBody
public Customer findById(Integer id){
Customer cust = customerService.findById(id);
return cust;
}
4.3.Service
Service这边需要一个方法来查询数据
接口：
CustomerService.java
public Customer findById(Integer id);
实现：（调用mapper接口的方法进行查询）
CustomerServiceImpl.java
public Customer findById(Integer id) {
return customerMapper.findById(id);
}
4.4.Mapper
完成mapper接口的方法，这个方法要提供sql语句
CustomerMapper.java
/**
* 根据id 查询对象
* @param id
* @return
*/
public Customer findById(Integer id);
4.5.sql 映射文件
所以在映射文件为这个方法添加相应的sql语句
CustomerMapper.xml
<!-- 根据id查询对象 -->
<select id="findById" parameterType="int" resultType="cn.sm1234.domain.Customer">
SELECT id,
NAME,
gender,
telephone,
address
FROM
ssm.t_customer
where id = #{value}
</select>
parameterType="int"表示参数是整型
到此完成数据的回显功能，选中一条数据，点击修改，会弹出窗口显示当前数据
5. 客户修改的更新保存
我们这里添加和修改都是用同一个表单，保存也是用同一个按钮，所以保存逻辑是同一套，那么关键就是要区分什么时候是修改，什么时候是添加
这里的方法是在页面上，在表单里要给后台提供一个id，用id来识别是添加还是修改
5.1.页面
在编辑窗口那里增加一个id隐藏域
customer_manage.jsp
<%--提供id隐藏域 --%>
<input type="hidden" name="id">
5.2.Controller
无改变
5.3.Service
CustomerServiceImpl.java
public void save(Customer customer) {
//判断是添加还是修改
if(customer.getId()!=null){
//修改
customerMapper.update(customer);
}else{
//增加
customerMapper.save(customer);
}
}
然后这个业务要在mapper那里提供一个方法
5.4.Mapper
CustomerMapper.java
/**
* 修改对象数据
* @param customer
*/
public void update(Customer customer);
5.5.sql 映射文件
CustomerMapper.xml
<!-- 根据id修改数据 -->
<update id="update" parameterType="cn.sm1234.domain.Customer">
UPDATE ssm.t_customer
SET
NAME = #{name} ,
gender = #{gender} ,
telephone = #{telephone} ,
address = #{address}
WHERE
id = #{id}
</update>
从数据库粘贴过来的update语句
到此，修改功能完成，重新运行试一下：
提示保存成功，小美的名字改成小芳
再试一下添加：
也没有问题，没有被影响到
6. 客户删除
这里想实现批量删除
6.1.页面
页面上的关键点是怎么拿到所选择的id 的值，然后传到后台
要去绑定删除按钮，设置点击事件：
判断是否已选择记录（长度==0就是有问题），要给提示，至少选择一行
给一个提示性操作，确认提示框，确认是否删除
customer_manage.jsp
//删除
$("#deleteBtn").click(function(){
var rows =$("#list").datagrid("getSelections");
if(rows.length==0){
$.messager.alert("提示","删除操作至少选择一行","warning");
return;
}
//格式： id=1&id=2&id=3
$.messager.confirm("提示","确认删除数据吗?",function(value){
if(value){
var idStr = "";
//遍历数据
$(rows).each(function(i){
idStr+=("id="+rows[i].id+"&");
});
idStr = idStr.substring(0,idStr.length-1);
//传递到后台
$.post("customer/delete.action",idStr,function(data){
if(data.success){
//刷新datagrid
$("#list").datagrid("reload");
$.messager.alert("提示","删除成功","info");
}else{
$.messager.alert("提示","删除失败："+data.msg,"error");
}
},"json");
}
});
});
6.2.Controller
CustomerController.java
/**
* 删除数据
*/
@RequestMapping("/delete")
@ResponseBody
public Map<String,Object> delete(Integer[] id){
try {
customerService.delete(id);
result.put("success", true);
} catch (Exception e) {
e.printStackTrace();
result.put("success", false);
result.put("msg", e.getMessage());
}
return result;
}
6.3.Service
接口：
CustomerService.java
public void delete(Integer[] id);
实现：
CustomerServiceImpl.java
public void delete(Integer[] id) {
customerMapper.delete(id);
}
6.4.Mapper
CustomerMapper.java
/**
* 删除数据
* @param id
*/
public void delete(Integer[] id);
6.5.sql 映射文件
CustomerMapper.xml
<!-- 删除 -->
<delete id="delete" parameterType="Integer[]">
DELETE FROM ssm.t_customer
<where>
id
<foreach collection="array" item="id" open="in (" close=")" separator=",">
#{id}
</foreach>
</where>
</delete>
parameterType是Integer数组，
从数据库那边生成删除语句粘贴过来
但我们这里要完成的是批量删除
所以要对这个sql删除语句进行修改
用一个where标签，里面我们想实现的是类似 id in (1,2,3) 这样子的语句，其中1,2,3是id值，
所以where里面用一个foreach标签做一个遍历，
collection代表CustomerMapper.java的delete方法传过来的参数，但是这里不写参数名字，写array，
item代表待会儿传过来的每个id的值，这里就叫id
open、close代表开始、结束的位置，我们这里就是以in (开始，以)结束
separator是分隔符，这里的分隔符是,
里面通过#{} 取id的值，是通过array里面取出的每个元素的值
到此删除功能完成，重新运行，可以实现单条删除和批量删除
整个项目完成，附上源码（教程视频还是上一个的教程）：
链接：https://pan.baidu.com/s/1wUuPS4pC8-nbARAxhmtqTg
提取码：rzec
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
