datagrid之新增与删除

最新推荐文章于 2023-02-01 00:46:16 发布
最新推荐文章于 2023-02-01 00:46:16 发布
阅读量218 收藏
点赞数
文章标签： easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54546762/article/details/120333627
版权

一.新增

①.添加新增按钮（userManage.jsp）

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

②.添加点击事件弹出窗体（book.js）

	
	$("#btn-add").click(function(){
		//先清空表单数据
		$('#ff').form('clear');
		//在打开窗体
		$("#dd").dialog("open")
		Flag=1;
		
	});

 ③.提交表单

function submitForm(){
	//点击确定按钮提交表单到后台，并且是新增/修改共用一个方法
	//获取选择的数据
	var row=$('#dg').datagrid("getSelected");
	var href=null;
	if(Flag==2){
		href=$("#ctx").val()+'/book.action?methodName=edit'
	}else if(Flag==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');
			}
		}
	});

二.删除

1.单个删除

①.在datagrid添加一列删除

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

②.添加删除的方法

function del(){
	var row=$('#dg').datagrid("getSelected");
	if(row){
		var id=row.bid;
		//messager不能直接向后台发送请求  所有要用ajax
		$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
		    if (r){    
		         $.ajax({
		        	 url:$("#ctx").val()+'/book.action?methodName=del&bid='+id,
		        	 success: function(data){
		     			if(data==1){
		     				$("#dd").dialog("close");
		     				$('#dg').datagrid('reload');
		     			}
		     		}
		         })
		    }    
		});  
	}else{
		alert("请选择删除的行数")
	}

}

 运行结果如下：

2.批量删除

①.添加批量删除按钮（userManage.jsp）

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

②.添加一个批量删除的点击事件

$("#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 ){
			$.messager.confirm('确认','您确认想要删除吗？',function(r){    
			    if (r){    
			         $.ajax({
			        	 url:$("#ctx").val()+'/book.action?methodName=del&bid='+ids.join(","),
			        	 success: function(data){
			     			if(data==1){
			     				$("#dd").dialog("close");
			     				$('#dg').datagrid('reload');
			     			}
			     		}
			         })
			    }    
			});
			
		}
		
	});

运行结果如下：

3.BookDao

package com.zy.dao;

import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
import com.zy.entity.Book;

public class BookDao extends BaseDao<Book>{
	
	public void add( Book book) throws Exception {
		book.setBid((int)new Date().getTime());
		String sql="insert into t_mvc_book values(?,?,?)";
		super.executeUpdate(sql, book, new String[] {"bid","bname","price"});
	}
	
	public void del( Book book) throws Exception {
		
		String sql="delete from t_mvc_book where bid=?";
		super.executeUpdate(sql, book, new String[] {"bid"});
	}
	
	

}

4.BookAction

package com.zy.web;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.jasper.tagplugins.jstl.core.ForEach;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
import com.zy.dao.BookDao;
import com.zy.entity.Book;

public class BookAction extends ActionSupport implements ModelDriver<Book>{
	private Book book=new Book();
	private BookDao bookDao=new BookDao();
	
	
	public String add(HttpServletRequest req, HttpServletResponse resp)  {
		try {
			bookDao.add(book);
			ResponseUtil.writeJson(resp,1);
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp,0);
			} catch (Exception e1) {
			
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	
	
	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) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp,0);
			} catch (Exception e1) {
			
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	
	public Book getModel() {
		
		
		return  book;
	}

	
	
}

5.book.js文件


