思维导图:
一、明确目标:
目标:将新增与删除功能实现出来。
展示目标效果:
新增效果:
删除效果:涉及控件(messager)
二、思路与代码具体实现:
一、增加:
1、思路:
1、在查询旁边添加一个新增按钮(并且id为“btn-add”)
2、给新增按钮添加点击事件,打开窗体
3、写好dao、web中的方法
4、关闭窗体,刷新数据
注意:在提交时,不知道是用新增方法还是编辑方法,则在这时需要用到addflag,以及定义一个href为null,之后进行判断,如果addflag为1的话,则调用的是新增方法,如果addflag为2的话,则调用的是修改方法,
2、具体代码实现:
2.1在查询旁边添加一个新增按钮(并且id为“btn-add”):
<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">新增</a>
2.2、给新增按钮添加点击事件,打开窗体:
$("#btn-add").click(function() {
$('#ff').form('clear');
$('#dd').dialog('open');
addflag = 1;
})
2.3、在进行增加操作时,要辨别是新增还是修改操作,这里则需要定义一个变量(var addflag = 0;起始将该变量变为0),点击修改时, addflag变为2,点击增加时,addflag变为1,于此同时,url也会随之改变。
function submitForm() {
var row = $('#dg').datagrid("getSelected");
var href = null;
if (addflag == 2) {
href = $('#ctx').val() + '/book.action?methodName=edit'
} else if (addflag == 1) {
href = $('#ctx').val() + '/book.action?methodName=add'
}
$('#ff').form('submit', {
url : href,
success : function(data) {
if (data == 1) {
$('#dd').dialog('close');
$('#dg').datagrid('reload');
}
}
});
2.4、web、dao中的方法:
dao:
public void add(Book book) throws Exception {
book.setBid((int)new Date().getTime());(注意:由于在增加中id同样也要新增,自增长以及写一个方法来取最大id的方法都太复杂,这里不妨直接new一个时间戳)
super.executeUpdate("insert into t_mvc_book values(?,?,?)", book, new String[] {"bid","bname","price"});
}
web:
public String add(HttpServletRequest req, HttpServletResponse resp){
try {
bd.add(book);
ResponseUtil.writeJson(resp, 1);(通过返回值来决定是否要刷新页面,以及来关闭窗体)
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, 0);
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
二、删除:
1、思路:
1、先增加一个删除列
2、添加删除的点击事件
3、向后台发送删除请求
2、具体代码实现:
2.1先增加一个删除列
formatter : function(value, row, index) {
return '<a href="javascript:void(0)" οnclick="edit()">修改</a> <a href="javascript:void(0)" οnclick="del()">删除</a>'
}
} ] ]
2.2、添加删除的点击事件:删除要取到id,首先在方法中要取到对应列,然后通过这一列取到对应的bid(得先判断看有没有选中列),之后点击删除时会有一个访问框,按下要删除时必须用ajax方法来传递url进行删除。
function del() {
var row = $('#dg').datagrid("getSelected");
if(row){
var id=row.bid;
$.messager.confirm('确认','您确认想要删除记录吗?',function(r){
if (r){
$.ajax({
url:$('#ctx').val() + '/book.action?methodName=del&bid='+id,
success:function(data){
if(data==1){
$('#dg').datagrid('reload');
}
}
})
}
});
}
2.3、dao、web层的代码:
dao:
public void del(Book book) throws Exception {
super.executeUpdate("delete from t_mvc_book where bid=?", book, new String[] {"bid"});
}
web:
public String del(HttpServletRequest req, HttpServletResponse resp){
try {
bd.del(book);
ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, 0);
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}