Easyui之datagrid新增删除和批量删除

最新推荐文章于 2021-09-24 21:04:27 发布

南岸隔着海

最新推荐文章于 2021-09-24 21:04:27 发布

阅读量737

点赞数

文章标签： easyui

本文链接：https://blog.csdn.net/A2895922320/article/details/120335329

版权

本文档详细介绍了如何使用EasyUI实现数据的新增、删除和批量删除功能。首先，通过添加按钮并设置点击事件来创建新增功能，然后在点击新增时清空表单数据。接着，演示了如何在DAO和Web层处理新增数据，包括处理ID的生成。对于删除操作，分为单条删除和批量删除，通过弹窗确认并利用AJAX请求完成。最后，提供了完整的JavaScript代码示例和操作流程。

摘要由CSDN通过智能技术生成

一：新增

第一步：给页面添加一个新增的按钮

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

第二步：给新增按钮加一个点击事件，点击打开一个新增的窗口

但这会出来一个问题因为窗体是和修改是一个窗体（修改参考上一篇博客）你选中了那个点击修改然后再点新增也会回显到新增那个窗口上

只需要清空一下表单数据就行了 clear—关键字

结果展示：

第三步：提交form表单

先写dao方法

因为所用的数据库bid是不能为空所以采用时间戳转换成int类型当它的bid，这样也不会重复

book.setBid((int)new Date().getTime());

或者写一个获取最大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;
	}

然后再写web层

public String add(HttpServletRequest req, HttpServletResponse resp) {
		try {
			bookDao.add(book);
			ResponseUtil.writeJson(resp, 1);
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, 0);
			} catch (Exception e2) {
				// TODO: handle exception
				e2.printStackTrace();
			}
		}
		return null;
	}

然后就是提交form表单

var addFlag=0;  
$(function(){
	  /**
	   * 在easyui中，点击下一页上一页等默认的分页效果，携带的参数是page/rows
	   * bootstrap,点击下一页上一页等默认的分页效果，携带的参数是page/offset
	   */
	  $('#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>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="del();">删除</a>';
				}
} 
		    ]]    
		}); 
	  $('#btn-search').click(function(){
		  $('#dg').datagrid('load', {    
			    bname: $("#bname").val()
			}); 
	  });
	  $("#btn-add").click(function(){
//		  先清空一下表单数据
		 $('#ff').form('clear');
//		  打开一个窗体
		  $("#dd").dialog("open");
		  addFlag=1;
	  });
	  
	  $("#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){
			  $.ajax({
		        	url:$("#ctx").val()+'/book.action?methodName=del&bid='+ids.join(","),
		        	success:function(data){
		        		if(data==1){
		        			$('#dg').datagrid('reload');
		        		}
		        	}
		        });
		  }
	  });
  })
  function edit(){
	addFlag=2;
//	  dialog对话框窗口的方法扩展自window(窗口)
//	  $("#win").window("open");
	  $("#dd").dialog("open");
	  /**
	   * 将选中的数据表格对应数据填写到表单中
	   * 1.datagrid控件获取对应行数据
	   * 2.对应的行数据row填写到form控件中
	   */
	  var row = $('#dg').datagrid("getSelected");
	  $('#ff').form('load',row);
  }
  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("请选择要删除的行");
	  }
	  
  }
  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');
				}
			}
	  });
  }

原理：var一个参数为addFlod

点击新增就把addFlod修改为1

点击修改就把addFlod修改为2

如果addFlod为2就跳修改，如果为1就跳新增

二：删除

第一步：给datagrid添加一列“删除”

<a href="javascript:void(0);" onclick="del();">删除</a>

第二步：添加删除的点击事件

这里会使用到messager控件

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 {
		// TODO Auto-generated method stub
		super.executeUpdate("delete from t_mvc_book where bid=?", book, new String[] {"bid"});
	}

第四步：写web层

public String del(HttpServletRequest req, HttpServletResponse resp) {
		try {
			
				bookDao.del(book);
			}
			ResponseUtil.writeJson(resp, 1);
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, 0);
			} catch (Exception e2) {
				// TODO: handle exception
				e2.printStackTrace();
			}
		}
		return null;
	}

结果展示：

三：批量删除

思路：调用getSelections属性获取选中的所有行数，把获取到的所有行数放入一个数组里面

然后遍历删除

第一步：新建一个批量删除的按钮

<a id="btn-batchDel" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">批量删除</a>

第二步：给id="btn-batchDel"加一个点击事件

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

第三步：写web层（在原本的删除代码上点东西就可以了）

public String del(HttpServletRequest req, HttpServletResponse resp) {
		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) {
			// TODO: handle exception
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, 0);
			} catch (Exception e2) {
				// TODO: handle exception
				e2.printStackTrace();
			}
		}
		return null;
	}

拜拜！！！