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 ...
随机推荐
- [国家集训队] tree Ⅱ
bzoj2631(权限题...):链接 落咕:链接 考察的是LCT维护链上信息. 但是这个题不一样的是又有加法又有乘法...(有木有想到落咕的模板--线段树2qwq) 因为乘法的运算优先度比加法高,所 ...
- leecode刷题（11）-- 反转字符串
leecode刷题(11)-- 反转字符串 反转字符串 描述: 编写一个函数,其作用是将输入的字符串反转过来. 示例 1: 输入: "hello" 输出: "olleh& ...
- [BZOJ2049] [SDOI2008] 洞穴勘测
题目描述 辉辉热衷于洞穴勘测. 某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成,并且每条通道连接了恰好两个洞穴.假 ...
- uC/OS-II 函数之任务相关函数
获得更多资料欢迎进入我的网站或者 csdn或者博客园 对于有热心的小伙伴在微博上私信我,说我的uC/OS-II 一些函数简介篇幅有些过于长应该分开介绍.应小伙伴的要求,特此将文章分开进行讲解.上文主要 ...
- 题目1008：最短路径问题（SPFA算法）
问题来源 http://ac.jobdu.com/problem.php?pid=1008 问题描述 给定一个G(V,E)有向图,起点s以及终点t,求最短路径. 问题分析 典型的单源最短路径问题,可以 ...
- JavaScript DOM编程艺术 笔记（二）语句操作
操作 var total = (1+4)*5; year = year +1; year++; var message = "i am" + "girl"; 是 ...
- 九校联考（DL24凉心模拟） 整除（中国剩余定理＋原根性质）
题意简述 给定 \(n, m\),求 \(n|x^m - x\) 在满足 \(x \in [1, n]\) 时合法的 \(x\) 的数量.答案模 \(998244353\).单个测试点包含多组数据. ...
- 时间超限问题处理（c++）
c++中 如果时间超上限 做题上: 考虑关于二进制的方法 比如说 find your present (2) 这道题 可以用异或运算 来发现不重复数 对于动态规划 状态压缩发面 方面应用更多 比如说p ...
- linux内核修炼之道
华清远见·任桥伟 人民邮电 2010 内核不学,岂能理解?今天开始正式学习内核原理 linux 发行版本Mint. cat /etc/issue # sudo lsb_release - ...
- 剑指offer——面试题19：正则表达式匹配
#include"iostream" using namespace std; bool MatchCore(char*str,char* pattern); bool Match ...