datagrid之新增、修改

前言：上次与大家分享了datagrid之修改以及查询，当然一个完整的项目离不开增删改查，今天就与大家分享datagrid之新增、修改。

一、明确目标：

        目标：将新增与删除功能实现出来。

       展示目标效果：

新增效果：

 删除效果：涉及控件（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>&nbsp;&nbsp;<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;
	}
	

 三、展现效果：

1、新增：

没加数据之前： 

加数据之后：

 

2、删除：

 将刚刚新增的数据删除：

 删除之后：

四：思维导图：

 总结：datagrid之新增、修改的知识就分享到这里了，希望能够帮助到大家。祝大家生活愉快！