datagrid的增加/删除

前言：给大家讲解datagrid的增加和删除

不会就看aqi(说明书)、demo(案例)，只要把思路理清了，做出效果很容易了

码字不易，点个关注

转载请说明！！!

开发工具:eclipse

---

目录

1、思路以及代码实现

增加

删除

2、测试

所有操作结束都是关闭弹出框，并且刷新数据

增加 

删除 

---

1、思路以及代码实现

增加

①在userManage界面添加一个增加按钮 id为btn-add

<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a> 

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

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

注意：要写在function内

增加窗口效果：

③提交表单 

定义一个变量addFlag， 点击确定按钮提交表单到后台，并且是新增/修改共用的一个方法

条件是判断有没有id

var addFlag = 0;
$(function() {
	$('#dg').datagrid({
		url : $("#ctx").val() + '/book.action?methodName=datagrid',
		pagination : true,
		fitColumns : true,
		toolbar : '#tb',
		columns : [ [ {
			field : 'bid',
			title : 'id',
			width : 100
		}, {
			field : 'bname',
			title : '名字',
			width : 300
		}, {
			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>
			}

		}

		] ]
	});
 
    //修改
	$("#btn-search").click(function() {
		$('#dg').datagrid('load', {
			bname : $("#bname").val()
		});
	});
 
    //增加
	$("#btn-add").click(function() {
		$('#ff').form('clear');
		$("#dd").dialog("open");
		addFlag = 1;
	});

	
})

function edit() {
	addFlag = 2;
	// dialog对话框窗口的方法扩展自window（窗口）
	// $('#win').window('open');
	// 联想到$("#dd").dialog("open");
	$("#dd").dialog("open");
	/**
	 * 1.将选中的表格对应的行数据row 2.对应的行数据row填写到form控件
	 */
	var row = $('#dg').datagrid("getSelected");
	console.log(row);
	// 注意:要与form表单的name属性相对应，否则无法回填数据
	$('#ff').form('load', row);
}

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) {
			// alert(data);
			if (data == 1) {
				$("#dd").dialog("close");
				$('#dg').datagrid('reload');
			}
		}
	});

}

④在dao类里面添加增加方法

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"});
    }

 Book的id采用时间戳随机生成

⑤BookAction子控制器调用方法

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

删除

①添加列操作,在修改后面加一个删除

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

		}

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

messager控件为提示窗口 

messager不能向后台发送请求,用$.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("请选择需要删除的数据");
	}
}

 

③在dao类中添加删除方法

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) {
		try {
			dao.del(book);
			ResponseUtil.writeJson(resp, 1);
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, 0);
			} catch (IOException e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}

2、测试

所有操作结束都是关闭弹出框，并且刷新数据

增加 

 

 

删除 

选中斗破苍穹点击删除

 

 

到这里就结束了，我依旧是那个学IT的小学生 

欢迎大佬指点