easyui实现数据的增、删、改

一、前言

上次分享了easyui实现数据查询，今天分享easyui实现数据增、删、改

二、实现

1、后端代码编写

增加dao方法

package com.liubiao.dao;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.liubiao.entity.Book;
import com.liubiao.entity.Permission;
import com.liubiao.util.BaseDao;
import com.liubiao.util.BuildTree;
import com.liubiao.util.PageBean;
import com.liubiao.util.PinYinUtil;
import com.liubiao.util.StringUtils;
import com.liubiao.vo.TreeVo;

public class BookDao extends BaseDao<Book> {
	
	/**
	 * 是直接从数据库获取到的数据
	 * @param permission
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException+
	 */
	public List<Book> list(Book book,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String name = book.getName();
		String sql="select * from t_easyui_book where true ";
		if(StringUtils.isNotBlank(name)) {
			sql+=" and name like '%"+name+"%'";
		}
		return super.executeQuery(sql, Book.class, pageBean);
	}
	
//	增加
	public int add(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
		String sql = "insert into t_easyui_book values(null,?,?,?,?,?,?,?,?,?,?,?)";
		return super.executeUpdate(sql, book, new String[] {"name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales"});
	}
	
//	修改
	public int edit(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
		String sql = "update t_easyui_book set name=?,pinyin=?,cid=?,author=?,price=?,image=?,publishing=?,description=?,state=?,deployTime=?,sales=? where id=? ";
		return super.executeUpdate(sql, book, new String[] {"name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales","id"});
	}
	
//	删除
	public int del(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql = "delete from t_easyui_book where id=?";
		return super.executeUpdate(sql, book, new String[] {"id"});
	}
	
}

数据处理的类

package com.liubiao.web;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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

import com.liubiao.dao.BookDao;
import com.liubiao.entity.Book;
import com.liubiao.framework.ActionSupport;
import com.liubiao.framework.ModelDriven;
import com.liubiao.util.DataGridResult;
import com.liubiao.util.PageBean;
import com.liubiao.util.ResponseUtil;
import com.liubiao.util.Result;

public class BookAction extends ActionSupport implements ModelDriven<Book> {
	
	private Book book = new Book();
	private BookDao bookDao = new BookDao();
	
	public String datagrid(HttpServletRequest req, HttpServletResponse resp) throws Exception{
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		List<Book> list = this.bookDao.list(book, pageBean);
		ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal()+"",list));
		return null;
	}

	@Override
	public Book getModel() {
		// TODO Auto-generated method stub
		return book;
	}
	
//	将新增和修改方法合成一个
	public String save(HttpServletRequest req, HttpServletResponse resp) throws Exception{
		if(book.getId() != 0) {
			this.bookDao.edit(book);
		}else {
			this.bookDao.add(book);
		}
		ResponseUtil.writeJson(resp, Result.SUCCESS);
		return null;
	}
	
	public String del(HttpServletRequest req, HttpServletResponse resp) throws Exception{
		System.out.println(123);
		this.bookDao.del(book);
		ResponseUtil.writeJson(resp, Result.SUCCESS);
		return null;
	}
	
}

2、前端界面编写

