本文介绍了如何使用EasyUi的DataGrid组件实现数据表格的增加、修改和删除功能。通过结合Dao方法、Action及js代码，实现了在同一页面进行操作，并提供了测试结果展示。
前言
通过我们上一篇博客里的DataGrid实现了我们的查询，今天我们将要做的就是增加、修改、删除。
增加、修改、删除
我将增加和修改的方法合成为一个.
Dao方法
// 增加
public int add(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
// pinyin的属性值不是从jsp传递过来的
book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
// 从前端jsp传到后端的deployTime属性值是Strin类型的，而数据库需要的是date/Timestamp
// SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String sql="insert into t_easyui_book values(null,?,?,?,?,?,?,?,?,?,?,?)";
return super.executeUpdate(sql, book, new String[] {"name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales"});
}
// 修改
public int edit(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
String sql="update t_easyui_book set name=?,pinyin=?,cid=?,author=?,price=?,image=?,publishing=?,description=?,state=?,deployTime=?,sales=? where id=?";
return super.executeUpdate(sql, book, new String[] {"name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales","id"});
}
// 删除
public int del(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
String sql="delete from t_easyui_book where id=?";
return super.executeUpdate(sql, book, new String[] {"id"});
}
Action
// 二合一将新增/修改方法合成一个
public String save(HttpServletRequest req,HttpServletResponse resp) {
try {
if(book.getId()!=0) {
this.bookDao.edit(book);
}else {
this.bookDao.add(book);
}
ResponseUtil.writeJson(resp, Result.SUCCESS);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (SecurityException e) {
e.printStackTrace();
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
public String del(HttpServletRequest req,HttpServletResponse resp) {
try {
this.bookDao.del(book);
ResponseUtil.writeJson(resp, Result.SUCCESS);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (SecurityException e) {
e.printStackTrace();
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
返回我们的操作有没有成功的一个工具类
package com.zhangsiwen.util;
public class Result<T> {
private int code;
private String msg;
private T data;
public static Result SUCCESS =new Result<>(200, "操作成功");
public static <T> Result ok(T data){
return new Result(data);
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
public Result() {
super();
}
public Result(int code, String msg) {
super();
this.code = code;
this.msg = msg;
}
public Result(T data) {
super();
this.data = data;
}
}
jsp页面
input里面的name一定要与数据库中的列名一致.
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<div id="tb">
<input class="easyui-textbox" id="name" name="name" style="width: 20%;padding-left: 10px"data-options="label:'书名',required:true">
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">搜索</a>
<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">新增</a>
</div>
<div id="bookEdit" class="easyui-dialog" title="书籍信息编辑窗体" style="width:400px;height:400px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#fbtns'">
<form id="ff" method="post">
<input type="hidden" name="id" />
<div>
<label for="name">书籍名称:</label>
<input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
</div>
<div>
<label for="email">书籍类别:</label>
<input class="easyui-validatebox" type="text" name="cid" data-options="required:true" />
</div>
<div>
<label for="name">作者:</label>
<input class="easyui-validatebox" type="text" name="author" data-options="required:true" />
</div>
<div>
<label for="email">价格:</label>
<input class="easyui-validatebox" type="text" name="price" data-options="required:true" />
</div>
<div>
<label for="name">图片地址:</label>
<input class="easyui-validatebox" type="text" name="image" data-options="required:true" />
</div>
<div>
<label for="email">出版社:</label>
<input class="easyui-validatebox" type="text" name="publishing" data-options="required:true" />
</div>
<div>
<label for="name">描述:</label>
<input class="easyui-validatebox" type="text" name="description" data-options="required:true" />
</div>
<div>
<label for="email">物流状态:</label>
<input class="easyui-validatebox" type="text" name="state" data-options="required:true" />
</div>
<div>
<label for="name">时间:</label>
<input class="easyui-validatebox" type="text" name="deployTime" data-options="required:true" />
</div>
<div>
<label for="name">数量:</label>
<input class="easyui-validatebox" type="text" name="sales" data-options="required:true" />
</div>
</form>
</div>
<div id="fbtns">
<input class="easyui-textbox" id="name" name="name" style="width: 20%;padding-left: 10px"data-options="label:'书名',required:true">
<a id="btn-save" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">保存</a>
<a id="btn-cancel" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">取消</a>
</div>
<table id="dg"></table>
</body>
js代码
我们在做增加修改的时候，利用dialog组件进行同一页面增加修改。
$(function(){
var ctx=$("#ctx").val();
$('#dg').datagrid({
url:ctx+'/book.action?methodName=datagrid',
pagination:true,
singleSelect:true,
toolbar:'#tb',
columns:[[
{field:'id',title:'id',width:100},
{field:'name',title:'数据名称',width:100},
{field:'pinyin',title:'拼音',width:100,align:'right'},
{field:'cid',title:'书籍类别',width:100},
{field:'author',title:'作者',width:100},
{field:'price',title:'价格',width:100},
{field:'image',title:'图片',width:300},
{field:'xxx',title:'操作',width:300,formatter: function(value,row,index){
return '<a href="javascript:void(0)" onclick="edit()">修改</a> <a href="javascript:void(0)" onclick="del()">删除</a>';
}
}
]]
});
// 点击搜索按钮完成按名字进行书籍查询
$("#btn-search").click(function(){
$('#dg').datagrid('load', {
name: $("#name").val()
});
})
// 给新增按钮绑定点击事件
$("#btn-add").click(function(){
// 需要打开dialog窗体，查看该组件的方法api
$('#bookEdit').dialog('open');
});
$("#btn-save").click(function(){
$('#ff').form('submit', {
url:ctx+'/book.action?methodName=save',
onSubmit:function(){
console.log('onSubmit...');
},
success:function(data){
data=eval('('+ data +')');
if(data.code== 200){
alert(data.msg)
// 刷新datagrid的数据
$('#ff').form('clear');
$('#bookEdit').dialog('close');
$('#dg').datagrid('reload'); // 重新载入当前页面数据
}
}
});
});
})
function edit(){
// 做数据回显，就是将选中的datagrid行值回填到from表单
var row=$('#dg').datagrid('getSelected');
if(row){
$('#ff').form('load',row);
}
$('#bookEdit').dialog('open');
}
function del(){
var row=$('#dg').datagrid('getSelected');
if(row){
var ctx=$("#ctx").val();
$.ajax({
url:ctx+'/book.action?methodName=del&&id='+row.id,
success:function(data){
data=eval('('+ data +')');
if(data.code== 200){
alert(data.msg)
$('#dg').datagrid('reload'); // 重新载入当前页面数据
}
}
})
}
}
测试结果
点击增加按钮。弹出一个Dialog（对话框窗口）
增加数据，点击保存，操作成功
选择要修改的行，点击按钮
修改成功
选择要删除的行，点击删除，操作成功
总结
今天的分享就到这里，谢谢大家！
扫一扫
1309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
