客户开发计划增删改查，js分析
6.4、客户开发计划增删改查，js分析
由于客户开发计划查询中日期是毫秒数，所以手动转换一下日期格式，转json
//导入阿里依赖
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.46</version>
</dependency>
@ResponseBody：有两个作用
1.把你返回值转成json
2.通过response对应的out对象把数据返回给前台
但是我们要手动转，所以我们就不用@ResponseBody这个注解，把@RestController拆开
DevPlanController
手动改1：结果跟之前一样
@Controller
@RequestMapping("cusDevPlan")
public class DevPlanController {
@Autowired
private IDevPlanService devPlanService;
//restFul处理
@GetMapping("{SaleChanceId}")
public void list(@PathVariable int SaleChanceId, HttpServletResponse response) throws IOException {
//jackson:Spring MVC默认的 gson:谷歌的 jsonlib:民间大神的 fastjson:阿里的
DatagridResult datagridResult = devPlanService.selectPlanSaleChanceId(SaleChanceId);
//通过fastjson转换json
String jsonString = JSON.toJSONString(datagridResult);
//通过out对象响应给前台
response.getWriter().print(jsonString);
}
}
通过fastjson转换json
JSON.toJSONStringWithDateFormat(datagridResult,"yyyy-MM-dd");
//通过out对象响应给前台
response.getWriter().print(jsonString);
//后台日期格式没问题返回给前台数据出现乱码可修改response编码方式
response.setContentType("text/json;charset=UTF-8");
手动改成功显示页面
DevPlanController
@Controller
@RequestMapping("cusDevPlan")
public class DevPlanController {
@Autowired
private IDevPlanService devPlanService;
//restFul处理
@GetMapping("{SaleChanceId}")
public void list(@PathVariable int SaleChanceId, HttpServletResponse response) throws IOException {
//后台日期格式没问题返回给前台数据出现乱码可修改response编码方式
response.setContentType("text/json;charset=UTF-8");
//jackson:Spring MVC默认的 gson:谷歌的 jsonlib:民间大神的 fastjson:阿里的
DatagridResult datagridResult = devPlanService.selectPlanSaleChanceId(SaleChanceId);
//通过fastjson转换json
String jsonString = JSON.toJSONStringWithDateFormat(datagridResult,"yyyy-MM-dd");
//通过out对象响应给前台
response.getWriter().print(jsonString);
}
}
6.4.1 restful风格请求四种请求方式
GET: 查询 POST: 新增 PUT: 修改 DELETE: 删除
普通请求 restful请求
GET/POST saleChance/findById?id=44 GET saleChance/44
POST saleChance/save POST saleChance
GET/POST saleChance/update?id=44 PUT saleChance/44
GET/POST saleChance/delete?id=44 DELETE saleChance/44
6.4.2 客户开发计划逻辑
1.查询
查询的条件为所有已经分配的销售机会state=1
修改controller代码：
if (devResultOrState == 1){
saleChance.setState(1);
}
if (devResultOrState == 0){
saleChance.setDevresult(0);
}
点击开发按钮：调用main.jsp中的openTab方法，传入url为cusdevplanitemManage?saleChanceId=xx，新增选项卡
在新的页面中，通过参数域把id取出来${param.saleChanceId}
直接在页面中通过$.post发送了findById?saleChanceId=xx请求
通过datagrid发送url，GET cusDevPlan/52
后台处理这两个异步请求即可。（销售计划的增删改查采用restFul请求风格）
restful风格请求
GET/POST saleChance/findById?id=45 GET saleChance/45
POST saleChance/save POST saleChance
GET/POST saleChance/update?id=45 PUT saleChance/45
GET/POST saleChance/delete?id=45 DELETE saleChance/45
2.dategrid按钮分析
添加计划： 调用自定义的addRow方法
第一次点： 新增一行，打开编辑状态并选中
dg.datagrid('appendRow', {isNewRecord: true});//添加一行，并添加isNewRecord属性并赋值为true
var rows = dg.datagrid('getRows');//获取所有的行
opts.editIndex = rows.length - 1;//将编辑索引设为最后一行的索引号
dg.datagrid('beginEdit', opts.editIndex);//打开编辑状态
dg.datagrid('selectRow', opts.editIndex);//选中编辑的行
继续点：没有任何效果，因为校验失败了
if (opts.editIndex >= 0) {//有正在编辑的行
if (!dg.datagrid('validateRow', opts.editIndex)) {//验证失败就选中当前编辑的行
dg.datagrid('selectRow', opts.editIndex);//选中编辑的行
return;
}
把数据都输进去，再点：又新增了一行
if (opts.editIndex >= 0) {
dg.datagrid('endEdit', opts.editIndex);//验证成功，结束opts.editIndex行编辑状态
}
dg.datagrid('appendRow', {isNewRecord: true});//添加一行，并添加isNewRecord属性并赋值为true
var rows = dg.datagrid('getRows');//获取所有的行
opts.editIndex = rows.length - 1;//将编辑索引设为最后一行的索引号
dg.datagrid('beginEdit', opts.editIndex);//打开编辑状态
dg.datagrid('selectRow', opts.editIndex);//选中编辑的行
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
当调用endEdit方法后，会触发onAfterEdit事件
onAfterEdit: function (index, row) {//结束编辑
opts.editIndex = undefined; //清空下标
var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl;//如果当前行为新增的行则url为新增
//如果当前行不为新增的行，则url设为更新的url
if (url == opts.updateUrl)
row._method = "PUT";//row对象添加_method属性为PUT 模拟put请求
if (url) {
$.post(url, row, function (data) {//发送ajax请求 row为结束编辑的行对应的json对象
data.isNewRecord = null;//给返回的json对象设置isNewRecourd属性
$(target).datagrid('updateRow', {
index: index,
row: data
});
新增和修改功能，后台要把最新的这一行的数据转换成json返回给前台，前台根据updateRow方法进行刷新前台显示效果
$.ajax({
type: "get/post",
data:
dataType:
url:
})
$.get()
$.post()
$.load()
6.5 客户开发计划（新增/保存）实现代码
小总结：
新增后台实现：
1.controller接收，给planDate加入@DateTimeFormat("yyyy-MM-dd")
将参数直接转换成json,通过out对象返回给前台即可
2.service插入数据库，并且修改逆向工程的插入的sql，加入查询主键通过查询主键的方式将插入数据的id检索出来赋值给参数的id属性
resultType：查询出来的数据类型
order:顺序，插入后before还是插入前after
keyProperty:赋值的参数的属性的名字
<selectKey resultType="int" order="AFTER" keyProperty="id">
select LAST_INSERT_ID()
</selectKey>
DevPlanController
@Controller
@RequestMapping("cusDevPlan")
public class DevPlanController {
@Autowired
private IDevPlanService devPlanService;
//restFul处理
@GetMapping("{SaleChanceId}")
public void list(@PathVariable int SaleChanceId, HttpServletResponse response) throws IOException {
//后台日期格式没问题返回给前台数据出现乱码可修改response编码方式
response.setContentType("text/json;charset=UTF-8");
//jackson:Spring MVC默认的 gson:谷歌的 jsonlib:民间大神的 fastjson:阿里的
DatagridResult datagridResult = devPlanService.selectPlanSaleChanceId(SaleChanceId);
//通过fastjson转换json
String jsonString = JSON.toJSONStringWithDateFormat(datagridResult,"yyyy-MM-dd");
//通过out对象响应给前台
response.getWriter().print(jsonString);
}
@PostMapping("{SaleChanceId}")
public void save(@PathVariable int SaleChanceId, TCusDevPlan cusDevPlan,HttpServletResponse response){
response.setContentType("text/json;charset=UTF-8");
cusDevPlan.setSalechanceid(SaleChanceId);
//插入数据库
try {
//service中使用查询主键将插入后的id直接赋值给参数
devPlanService.saveDevPlan(cusDevPlan);
String jsonString = JSON.toJSONStringWithDateFormat(cusDevPlan, "yyyy-MM-dd");
response.getWriter().print(jsonString);
}catch (Exception e){
e.printStackTrace();
System.out.println("有异常");
}
}
}
IDevPlanService
//插入销售计划 void saveDevPlan(TCusDevPlan cusDevPlan);
DevPlanServiceImpl
@Service
public class DevPlanServiceImpl implements IDevPlanService {
@Autowired
private TCusDevPlanMapper devPlanMapper;
@Override
public DatagridResult selectPlanSaleChanceId(int saleChanceId) {
TCusDevPlanExample example = new TCusDevPlanExample();
example.createCriteria().andSalechanceidEqualTo(saleChanceId);
List<TCusDevPlan> devPlanList = devPlanMapper.selectByExample(example);
DatagridResult datagridResult = new DatagridResult();
datagridResult.setRows(devPlanList);
return datagridResult;
}
@Override
public void saveDevPlan(TCusDevPlan cusDevPlan) {
devPlanMapper.insertSelective(cusDevPlan);
}
}
注意：service中使用查询主键将插入后的id直接赋值给参数，需要在mapper中修改sql语句
TCusDevPlanMapper（2-4行为新增的语句，其他的不变）
<insert id="insertSelective" parameterType="com.galaxy.crm.bean.TCusDevPlan" >
<selectKey resultType="int" order="AFTER" keyProperty="id" keyColumn="id">
SELECT LAST_INSERT_ID()
</selectKey>
insert into t_cus_dev_plan
<trim prefix="(" suffix=")" suffixOverrides="," >
<if test="id != null" >
id,
</if>
至此报400错误是因为bean中：
TCusDevPlan中需要在Date上添加注解
@DateTimeFormat(pattern = "yyyy-MM-dd") private Date plandate;
至此，新增/保存功能完成
6.6 客户开发计划（删除）实现代码
前台分析：
删除计划：
1.如果当前选中的是新增的行时，直接删除
点击触发destroyRow方法，
$.messager.confirm(opts.destroyMsg.confirm.title, opts.destroyMsg.confirm.msg, function (r) {
if (r) {//点击确定
var index = dg.datagrid('getRowIndex', row);//获取row的索引
if (row.isNewRecord) {//如果是新增的row
dg.datagrid('cancelEdit', index);//取消编辑
调用cancelEdit方法会触发onCancelEdit事件
onCancelEdit: function (index, row) {
opts.editIndex = undefined;
if (row.isNewRecord) {//当是新增的row时，删除当前行
$(this).datagrid('deleteRow', index);
}
2.当前选中的不是新增的行时
发送删除请求，加入_method:DELETE是模拟delete请求，返回{success:true/false}
else {
if (opts.destroyUrl) {//获取删除对应url
var idValue = row[opts.idField || 'id'];
$.post(opts.destroyUrl, {id: idValue,_method: 'DELETE'}, function (result) {
if (result.success){
$.messager.alert("系统提示","删除成功！");
}else{
$.messager.alert("系统提示","删除失败！");
return;
}
再看：从这个可以看出来（跟上边的不鸟）
$("#dg").edatagrid({
method: 'get',
url: '${pageContext.request.contextPath}/cusDevPlan/'+'${param.saleChanceId}',//
saveUrl: '${pageContext.request.contextPath}/cusDevPlan/'+'${param.saleChanceId}',
updateUrl: '${pageContext.request.contextPath}/cusDevPlan',
destroyUrl: '${pageContext.request.contextPath}/cusDevPlan'
});
});
6.61 删除销售计划代码来了
springMVC默认不支持PUT,DELETE请求
-
web.xml里配置请求过滤器
<!--配置PUT和 DELETE请求过滤器-->
<filter>
<filter-name>HiddenHttpMethodFilter</filter-name>
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>HiddenHttpMethodFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
代码来了DevPlanController
@DeleteMapping("")
@ResponseBody
public Map deleteRow(int id){
Map map = new HashMap();
try {
devPlanService.deleteDevPlanById(id);
map.put("success",true);
}catch (Exception e){
e.printStackTrace();
map.put("success",false);
}
return map;
}
IDevPlanService
//根据id删除销售计划 void deleteDevPlanById(int id);
DevPlanServiceImpl
@Override
public void deleteDevPlanById(int id) {
devPlanMapper.deleteByPrimaryKey(id);
}
至此根据id删除销售计划结束
6.7 客户开发计划（更新）实现代码
双击单元格：
触发onDblClickCell事件，调用editRow方法
$(this).edatagrid('editRow', index);
var editIndex = opts.editIndex;//opts.editIndex上一次的行的索引
if (editIndex != index) {//当前编辑的索引与上一次的是否一致
if (dg.datagrid('validateRow', editIndex)) {
dg.datagrid('endEdit', editIndex);//上一次编辑的行结束编辑状态
dg.datagrid('beginEdit', index);//本次编辑的行打开编辑状态
调用的endEdit方法结束了上一行的编辑状态，会自动触发onAfterEdit事件
保存计划：
点击保存计划，触发saveRow方法，让当前编辑的行结束编辑，会自动触发onAfterEdit事件
$(this).datagrid('endEdit', opts.editIndex);
当新增的行，没保存点击撤销，就可以删除该行，保存之后 点击撤销无反应
onCancelEdit: function (index, row) {
opts.editIndex = undefined;
if (row.isNewRecord) {//当是新增的row时，删除当前行
$(this).datagrid('deleteRow', index);
}
if (opts.onCancelEdit) opts.onCancelEdit.call(target, index, row);
},
6.71 更新代码来了
DevPlanController
第一种，日期用@responsebody会有延迟，日期会有一丢丢问题（最后也能显示出来）
@PutMapping("")
@ResponseBody
public TCusDevPlan updateDevPlan(TCusDevPlan devPlan){
try {
devPlanService.updateDevPlan(devPlan);
}catch (Exception e){
e.printStackTrace();
return null;
}
return devPlan;
}
所以我们用第二种，手动转日期格式
@PutMapping("")
@ResponseBody
public TCusDevPlan updateDevPlan(TCusDevPlan devPlan,HttpServletResponse response){
response.setContentType("text/json;charset=UTF-8");
try {
devPlanService.updateDevPlan(devPlan);
String jsonString = JSON.toJSONStringWithDateFormat(devPlan, "yyyy-MM-dd");
response.getWriter().print(jsonString);
}catch (Exception e){
e.printStackTrace();
return null;
}
return devPlan;
}
IDevPlanService
//更新销售计划
void updateDevPlan(TCusDevPlan devPlan);
DevPlanServiceImpl
@Override
public void updateDevPlan(TCusDevPlan devPlan) {
devPlanMapper.updateByPrimaryKeySelective(devPlan);
}
更新实现了
但是还有两个按钮（开发成功）（终止开发）自己写写
开发成功无非就是devResult修改成2
终止开发就是把devResult改成3
6.8、客户开发计划(开发成功，终止开发代码)
SaleChanceController
cusdevplanitemManage.jsp
function updateSaleChanceDevResult(devResult) {
$.post("${pageContext.request.contextPath}/saleChance/"+ ${param.saleChanceId} , {
devresult: devResult,
_method: "PUT"
}, function (result) {
