jquery.edatagrid(可编辑datagrid)的使用
博客专区 > caiyezi 的博客 > 博客详情
jquery.edatagrid(可编辑datagrid)的使用
caiyezi 发表于1年前
jquery.edatagrid(可编辑datagrid)的使用
  • 发表于 1年前
  • 阅读 27
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

用spring+springmvc+mybatis+mysql实现简单的可编辑单元格,首先是页面效果图:

其中,“编号”列是不可编辑的,“暂缓措施”是可以自由编辑的,主要html组成:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.edatagrid.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common.js"></script>
<script type="text/javascript"> $(function(){ $("#dg").edatagrid({ url:'${pageContext.request.contextPath}/customerReprieve/list.do?lossId=${param.lossId}', saveUrl:'${pageContext.request.contextPath}/customerReprieve/save.do?customerLoss.id=${param.lossId}', updateUrl:'${pageContext.request.contextPath}/customerReprieve/save.do', destroyUrl:'${pageContext.request.contextPath}/customerReprieve/delete.do' }); }); function confirmLoss(){ $.messager.prompt('系统提示', '请输入流失原因:', function(r){ if (r){ $.post("${pageContext.request.contextPath}/customerLoss/confirmLoss.do",{id:'${param.lossId}',lossReason:r},function(result){ if(result.success){ $.messager.alert("系统提示","执行成功!"); }else{ $.messager.alert("系统提示","执行失败!"); } },"json"); } }); } </script>
<title>Insert title here</title>
</head>
<body style="margin: 15px">
 
 <table id="dg" title="客户流失暂缓措施管理" style="width:800px;height:250px" toolbar="#toolbar" idField="id" rownumbers="true" fitColumns="true" singleSelect="true">
   <thead>
       <tr>
           <th field="id" width="50">编号</th>
           <th field="measure" width="300" editor="{type:'validatebox',options:{required:true}}">暂缓措施</th>
       </tr>
   </thead>
 </table>
 
 <div id="toolbar">
     <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">添加</a>
     <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">删除</a>
     <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow');$('#dg').edatagrid('reload')">保存</a>
     <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">撤销行</a>
     <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-confirm" plain="true" onclick="javascript:confirmLoss()">确认流失</a>
 </div>
</body>
</html>
edatagrid中定义了四个url属性,代表四种操作的请求路径,分别为url(列表查询url)、saveUrl(更新保存url)、updateUrl(新增保存url)、deleteUrl(删除url)

主要的controller实现:
/** * 客户流失暂缓措施Controller层 * @author Administrator * */ @Controller @RequestMapping("/customerReprieve") public class CustomerReprieveController { @Resource private CustomerReprieveService customerReprieveService; /** * 分页条件查询客户流失暂缓措施 * @param page * @param rows * @param s_customerReprieve * @param response * @return * @throws Exception */ @RequestMapping("/list") public String list(@RequestParam(value="lossId",required=false)String lossId,HttpServletResponse response)throws Exception{ Map<String,Object> map=new HashMap<String,Object>(); map.put("lossId", lossId); List<CustomerReprieve> customerReprieveList=customerReprieveService.find(map); JSONObject result=new JSONObject(); JsonConfig jsonConfig=new JsonConfig(); jsonConfig.setExcludes(new String[]{"customerLoss"}); JSONArray jsonArray=JSONArray.fromObject(customerReprieveList,jsonConfig); result.put("rows", jsonArray); ResponseUtil.write(response, result); return null; } /** * 添加或者修改客户流失暂缓措施 * @param customerReprieve * @param response * @return * @throws Exception */ @RequestMapping("/save") public String save(CustomerReprieve customerReprieve,HttpServletResponse response)throws Exception{ int resultTotal=0; // 操作的记录条数
        if(customerReprieve.getId()==null){ resultTotal=customerReprieveService.add(customerReprieve); }else{ resultTotal=customerReprieveService.update(customerReprieve); } JSONObject result=new JSONObject(); if(resultTotal>0){ result.put("success", true); }else{ result.put("success", false); } ResponseUtil.write(response, result); return null; } /** * 删除客户流失暂缓措施 * @param ids * @param response * @return * @throws Exception */ @RequestMapping("/delete") public String delete(@RequestParam(value="id")String id,HttpServletResponse response)throws Exception{ customerReprieveService.delete(Integer.parseInt(id)); JSONObject result=new JSONObject(); result.put("success", true); ResponseUtil.write(response, result); return null; } }

