其他分享
首页 > 其他分享> > 客户开发计划增删改查,js分析

客户开发计划增删改查,js分析

作者:互联网

CRM客户关系关系系统复习

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请求

  1. 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

标签:开发计划,改查,js,datagrid,editIndex,response,id,opts,row
来源: https://www.cnblogs.com/wangshikang/p/16339394.html