datagrid之新增、修改

最新推荐文章于 2024-09-10 07:46:37 发布

落日飞行

最新推荐文章于 2024-09-10 07:46:37 发布

阅读量658

点赞数

分类专栏：前端-EasyUI 文章标签： easyui 前端框架

本文链接：https://blog.csdn.net/m0_53151031/article/details/120317397

版权

前端-EasyUI 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言：上次与大家分享了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>  <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;
	}