CustomerReprieveService(接口及实现类)主要实现:

/** * 客户流失暂缓措施Service接口 * @author Administrator * */
public interface CustomerReprieveService { /** * 查询客户流失暂缓措施集合 * @param map * @return
     */
    public List<CustomerReprieve> find(Map<String,Object> map); /** * 获取总记录数 * @param map * @return
     */
    public Long getTotal(Map<String,Object> map); /** * 修改客户流失暂缓措施 * @param customerReprieve * @return
     */
    public int update(CustomerReprieve customerReprieve); /** * 添加客户流失暂缓措施 * @param customerReprieve * @return
     */
    public int add(CustomerReprieve customerReprieve); /** * 删除客户流失暂缓措施 * @param id * @return
     */
    public int delete(Integer id); }
/** * 客户流失暂缓措施Service实现类 * @author Administrator * */ @Service("customerReprieveService") public class CustomerReprieveServiceImpl implements CustomerReprieveService{ @Resource private CustomerReprieveDao CustomerReprieveDao; @Override public List<CustomerReprieve> find(Map<String, Object> map) { return CustomerReprieveDao.find(map); } @Override public Long getTotal(Map<String, Object> map) { return CustomerReprieveDao.getTotal(map); } @Override public int update(CustomerReprieve customerReprieve) { return CustomerReprieveDao.update(customerReprieve); } @Override public int add(CustomerReprieve customerReprieve) { return CustomerReprieveDao.add(customerReprieve); } @Override public int delete(Integer id) { return CustomerReprieveDao.delete(id); } }

接下来是dao层实现:

/** * 客户流失暂缓措施Dao接口 * @author Administrator * */
public interface CustomerReprieveDao { /** * 查询客户流失暂缓措施集合 * @param map * @return
     */
    public List<CustomerReprieve> find(Map<String,Object> map); /** * 获取总记录数 * @param map * @return
     */
    public Long getTotal(Map<String,Object> map); /** * 修改客户流失暂缓措施 * @param customerReprieve * @return
     */
    public int update(CustomerReprieve customerReprieve); /** * 添加客户流失暂缓措施 * @param customerReprieve * @return
     */
    public int add(CustomerReprieve customerReprieve); /** * 删除客户流失暂缓措施 * @param id * @return
     */
    public int delete(Integer id); }

因为采用的是mybatis进行ORM映射,所以不必手动写sql,主要映射文件如下:

<?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="com.dao.CustomerReprieveDao">

    <resultMap type="CustomerReprieve" id="CustomerReprieveResult">
        <result property="id" column="id"/>
        <result property="measure" column="measure"/>
        <association property="customerLoss" column="lossId" select="com.dao.CustomerLossDao.findById"></association>
    </resultMap>
    
    <select id="find" parameterType="Map" resultMap="CustomerReprieveResult"> select * from t_customer_reprieve <where>
            <if test="lossId!=null and lossId!='' "> and lossId = #{lossId} </if>
        </where>
        <if test="start!=null and size!=null"> limit #{start},#{size} </if>
    </select>

    
    <select id="getTotal" parameterType="Map" resultType="Long"> select count(*) from t_customer_reprieve <where>
            <if test="lossId!=null and lossId!='' "> and lossId = #{lossId} </if>
        </where>
    </select>
    
    <insert id="add" parameterType="CustomerReprieve"> insert into t_customer_reprieve values(null,#{customerLoss.id},#{measure}) </insert>
    
    <update id="update" parameterType="CustomerReprieve"> update t_customer_reprieve <set>
            <if test="measure!=null and measure!='' "> measure=#{measure}, </if>
        </set> where id=#{id} </update>
    
    <delete id="delete" parameterType="Integer"> delete from t_customer_reprieve where id=#{id} </delete>
    
</mapper>


  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 108
码字总数 0
×
caiyezi
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: