一:增加
1、新增一个添加的按钮
<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a>
2、给按钮添加点击事件
$("#btn-add").click(function() {
//清空之前表单的数据,不必要保存数据
$('#ff').form('clear');
$("#dd").dialog("open");
addFlag=1;
})
3、在js文件中判断点击事件是否为新增
var addFlag=0/*var一个变量判断*/
4、在表单中提交
function submitForm() {
/*
* 点击确定按钮提交表单到后台,并且是新增/修改共用的一个方法
*/
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');
}
}
});
}
5、在dao方法和action中新增方法
5.1BookDao
// 增加
public void add(Book book) throws Exception {
book.setBid((int)new Date().getTime());
super.executeUpdate("insert into t_mvc_book values(?,?,?)", book, new String[] {"bid","bname","price"});
}
5.2BookAction
public String add(HttpServletRequest req, HttpServletResponse resp) {
try {
bookDao.add(book);
ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, 0);
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
}
return null;
}
6、功能展示
二:删除
1:单个删除
1.1、在菜单显示的datagrid列里新增一个删除链接
columns:[[
{field:'ck',checkbox:true},
{field:'bid',title:'id',width:100},
{field:'bname',title:'名称',width:100},
{field:'price',title:'价格',width:100},
{field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){
< a href="javascript:void(0);" onclick="del();">删除</a>'
}}
]]
1.2、使用ajax新增删除方法
function del() {
var row=$('#dg').datagrid("getSelected");
if(row){
var id=row.bid;
// messager不能向后台发送请求
$.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');
}
}
});
}
});
}else{
alert("请选择要删除的数据");
}
}
1.3、新增dao方法和action方法
1.3.1、dao方法
// 删除
public void del(Book book) throws Exception {
super.executeUpdate("delete from t_mvc_book where bid=?", book, new String[] {"bid"});
}
1.3.2、action代码
public String del(HttpServletRequest req, HttpServletResponse resp) {
try {
bookDao.del(book);
ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, 0);
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
}
return null;
}
1.4、页面展示
2、批量删除
2.1、添加批量删除按钮(userManage.jsp)
<a id="btn-batchDel" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">批量删除</a>
2.2、增加复选框
$('#dg').datagrid({
url:$("#ctx").val()+'/book.action?methodName=datagrid',
pagination:true,
fitColumns:true,
// 添加复选框
checkbox:true,
toolbar: '#tb',
columns:[[
// 设置复选框的列
{field:'ck',checkbox:true},
{field:'bid',title:'id',width:100},
{field:'bname',title:'名称',width:100},
{field:'price',title:'价格',width:100},
{field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){
return '<a href="javascript:void(0);" onclick="edit();">修改</a> <a href="javascript:void(0);" onclick="del();">删除</a>'
}}
]]
});
2.3、添加一个批量删除的点击事件
$("#btn-batchDel").click(function() {
var rows=$('#dg').datagrid("getSelections");
var ids=new Array();
if(rows !=null&& rows.length >0){
for (var i in rows) {
ids.push(rows[i].bid)
}
}
if(ids.length>0){
$.messager.confirm('确认','您确认想要删除记录吗?',function(r){
if (r){
$.ajax({
url:$("#ctx").val()+'/book.action?methodName=del&bids='+ids.join(","),
success:function(data){
if(data==1){
$('#dg').datagrid('reload');
}
}
});
}
});
}
});
2.4、Action页面代码修改
public String del(HttpServletRequest req, HttpServletResponse resp) {
try {
String ids = req.getParameter("bids");
String[] split = ids.split(",");
for (String s : split) {
book.setBid(Integer.parseInt(s));
bookDao.del(book);
}
ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, 0);
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
}
return null;
}
2.5、功能展示