文档章节

jquery.edatagrid(可编辑datagrid)的使用

c
 caiyezi
发布于 2016/11/08 20:24
字数 1199
阅读 39
收藏 0

用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>


本文转载自:http://www.cnblogs.com/vipzhou/p/4957433.html

共有 人打赏支持
c
粉丝 1
博文 108
码字总数 0
作品 0
西安
程序员
jquery-easyui 中表格的行编辑功能

datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力。 看一个例子效果图: 具体实现代码如下: $('#tt').datagrid({ ...

鉴客
2010/06/17
15K
5
jQuery EasyUI使用教程之创建展开行详细编辑表单的CRUD应用

当切换datagrid视图到"detailview"时,用户可以展开一行来显示该行下面的任何详细信息。此功能允许用户为放置在行详细信息面板中的编辑表单提供恰当的布局。在本教程中,我们使用DataGrid组件...

Miss_Hello_World
2015/10/14
293
0
关于何种情况下使用DataGrid、DataList或Repeater的一些讨论

作者:Scott Mitchell [概述] WEB开发自从有了基于脚本的WEB编程技术(如ASP)以来,经历了一个漫长的过程。通过使用微软的ASP.Net技术,传统的ASP中大量的、单调乏味的、重复性的编程工作...

晨曦之光
2012/03/09
159
0
常见 Datagrid 错误

Marcie Robillard DatagridGirl.com Datagrid 控件是 Microsoft® ASP.NET 中功能最强、用途最广的 Web 控件之一,这一点已经得到了 ASP.NET 权威人士的认同。虽然 Datagrid 控件易于使用,但...

晨曦之光
2012/03/09
38
0
WPF 4 DataGrid 控件(基本功能篇)

提到DataGrid 不管是网页还是应用程序开发都会频繁使用。通过它我们可以灵活的在行与列间显示各种数据。本篇将详细介绍WPF 4 中DataGrid 的相关功能。 自定义列 默认情况下,当我们为DataGri...

junwong
2012/03/09
704
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 识别慢性能的宏

Page Profiling 给你了有关页面在载入的时候操作缓慢的邪教,你可以将下面的内容添加到调试(debug)级别: Version 3.1 及其后续版本 设置包名字为 com.atlassian.renderer.v2.components.M...

honeymose
12分钟前
0
0
day93-20180920-英语流利阅读-待学习

时尚之觞:外表光鲜靓丽,其实穷得要命 Lala 2018-09-20 1.今日导读 讲到时尚界,我们脑海里浮现的可能都是模特和设计师光鲜靓丽、从容潇洒的模样。可是,最近在法国出版的一本书却颠覆了我们...

飞鱼说编程
28分钟前
0
0
maven的pom.xml用解决版本问题

maven管理库依赖,有个好处就是连同库的依赖的全部jar文件一起下载,免去手工添加的麻烦,但同时也带来了同一个jar会被下载了不同版本的问题,好在pom的配置里面允许用<exclusion>来排除一些...

JAVA码猿
52分钟前
1
0
20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
今天
2
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
42
11

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部