前言
接前文,已经用EasyUI的DataGrid组件实现了查询数据渲染的功能,这篇博文给大家分享下增删改的实现
增加、修改功能的实现步骤
先介绍一下增加功能的实现:
利用dialog组件进行同一页面增加,这个组件和模态框一个道理,只不过EasyUI的样式不太美观,引用:
要进行动态的页面传递数据到后台,那么给前文的增加按钮绑定事件:
// 给新增按钮绑定点击事件
$("#btn-add").click(function() {
$("#dd").dialog('open');
})
也就是说,当我点击增加时,dialog对话框才会显示出来填写要新增的数据,否则不显示.
然后将dialog组件内嵌一个表单进行数据添加:
<div id="dd" 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="cid">书籍类别:</label> <input class="easyui-validatebox"
type="text" name="cid" data-options="required:true" />
</div>
<div>
<label for="author">作者:</label> <input class="easyui-validatebox"
type="text" name="author" data-options="required:true" />
</div>
<div>
<label for="price">价格:</label> <input class="easyui-validatebox"
type="text" name="price" data-options="required:true" />
</div>
<div>
<label for="image">图片地址:</label> <input class="easyui-validatebox"
type="text" name="image" data-options="required:true" />
</div>
<div>
<label for="publishing">出版社:</label> <input
class="easyui-validatebox" type="text" name="publishing"
data-options="required:true" />
</div>
<div>
<label for="description">描述:</label> <input
class="easyui-validatebox" type="text" name="description"
data-options="required:true" />
</div>
<div>
<label for="state">物流状态:</label> <input class="easyui-validatebox"
type="text" name="state" data-options="required:true" />
</div>
<div>
<label for="deployTime">发货时间:</label> <input
class="easyui-validatebox" type="text" name="deployTime"
data-options="required:true" />
</div>
<div>
<label for="sales">数量:</label> <input class="easyui-validatebox"
type="text" name="sales" data-options="required:true" />
</div>
</form>
</div>
前台效果:
值得一提的是,EasyUI已经做好了对文本的正则校验,只需引用就行:
data-options="required:true"//非空校验
那么在我填写好我要增加的数据后(后台已写好增删改方法,结合自定义mvc),进行保存提交后台完成增加:
//提交后台增加
$("#btn-save").click(function() {
$("#ff").form('submit', {
url : ctx + '/book.action?opt=save',
onSubmit : function() {
console.log("onSubmit...");
},
success : function(data) {
//对data返回值进行eval转换,否则获取不到内含参数值
data = eval('(' + data + ')');
// debugger;
if (data.code == 200) {
alert(data.msg);
// 清空dialog数据
$("#ff").form('clear');
//增加完后关闭dialog对话框
$("#dd").dialog('close');
//对数据表格刷新
$("#dg").datagrid('reload');
}
}
});
})
这里踩了个坑:
由于写了个通用方法进行操作结果码返回,然后通过后台json的转译,自以为能在前台直接点出参数值:
public static Result<Object> SUCCESS = new Result<>(200,"操作成功");
然后就是前台弹出data值时,一直undified,所以一定要加上:
//对data返回值进行eval转换,否则获取不到内含参数值
data = eval('(' + data + ')');
然后就是修改功能:数据格式化,显示操作列
{
field : '操作',
title : '操作',
width : 300,
formatter : function(value, row, index) {
return '<a href="javascript:void(0)" οnclick="edit()">修改</a> <a href="javascript:void(0)" οnclick="del()">删除</a>'
}
}, ] ]
});
绑定事件:
function edit() {
// alert('测试一下');
// 数据回显,将选中的datatgrid值进行回显到form表单
var row = $("#dg").datagrid('getSelected');
if (row) {
$("#ff").form('load', row);
$("#dd").dialog('open');
}
}
在这里需要注意的就是,点击提交时,到底是怎么去判断是修改还是增加,一种就是js中判断然后跳转不同的后台方法,那么我这里后台实现判断:
/**
* 修改增加二合一
* @param req
* @param resp
* @return
*/
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;
}
也就是说,增加时,id肯定是为空的,所以很好判断是增加还是修改操作.
修改时数据回显:
删除功能实现
删除的实现,因为已经对列进行了格式化操作,只需在js中写好方法调用就行了:
function del() {
var row = $("#dg").datagrid('getSelected');//得到选中行的数据
if (row) {
var ctx = $("#ctx").val();
$.ajax({
url : ctx + '/book.action?opt=del&&id=' + row.id,
success : function(data) {
data = eval('(' + data + ')');
// debugger;
if (data.code == 200) {
alert(data.msg);
// 刷新数据
$("#dg").datagrid('reload');
}
}
})
}
}
好了,使用EasyUI的DataGrid数据表格控件完成增删改查就实现了…