jquery.edatagrid（可编辑datagrid）的使用

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

jquery.edatagrid（可编辑datagrid）的使用的更多相关文章

jQuery EasyUI教程之datagrid应用
一.利用jQuery EasyUI的DataGrid创建CRUD应用对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...
2、easyUI-创建 CRUD可编辑dataGrid（表格）
在介绍这节之前,我们先看一下效果图: 双击可以进入编辑
jQuery EasyUI教程之datagrid应用-2
二.DataGrid的扩展应用上一份教程我们创建的一个CRUD应用是使用对话框组件来增加或编辑用户信息.本教程将教你如何创建一个CRUD 数据表格(datagrid). 为了让这些CRUD功能正常工 ...
jQuery EasyUI教程之datagrid应用（三）
今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能: ...
jQuery EasyUI教程之datagrid应用（二）
上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的点击查看上篇:jQuery Eas ...
jQuery EasyUI教程之datagrid应用（一）
最近一段时间都在做人事系统的项目,主要用到了EasyUI,数据库操作,然后抽点时间整理一下EasyUI的内容. 这里我们就以一个简洁的电话簿软件为基础,具体地说一下datagrid应用吧 datagr ...
实战Jquery(二)--能够编辑的表格
今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...
基于layui,Jquery 表格动态编辑设置编辑值为 int 或者 double 类型及默认值
首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西接下来废话不多说,上代码. ...
jQuery EasyUI编辑DataGrid用combobox实现多级联动
我在项目中设计课程表的时候需要用到老师和分类之间的多级联动. 首先是一张效果图: 下面是实现的代码: <body> <script type="text/javascrip ...

随机推荐

JComboBox组件的列表实时更新
JComboBox deleteUser = new JComboBox(queryUser()); //queryUser()的返回值为字符串数组 deleteUser.setModel(new D ...
OCP 12c最新考试原题及答案（071-6）
6.(4-21) choose the best answer: View the Exhibit and examine the structure of the CUSTOMERS table. ...
python的数据结构分类，以及数字的处理函数，类型判断
python的数据结构分类: 数值型 int:python3中都是长整形,没有大小限制,受限内存区域的大小 float:只有双精度型 complex:实数和虚数部分都是浮点型,1+1.2J bool: ...
Event（补交作业）
三种方法可以创建Eventhandler 1.
TortoiseSVN查看修改时报错的解决方法
提交Bug后很快就修复了,给Stefan点个赞.大家等新版本(1.11.1)发布就可以了. -------------------------分割线下是原文---------------------- ...
js-查找字符串中出现次数最多的字符
假设有一个字符串,下面让我们一起来查找出现次数最多的字符 var str = 'asdfssaaasasasasaa'; 首先,我们定义一个Object用来存放拆分的字符串,然后遍历字符串. 判断ob ...
使用IntelliJ IDEA 前最好修改的配置
目录 1.下载 2.破解 3.修改配置下载详见我的另外一篇博客:<软件开发资源下载>中的[IDE]->[IntelliJ IDEA] 破解详见我的另外一篇博客:<最新版I ...
洛谷 P4307 [JSOI2009]球队收益 / 球队预算（最小费用最大流）
题面 luogu 题解最小费用最大流先假设剩下\(m\)场比赛,双方全输. 考虑\(i\)赢一局的贡献 \(C_i*(a_i+1)^2+D_i*(b_i-1)^2-C_i*a_i^2-D_i*b_ ...
rocketmq的消息过滤-sql方式
通常我们会使用Tag过滤特殊情况下我们也可以使用userproperties+TAGS过滤 , sql92定义这两种都是在服务器端完成过滤, 对于超大数据量的场景(1小时4000W+)不要在客流端 ...
linux下获取系统时间和时间偏移
获取linux时间并计算时间偏移 void getSystemTimer(void){#if 0 char *wdate[]={"Sun","Mon",&q ...

jquery.edatagrid（可编辑datagrid）的使用

jquery.edatagrid（可编辑datagrid）的使用的更多相关文章

随机推荐

热门专题