var Flag=0;
$(function(){

	$('#dg').datagrid({    
	    url:$("#ctx").val()+'/book.action?methodName=datagrid',
	    pagination:true,
	    fitColumns:true,
	    checkbox:true,
	    columns:[[    
	    	  {field:'ck',checkbox:true},    
	        {field:'bid',title:'代码',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<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")
		Flag=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 ){
			$.messager.confirm('确认','您确认想要删除吗？',function(r){    
			    if (r){    
			         $.ajax({
			        	 url:$("#ctx").val()+'/book.action?methodName=del&bid='+ids.join(","),
			        	 success: function(data){
			     			if(data==1){
			     				$("#dd").dialog("close");
			     				$('#dg').datagrid('reload');
			     			}
			     		}
			         })
			    }    
			});
			
		}
		
	});
	 
})


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


function del(){
	var row=$('#dg').datagrid("getSelected");
	if(row){
		var id=row.bid;
		//messager不能直接向后台发送请求  所有要用ajax
		$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
		    if (r){    
		         $.ajax({
		        	 url:$("#ctx").val()+'/book.action?methodName=del&bid='+id,
		        	 success: function(data){
		     			if(data==1){
		     				$("#dd").dialog("close");
		     				$('#dg').datagrid('reload');
		     			}
		     		}
		         })
		    }    
		});  
	}else{
		alert("请选择删除的行数")
	}

}


function submitForm(){
	//点击确定按钮提交表单到后台，并且是新增/修改共用一个方法
	//获取选择的数据
	var row=$('#dg').datagrid("getSelected");
	var href=null;
	if(Flag==2){
		href=$("#ctx").val()+'/book.action?methodName=edit'
	}else if(Flag==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');
			}
		}
	});

}

m0_54546762
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在miniui 中的datagrid行记录中使用 miniui按钮
mystonelxj的博客
03-27 2万+
miniUI Datagrid控件引入操作一般情况下可通过在在页面datagrid控件中添加一个专门的操作列，并且通过ondrawcell 方法在操作列中添加相关操作，例如先如下建立datagrid &lt;div id="datagrid" class="mini-datagrid" width="1000px" height="500px" url='@Url.Action("getDa...
delphi 对dbgrid的添加修改删除数据操作 sql数据库
01-02
delphi 对dbgrid的添加修改删除数据操作 sql数据库
datagrid之修改
m0_54546762的博客
09-15 119
1.dialog控件 ①.添加操作列（book.js文件） ②.usermanage写入dialog窗体然后添加form表单 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
datagrid动态加载列
Grace
04-10 2264
最近参加了组织部的项目，由于加载的表头需要从数据库中读取，而且你也不知道有几个，这就用到了动态加载列。经过研究理解，有了一点点成效。。。     由于本项目中既有固定的列也有动态添加的列，这个思路就是：先将固定的列写下来，从数据库中查询动态添加的列，将这些列表头信息放到一个对象数组中，再循环数组分别为每一列赋值。这是实现的主要思想，接下来就看如何去实现。     首先先建一个ViewModel
easyui的datagrid表格reload属性传入中文参数乱码问题
zhaoxinglin123的专栏
09-16 6781
easyui的datagrid 重新装载的时候，涉及到一些查询参数   比如含有
Wpf datagrid 增删改查
08-20
本例子是wpf中datagrid的增加修改，对于datagrid中的canuseraddrows=true，对当前空白行进行的添加数据，修改时，鼠标离开焦点可自动更新数据库，删除等等。不需要多余的界面进行添加修改等，利用datagrid的属性，...
DataGrid控件的新建、增减、修改、删除等测试
02-22
VS2010-WPF下，利用List、ObservableCollection绑定数据来实现DataGird控件的新建项、新增、修改、减少、排序、清空功能。 非常方便，比直接操作控件简单很多。
WPF .net4.5 +MvvmLight +Sqlite 实现数据增加删除即时更新到datagrid，源码
09-18
WPF应用程序 .net4.5框架 +MvvmLight +Sqlite 实现数据增加删除即时更新到datagrid，非常实用的入门级小数据操作应用程序，源码上传可以参考使用
query_easyui_datagrid的增加_修改_删除.
03-22
query_easyui_datagrid的增加_修改_删除.
通过PHP实现DataGrid功能
01-21
用开发【新增数据页面】，【编辑页面】，于是乎在网上找了找，类似的东西也有几个，开源 、付费的都有，不过基本都是基于MySQL。由于需要连接Oracle所以从二次开发和页面样式来 个人觉得phpMyDataGrid还是比较好上手...
EasyUI - 修改datagrid的content-type
qq_30655169的博客
07-27 6148
Spring MVC在接收集合请求参数时，需要在Controller方法的集合参数里前添加@RequestBody，而@RequestBody默认接收的enctype (MIME编码)是application/json，因此发送POST请求时需要设置请求报文头信息，否则Spring MVC在解析集合请求参数时不会自动的转换成JSON数据再解析成相应的集合。 JS代码： var us
Delphi DBGrid总结
beyondqd的专栏
08-25 1万+
<br />在 Delphi 语言的数据库编程中，DBGrid 是显示数据的主要手段 之一。但是 DBGrid 缺省的外观未免显得单调和缺乏创意。其实，我们完全可以在我们的程序中通过编程来达到美化DBGrid 外观的目的。通过编 程，我们可以改变 DBGrid 的表头、网格、网格线的前景色和背景色，以及相关的字体的大小和风格。<br />     以下的示例程序演示了对 DBGrid 各属性的 设置，使 Delphi 显示的表格就像网页中的表格一样漂亮美观。<br />     示例程序的运行：<br
Delphi中DBGrid 应用全书
kevinzhaoyp
10-23 3093
  Delphi中DBGrid 应用全书(一) ［ 作者：佚名    转贴自：本站原创    点击数：3340    更新时间：2004-11-21    文章录入：luokang ］     在 Delphi 语言的数据库编程中，DBGrid 是显示数据的主要手段之一。但是 DBGrid 缺省的外观未免显得单
