【easyui】之DataGrid数据增删改

小阿飞_

已于 2022-05-12 09:04:47 修改

阅读量1.1k

点赞数 11

分类专栏： easyui Web 文章标签： easyui 前端 javascript web 前端框架

于 2022-05-11 23:21:07 首次发布

本文链接：https://blog.csdn.net/yifei_345678/article/details/124719129

版权

Web 同时被 2 个专栏收录

30 篇文章 3 订阅

订阅专栏

easyui

4 篇文章 0 订阅

订阅专栏

上期文章小阿飞带大家使用easyui制作了表格数据的分页展示和模糊查询

回顾：【easyui】之DataGrid数据显示_小阿飞_的博客-CSDN博客

本期文章就是在上期文章的基础上对表格中的数据进行了增加、删除、修改功能

先看效果图：

点击《凡人修仙传》的删除按钮后就会把这一行数据从页面和数据库中删除

已经没有《凡人修仙传》了：

点击增加按钮后填上你要增加的内容点击保存就可以了

点击修改按钮后：

这是修改先的行数据内容

这是要修改的内容

点击保存后就修改成功了：

这是本期文章所使用的jar包，比之前的jar包多了几个哦

实现代码：

前端界面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/default/easyui.css">
</head>
<body>
<div style="text-align: center;margin: 5px 0;">
    <label for="name">搜索:</label>
    <input id="name" class="easyui-textbox" style="width:300px">
    <button id="btn" class="easyui-linkbutton">🔍</button>
</div>
<table id="dg"></table>
<div id="tb">
    <a onclick="insert()" class="easyui-linkbutton">增加</a>
</div>
<div id="dd"></div>
<script>

    $('#dg').datagrid({
        url: '${pageContext.request.contextPath}/book.do',
        columns: [[
            {field: 'id', title: '代码'},
            {field: 'name', title: '名称'},
            {field: 'price', title: '价格'},
            {
                field: '', title: '',
                formatter(v, r, i) {
                    return "<button onclick='del(" + r.id + ")'>删除</button> <button onclick='edit()'>修改</button>";
                }
            },
        ]],
        pagination: true,
        pageList: [5, 10, 20],
        pageSize: 5,
        toolbar: '#tb'
    });

    function del(id) {
        $.post('${pageContext.request.contextPath}/book/del.do', {id}, resp => {
            if (resp.includes('yes')) {
                $.messager.alert('提示', resp);
                reload()
            } else {
                $.messager.alert('提示', resp);
            }
        })
    }

    function reload() {
        $('#dg').datagrid('load', {
            name: $("#name").val()
        });
    }

    $("#btn").click(reload)

    let row;
    let url;

    function showDialog() {
        $('#dd').dialog({
            title: '书本修改',
            width: 400,
            height: 200,
            closed: false,
            href: 'edit.jsp',
            modal: true,
            onLoad() {
                $('#ff').form('load', row);
            },
            buttons: [{
                text: '保存',
                handler() {
                    let id = $("#book_id").val()
                    let name = $("#book_name").val()
                    let price = $("#book_price").val()
                    $.post(url, {id, name, price}, resp => {
                        if (resp.includes('yes')) {
                            $.messager.alert('提示', resp);
                            reload()
                            $("#dd").dialog('close', true)
                        } else {
                            $.messager.alert('提示', resp);
                        }
                    })
                }
            }, {
                text: '关闭',
                handler() {
                    $("#dd").dialog('close', true)
                }
            }]
        });
    }

    function edit() {
        row = $("#dg").datagrid("getSelected")
        url="${pageContext.request.contextPath}/book/edit.do"
        showDialog()
    }

    function insert() {
        row = null
        url="${pageContext.request.contextPath}/book/insert.do"
        showDialog()
    }

</script>
</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
	<script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/default/easyui.css">
