datagrid的增加和删除

一、增加

1.在jsp界面添加一个增加按钮 id为btn-add

2.在js文件中给按钮添加点击事件，使点击时弹出增加弹框

$("#btn-add").click(function () {
        $('#ff').form('clear');
		$("#dd").dialog("open");
	});

注意：一点要写在function内

界面展示

3.提交表单

function submitForm(){
    alert('ok');
    var book_id = $("#book_id").val();
    console.log(book_id);
    if(book_id){
        url =$("#ctx").val()+'/book.action?methodName=edit'
    }else{
        url =$("#ctx").val()+'/book.action?methodName=add'
    }
    console.log("url:"+url)
 
    $('#ff').form('submit', {
        url:url,
        success:function(data){
            $('#ff').form('clear');
            $('#dd').dialog('close');
            $('#dg').datagrid('reload');

        }
    });
}

可与修改合并，条件是判断有没有id

4.在dao类里面添加增加方法

public void add(Book book) throws Exception {
		String sql="insert into t_mvc_book values(?,?,?)";
		super.executeUpdate(sql, book, new String [] {"bid","bname","price"});
	}

5.子控制器内

public String add(HttpServletRequest req, HttpServletResponse resp) {
				try {
					bookDao.add(book);
					ResponseUtil.writeJson(resp, 1);
				} catch (Exception e) {
					try {
						ResponseUtil.writeJson(resp, 0);
					} catch (IOException e1) {
						e1.printStackTrace();
					}
					e.printStackTrace();
				}
				return null;
			}

二、删除

1.添加列操作

{field:'操作',title:'操作',width:100,align:'center',formatter: function(value,row,index){
				return '<a href="javascript:void(0);" onclick="edit();">修改</a>&nbsp;&nbsp;'+'<a href="javascript:void(0);" onclick="del();">删除</a>';
			}

2.通过id删除数据并刷新表格

function del() {
    var row = $('#dg').datagrid('getSelected');
    var id=0;
    if (row) {
    	console.log(row);
        id = row.bid;
    }else {
        alert("请勾选数据...");
        return;
    }
    console.log(id);
    debugger;
    $.messager.confirm('确认', '您确认删除书籍吗？', function (r) {
        if (r) {
            $.ajax({
                url:$("#ctx").val()+'/book.action?methodName=delete&bid='+id,
                success: function (data) {
                    $('#dg').datagrid('reload');
                }
            });
        }
    })
}

messager控件为提示窗口

3.在dao类中添加删除方法

public void delete(Book book) throws Exception {
		String sql="delete from t_mvc_book where bid=?";
		super.executeUpdate(sql, book, new String [] {"bid"});
	}

4.子控制器内调用方法

public String delete(HttpServletRequest req, HttpServletResponse resp) {
				try {     
					bookDao.delete(book);
					ResponseUtil.writeJson(resp, 1);
				} catch (Exception e) {
					e.printStackTrace();
					try {
						ResponseUtil.writeJson(resp, 0);
					} catch (IOException e1) {
						e1.printStackTrace();
					}
				}
				return null;
			}

三、批量删除

1.在jsp界面添加一个批量删除的按钮

 2.在表格的每一行增加一个复选框

$('#dg').datagrid({    
	    url:$("#ctx").val()+'/book.action?methodName=datagrid',
	    pagination:true,
	    fitColumns:true,
	    //singleSelect:true,
	    striped:true,
	    checkbox:true,
	    columns:[[   
	    	{field:'ck',checkbox:true},
	        {field:'bid',title:'id',width:100,align:'center'},    
	        {field:'bname',title:'名称',width:100,align:'center'},    
	        {field:'price',title:'价格',width:100,align:'center'},   
	        {field:'操作',title:'操作',width:100,align:'center',formatter: function(value,row,index){
				return '<a href="javascript:void(0);" onclick="edit();">修改</a>&nbsp;&nbsp;'+'<a href="javascript:void(0);" onclick="del();">删除</a>';
			}
} 
	    ]]    
	});  

3.给批量删除按钮添加点击事件，使勾选的行删除

$("#btn-alldel").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){
			$.ajax({
                url:$("#ctx").val()+'/book.action?methodName=allDel&ids='+ids.join(","),
                success: function (data) {
                    $('#dg').datagrid('reload');
                }
            });
		}
	});

4.后台接收ids并调用删除方法

public String allDel(HttpServletRequest req, HttpServletResponse resp) {
				try {     
					String str = req.getParameter("ids");
					String[] ids = str.split(",");
					for (String s : ids) {
						book.setBid(Integer.valueOf(s));
						bookDao.delete(book);
					}
					ResponseUtil.writeJson(resp, 1);
				} catch (Exception e) {
					e.printStackTrace();
					try {
						ResponseUtil.writeJson(resp, 0);
					} catch (IOException e1) {
						e1.printStackTrace();
					}
				}
				return null;
			}

即可删除成功