本文档详细介绍了如何使用EasyUI框架在JavaWeb项目中实现数据表格（datagrid）的修改功能，包括增加修改超链接、弹窗表单、回显数据、提交表单、后端接口实现以及提交后的数据刷新。通过示例代码和步骤说明，展示了从用户交互到后台处理的完整流程。
一、datagrid修改
今天是修改然后看看今天的目的：
查看API、demo
1、思路：
2、增加修改超链接
3、打开form表单窗口
①、弹窗在window（窗口）
<div id="dd" class="easyui-dialog" title="编辑窗体"
style="width: 500px; height: 200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">
内容（存放form表单区域）
</div>②、edit()修改事件（记得edit()方法一定要写到$(function(){})外面去）
function edit() {
//dialog对话框窗口的方法扩展自window（窗口）
//$("#win").window("open");
//联想到$("#dd").dialog("open");
//打开窗口
$("#dd").dialog("open");
}③、写form表单，给dialog窗体绑定提交数据的按钮
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<title>存放书籍页面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/book.js"></script>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<div id="tb">
<input class="easyui-textbox" id="bname" name="bname" style="width:20%;padding-left: 10px" data-options="label:'书名:',required:true">
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a>
</div>
<table id="dg"></table>
<!-- 弹窗
在window（窗口）中
-->
<div id="dd" class="easyui-dialog" title="编辑窗体"
style="width: 500px; height: 200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">
<!-- 弹窗在window（窗口）中 window的属性 closed:true关闭窗口
1、打开存放form的窗口；
2、写form表单；给dialog窗体绑定提交数据的按钮 ；
3、回显数据；（对于datagrid而言，以及窗体而言，在同一个jsp，可以不走后台直接填写，对于以前而言，
这样就可以少写一个方法，少请求一下后台）
把数据填写有两个操作：
①、先获取（点击edit（在book.js中）实现的）
②、在填写
-->
<!-- 提交的from表单 -->
<form id="ff" action="" method="post">
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="bname" style="width:100%" data-options="label:'书名:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="price" style="width:100%"
data-options="label:'价格:',required:true">
</div>
<input type="hidden" id="book_id" name="bid" value="">
</form>
<!-- 按钮 -->
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
</div>
</div>
</body>
</html>4、回显数据
①、在同一个jsp，将选中的数据表格对应数据填写到表单中即可
function edit() {
//dialog对话框窗口的方法扩展自window（窗口）
//$("#win").window("open");
//联想到$("#dd").dialog("open");
//打开窗口
$("#dd").dialog("open");
/**
* 将选中的数据表格对应数据填写到表单中
* 1、datagrid控件（方法中的getSelected）获取对应的数据row
* 2、对应的行数据row填写到form控件
*/
//1、datagrid控件（方法中的getSelected）获取对应的数据row
var row=$('#dg').datagrid('getSelected');
// 2、对应的行数据row填写到form控件(方法中的load)
//注意：要与form表单的name属性相对应，否则无法回显；
$('#ff').form('load',row);
}5、修改
①、BookDao 中增加修改方法
package com.mwy.dao;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.mwy.entity.Book;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
public class BookDao extends BaseDao<Book>{
//查询
public List<Book> list(Book book, PageBean pageBean) throws Exception {
String sql="select * from t_mvc_book where 1=1";
String bname=book.getBname();
if(StringUtils.isNotBlank(bname)) {
sql+=" and bname like '%"+bname+"%'";
}
return super.executeQuery(sql, Book.class, pageBean);
}
//修改
public void edit(Book book) throws Exception {
String sql="update t_mvc_book set bname=?,price=? where bid=?";
super.executeUpdate(sql, book, new String[] {"bname","price","bid"});
}
}
②、BookAction 增加修改
判断是否关闭窗口
ResponseUtil.writeJson(resp, 1);
package com.mwy.web;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.mwy.dao.BookDao;
import com.mwy.entity.Book;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class BookAction extends ActionSupport implements ModelDriver<Book>{
private Book book=new Book();
private BookDao bd=new BookDao();
//增加
public String datagrid(HttpServletRequest req, HttpServletResponse resp) throws Exception {
//选中内容想try:Ctrl+Shift+z
BookDao bd=new BookDao();
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
List<Book> list = bd.list(book, pageBean);
ResponseUtil.writeJson(resp, new R().data("total", pageBean.getTotal()).data("rows", list));
// System.out.println(om.writeValueAsString(map));
return null;
}
//修改
public String edit(HttpServletRequest req, HttpServletResponse resp) {
try {
bd.edit(book);
//1：是确认；0：是取消
ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, 0);
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
@Override
public Book getModel() {
// TODO Auto-generated method stub
return book;
};
}
③、submitForm()方法（对应确认修改按钮）
//提交要写submitForm()的方法（在userManage.jsp的表单按钮上）
function submitForm() {
//填写form表单的提交方法（form表单方法中）
$('#ff').form('submit', {
url: $("#ctx").val()+'/book.action?methodName=edit',
success: function(data){
/**
* 有两个缺陷
* 1、窗口没有关闭
* 2、数据没有刷新
*/
if(data==1){
//1：是确认，然后关闭窗口
$("#dd").dialog("close");
//再刷新数据（datagrid的方法里面reload）
var row=$('#dg').datagrid('reload');
}
}
});
}6、代码
①、userManage.jsp所有代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<title>存放书籍页面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/book.js"></script>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<div id="tb">
<input class="easyui-textbox" id="bname" name="bname" style="width:20%;padding-left: 10px" data-options="label:'书名:',required:true">
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a>
</div>
<table id="dg"></table>
<!-- 弹窗
在window（窗口）中
-->
<div id="dd" class="easyui-dialog" title="编辑窗体"
style="width: 500px; height: 200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">
<!-- 弹窗在window（窗口）中 window的属性 closed:true关闭窗口
1、打开存放form的窗口；
2、写form表单；给dialog窗体绑定提交数据的按钮 ；
3、回显数据；（对于datagrid而言，以及窗体而言，在同一个jsp，可以不走后台直接填写，对于以前而言，
这样就可以少写一个方法，少请求一下后台）
把数据填写有两个操作：
①、先获取（点击edit（在book.js中）实现的）
②、在填写
4、修改
①、关闭窗口
②、刷新数据
-->
<!-- 提交的from表单 -->
<form id="ff" action="" method="post">
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="bname" style="width:100%" data-options="label:'书名:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="price" style="width:100%"
data-options="label:'价格:',required:true">
</div>
<input type="hidden" id="book_id" name="bid" value="">
</form>
<!-- 按钮 -->
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
</div>
</div>
</body>
</html>②、book.js所有代码
$(function() {
/**
* 在easyUI中，点击下一页上一页等默认的分页效果，携带参数是page\rows
* bootstrap,点击下一页上一页等默认的分页效果，携带参数是page\offset
*/
$('#dg').datagrid({
url:$("#ctx").val()+'/book.action?methodName=datagrid',
pagination:true,
fitColumns:true,
toolbar: '#tb',
columns:[[
{field:'bid',title:'id',width:100},
{field:'bname',title:'名称',width:100},
{field:'price',title:'价格',width:100} ,
//datagrid中的列属性
{field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){
//onclick="edit(); 添加修改事件
return '<a href="javascript:void(0);" onclick="edit();">修改</a>';
}
}
]]
});
$("#btn-search").click(function(){
$('#dg').datagrid('load', {
bname: $("#bname").val()
});
});
})
//记得edit()方法一定要写到$(function(){})外面去
function edit() {
//dialog对话框窗口的方法扩展自window（窗口）
//$("#win").window("open");
//联想到$("#dd").dialog("open");
//打开窗口
$("#dd").dialog("open");
/**
* 将选中的数据表格对应数据填写到表单中
* 1、datagrid控件（方法中的getSelected）获取对应的数据row
* 2、对应的行数据row填写到form控件
*/
//1、datagrid控件（方法中的getSelected）获取对应的数据row
var row=$('#dg').datagrid('getSelected');
// 2、对应的行数据row填写到form控件(方法中的load)
//注意：要与form表单的name属性相对应，否则无法回显；
$('#ff').form('load',row);
}
//提交要写submitForm()的方法（在userManage.jsp的表单按钮上）
function submitForm() {
//填写form表单的提交方法（form表单方法中）
$('#ff').form('submit', {
url: $("#ctx").val()+'/book.action?methodName=edit',
success: function(data){
/**
* 有两个缺陷
* 1、窗口没有关闭
* 2、数据没有刷新
*/
if(data==1){
//1：是确认，然后关闭窗口
$("#dd").dialog("close");
//再刷新数据（datagrid的方法里面reload）
var row=$('#dg').datagrid('reload');
}
}
});
}
7、结果界面
①、回显
②、修改后
今天到这里就结束了
注意：看API、demo很重要
扫一扫
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