做增、删、改

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<!-- 组件库源码的js文件 -->   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/book.js"></script> 
<title>增删改查</title>
</head>
<body height="100%">
	
	<input type="hidden" id="ss" value="${pageContext.request.contextPath }" />
	
	<div id="tb">
		<input class="easyui-textbox" id="name" style="width:20;padding-left: 10px;" data-options="label:'书名：' " >
		<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
		<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a>
	</div>
	
	<table id="dg" ></table>
	
	<div id="bookEdit" class="easyui-dialog" title="书籍信息编辑窗体" style="width:400px;height:400px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#fbtns'">   
		<form id="ff" method="post">   
		
		<input type="hidden" name="id" />   
	
		    <div>   
		        <label for="name">书籍名称:</label>   
		        <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />   
		    </div>   
		    <div>   
		        <label for="pinyin">拼音:</label>   
		        <input class="easyui-validatebox" type="text" name="pinyin" data-options="required:true" />   
		    </div>
		    <div>   
		        <label for="cid">书籍类别:</label>   
		        <input class="easyui-validatebox" type="text" name="cid" data-options="required:true" />   
		    </div>   
		    <div>   
		        <label for="outhor">作者:</label>   
		        <input class="easyui-validatebox" type="text" name="author" data-options="required:true" />   
		    </div>
		    <div>   
		        <label for="price">价格:</label>   
		        <input class="easyui-validatebox" type="text" name="price" data-options="required:true" />   
		    </div>   
		    <div>   
		        <label for="image">图片:</label>   
		        <input class="easyui-validatebox" type="text" name="image" data-options="required:true" />   
		    </div>
		    <div>   
		        <label for="publishing">出版社:</label>   
		        <input class="easyui-validatebox" type="text" name="publishing" data-options="required:true" />   
		    </div>   
		    <div>   
		        <label for="description">描述:</label>   
		        <input class="easyui-validatebox" type="text" name="description" data-options="required:true" />   
		    </div>
		    <div>   
		        <label for="state">书籍状态:</label>   
		        <input class="easyui-validatebox" type="text" name="state" data-options="required:true" />   
		    </div>   
		    <div>   
		        <label for="deployTime">上架时间:</label>   
		        <input class="easyui-validatebox" type="text" name="deployTime" data-options="required:true" />   
		    </div>
		    <div>   
		        <label for="sales">销量:</label>   
		        <input class="easyui-validatebox" type="text" name="sales" data-options="required:true" />   
		    </div>
		</form>  
		
		<div id="fbtns">
			<a id="btn-save" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">保存</a>
			<a id="btn-cancel" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">取消</a>
		</div>
		
	</div>  
	
</body>
</html>

处理增、删、改事件的js文件

$(function(){
	var ss = $("#ss").val();
	$('#dg').datagrid({    
	    url:ss+'/book.action?methodName=datagrid', 
	    pagination:true,
	    toolbar: '#tb',
	    columns:[[    
	        {field:'id',title:'id',width:100},
	        {field:'name',title:'书籍名称',width:100},
	        {field:'pinyin',title:'拼音',width:100,align:'right'}   ,
	        {field:'cid',title:'书籍类别',width:100},
	        {field:'author',title:'作者',width:100},
	        {field:'price',title:'价格',width:100},
	        {field:'publishing',title:'出版社',width:100},
	        {field:'deployTime',title:'上架时间',width:100} ,
	        {field:'xxx',title:'操作',width:300,
	        	formatter: function(value,row,index){
					return '<a href="javascript:void(0)" οnclick="edit()">修改</a>&nbsp;&nbsp;<a href="javascript:void(0)" οnclick="del()">删除</a>';
				}
	        } 
	    ]]
	});
	
//	点击搜索按钮完成按名字进行书籍查询
	$("#btn-search").click(function(){
		$('#dg').datagrid('load', {    
		    name: $("#name").val()
		}); 
	})
	
//	给新增按钮绑定点击事件
	$("#btn-add").click(function(){
		$("#bookEdit").dialog('open');
	})
	
	$("#btn-save").click(function(){
		$('#ff').form('submit', {    
			url:ss+'/book.action?methodName=save', 
		    success:function(data){
		    	data = eval('(' + data + ')');
//		    	debugger;
		    	if(data.code == 200){
//		    		alert("太君");
		    		$("#ff").form('clear');
		    		$("#bookEdit").dialog('close');
//		    		刷新datagrid数据
		    		$("#dg").datagrid('reload');
		    	}
		    }    
		});  
	})
	
})


function edit(){
//	做数据回显，就是将选中的datagrid行值回填到form表单
	var row = $('#dg').datagrid('getSelected');
	alert("太君");
	if(row){
		$('#ff').form('load',row);
	}
	$('#bookEdit').dialog('open');
}



function del(){
	alert("太君");
	var ctx = $("#ss").val();
	debugger;
	var row = $('#dg').datagrid('getSelected');
	if(row){
		$.ajax({
			url:ctx+'/book.action?methodName=del&id='+row.id,
			success:function(data){
		    	data = eval('(' + data + ')');
//		    	debugger;
		    	if(data.code == 200){
		    		alert("太君");
//		    		刷新datagrid数据
		    		$("#dg").datagrid('reload');
		    	}
			}
		});
	}
}

三、结果图