</head>
<body>
<form id="ff" method="post">
    <div>
        <label>书籍编号:</label>
        <input id="book_id" readonly class="easyui-validatebox" type="text" name="id"/>
    </div>
    <div>
        <label>书籍名称:</label>
        <input id="book_name" class="easyui-validatebox" type="text" name="name"/>
    </div>
    <div>
        <label>书籍价格:</label>
        <input id="book_price" class="easyui-validatebox" type="text" name="price"/>
    </div>
</form>
</body>
</html>

实体类代码

package pojo;

public class Topic {
	private Integer id;
    private String name;
    
    public Topic() {
		// TODO Auto-generated constructor stub
	}

	public Topic(Integer id, String name) {
		super();
		this.id = id;
		this.name = name;
	}

	@Override
	public String toString() {
		return "Topic [id=" + id + ", name=" + name + "]";
	}

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
    
}

dao层代码

package dao;

import pojo.Topic;
import util.DBHelper;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class TopicDao {

    private Connection con;
    private PreparedStatement ps;
    private ResultSet rs;

    public List<Topic> list() {
        List<Topic> list = new ArrayList<Topic>();
        try {
            con = DBHelper.getCon();
            ps = con.prepareStatement("select * from bs_topic");
            rs = ps.executeQuery();
            while (rs.next()) {
                Topic topic = new Topic(rs.getInt(1), rs.getString(2));
                list.add(topic);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            DBHelper.close(con, ps, rs);
        }
        return list;
    }

}

处理层代码

package servlet;

import dao.BookDao;
import pojo.Book;
import pojo.PageBean;
import util.ResponseUtil;
import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;

@SuppressWarnings("all")
@WebServlet("/book/del.do")
public class DelServlet extends HttpServlet {

    private BookDao bookDao = new BookDao();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //使用填充帮助类帮我们直接封装对象的属性
        Book book=new Book();
        try {
            BeanUtils.populate(book,req.getParameterMap());
        } catch (Exception e) {
            e.printStackTrace();
        }
        //调用dao做删除
        int i=bookDao.delete(book);
        //返回给前台结果
        if(i>0){
            ResponseUtil.send(resp,"yes");
        }else{
            ResponseUtil.send(resp,"no");
        }
    }

}

package servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import dao.BookDao;
import pojo.Book;
import util.ResponseUtil;
import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/book/edit.do")
public class EditServlet extends HttpServlet {

    private BookDao bookDao = new BookDao();
    private ObjectMapper mapper = new ObjectMapper();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //使用填充帮助类帮我们直接封装对象的属性
        Book book=new Book();
        try {
            BeanUtils.populate(book,req.getParameterMap());
        } catch (Exception e) {
            e.printStackTrace();
        }
        //调用dao做删除
        int i=bookDao.edit(book);
        //返回给前台结果
        if(i>0){
            ResponseUtil.send(resp,"yes");
        }else{
            ResponseUtil.send(resp,"no");
        }
    }

}

package servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import dao.BookDao;
import pojo.Book;
import util.ResponseUtil;
import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@SuppressWarnings("all")
@WebServlet("/book/insert.do")
public class InsertServlet extends HttpServlet {

    private BookDao bookDao = new BookDao();
    private ObjectMapper mapper = new ObjectMapper();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //使用填充帮助类帮我们直接封装对象的属性
        Book book=new Book();
        try {
            BeanUtils.populate(book,req.getParameterMap());
        } catch (Exception e) {
            e.printStackTrace();
        }
        //调用dao做删除
        int i=bookDao.insert(book);
        //返回给前台结果
        if(i>0){
            ResponseUtil.send(resp,"yes");
        }else{
            ResponseUtil.send(resp,"no");
        }
    }

}

package servlet;

import dao.TopicDao;
import util.ResponseUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/topic/list.do")
public class TopicServlet extends HttpServlet {

    private TopicDao topicDao = new TopicDao();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        ResponseUtil.send(resp, topicDao.list());
    }

}

util包下的代码

package util;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class ResponseUtil {

    private static ObjectMapper mapper = new ObjectMapper();

    public static void send(HttpServletResponse resp,Object data){
        try {
            mapper.writeValue(resp.getOutputStream(),data);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}