目标:DataGrid之修改 在上节课的基础上添加增加与删除操作
一,增加
思路:
1,查询旁边添加新增按钮
2,添加点击事件弹出窗体
3,提交表单
4,窗体关闭
5,刷新数据表格
1,查询旁边添加新增按钮
在jsp界面添加一个增加按钮 id为btn-add
<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;
});
var addFlag = 0;
注意:在提交时,判断用的是用新增方法还是编辑方法,则需在点击事件外建立addFlag属性,以及定义一个href为null,点击修改时, addflag变为2,点击增加时,addflag变为1,之后进行判断,如果addFlag为1,则调用新增方法,如addFlag为2,则调用修改方法
3,提交表单 与 4,窗体关闭 及 5,刷新数据表格
/*提交事件*/
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');
}
}
});
}
样式展示:
后台编码(dao web)
BookDao(由于前端表格没有写增加id的列,无法传递id,所有后台需要一个方法来取最大id)
方法一:
book.setBid((int)new Date().getTime()); new一个时间戳
方法二:
写一个获取最大id的方法
public void add(Book book) throws Exception {
BookDao bookDao = new BookDao();
book.setBid(bookDao.getMaxId());
// book.setBid((int)new Date().getTime()); new一个时间戳
super.executeUpdate("insert into t_mvc_book values(?,?,?)", book, new String[] {"bid","bname","price"});
}
// 获取最大id
public int getMaxId() throws Exception {
Connection con = DBAccess.getConnection();;
PreparedStatement pst = con.prepareStatement("select max(bid)+1 from t_mvc_book");
ResultSet rs=pst.executeQuery();
if(rs.next()) {
return rs.getInt(1);
}
return 0;
}
BookAction
public String add(HttpServletRequest req, HttpServletResponse resp) throws Exception {
try {
bookDao.add(book);
ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
e.printStackTrace();
ResponseUtil.writeJson(resp, 0);
}
return null;
}
结果展示:
二,删除(涉及messager控件)
1,DataGrid中添加一列“删除”
2,删除的点击事件
3,向后台发送删除请求
4,刷新表格
1,DataGrid中添加一列“删除”
2,删除的点击事件 与 3,向后台发送删除请求 (删除要用ajax方法来传递url进行删除)
/*删除事件*/
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("请选择需要删除的数据");
}
}
后台编码(dao web)
BookDao
public void del(Book book) throws Exception {
super.executeUpdate("delete from t_mvc_book where bid = ?", book, new String[] {"bid"});
}
BookAction
public String del(HttpServletRequest req, HttpServletResponse resp) throws Exception {
try {
bookDao.del(book);
ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
e.printStackTrace();
ResponseUtil.writeJson(resp, 0);
}
return null;
}
效果展示:
三,批量删除
思路:
1,添加批量删除按钮
2,添加点击事件
3,提交,刷新
1,添加批量删除按钮(id为btn-add)
<a id="btn-batchDel" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">批量删除</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 ){
alert(ids.join(","));
$.ajax({
url:$('#ctx').val()+'/book.action?methodName=del&bid='+ids.join(","),
success:function(data){
if(data == 1){
$('#dg').datagrid('reload');
}
}
});
}
})
方法
getSelections none 返回所有被选中的行,当没有记录被选中的时候将返回一个空数组。
从前端获取选中的行,放入数组,后端截取,循环删除。
BookAction
public String del(HttpServletRequest req, HttpServletResponse resp) throws Exception {
try {
String ids = req.getParameter("bid");
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();
ResponseUtil.writeJson(resp, 0);
}
return null;
}
效果展示:
OK!到这就结束了,希望能帮到你!!!