delphi学习点滴——DBGrid的实用技巧
lynnelxl的专栏
12-22 1012
1.隔行不同颜色显示 with TDBGrid(Sender) do begin if (gdSelected in State) or (gdFocused in State) then Canvas.Brush.Color := clAqua else if DataSource.DataSet.RecNo mod 2 = 0 then Canvas.Brush.Color :=
【EasyUI】datagrid(‘reload‘) 删除数据后表格没有刷新 reload有向后台发送请求 但是表格数据没有刷新
weixin_44238215的博客
02-01 1513
必须保证当前页面上可以获取到id对应的元素，可以在浏览器调试工具的console控制台直接测试。1、reload 需要检查表格在初始化datagrid的时候，有没有对url赋值，reload触发时向后台访问的是这个url。2、reload 向后台发送请求时，当前页码和分页大小都是使用当前页面上的查询参数，这点需要注意。以上3点属于是常规的排查，排查后无法解决问题，可以参照第3点，在浏览器调试工具手动执行。
datagrid之新增、修改
m0_53151031的博客
09-15 594
前言：上次与大家分享了datagrid之修改以及查询，当然一个完整的项目离不开增删改查，今天就与大家分享datagrid之新增、修改。 一、明确目标： 目标：将新增与删除功能实现出来。 展示目标效果： 新增效果： 删除效果： 二、思路与代码具体实现： 一、增加： 1、思路： 1、在查询旁边添加一个新增按钮（并且id为“btn-add”） ...
EasyUi datagrid重新加载数据
热门推荐
kingdom858的博客
09-09 3万+
load方法，比如我已经定义一个datagrid的id为grid，那这个方法的使用方式为 $(“#grid”).datagrid(“load”,{ }); 它的参数为一个json对象，里面写的是你要传输的参数的键值对，调用这个方法来加载数据的时候，它传给后台的分页信息是从第一页开始的。 reload方法，使用方式也跟load的一样 $(“#grid”).datagrid(“reload”,
EasyUI实现动态新增和删除表格行，编辑完成后提交数据
最新发布
03-28
实现动态新增和删除表格行： 1. 添加一行：使用EasyUI的datagrid的appendRow方法，将新的一行数据添加到表格中。 2. 删除一行：使用EasyUI的datagrid的deleteRow方法，将选中的行数据从表格中删除。 实现编辑完成...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值