index.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    <link rel="stylesheet" type="text/css" href="/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/themes/icon.css">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.easyui.min.js"></script>

persionListjsp页面

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2020/9/5
  Time: 19:12
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <base href="<%=basePath %>"/>
    <title>Title</title>
    <%@include file="commons/index.jsp"%>
</head>
<script>
    function text() {
   
    // 测试 reload方法 意思是重新请求当前页
        $("#datagridpersion").datagrid("reload",{
   
        })
    }
    function text2() {
   
        $("#datagridpersion").datagrid("load",{
   
        })
    }


</script>

<body>

<button  onclick="text()" >reload</button>
<button onclick="text2()">load</button>

<hr>
<%--列表按钮组--%>
<div id="datagridtoorbar">
    <a href="javascript:void(0)" >添加</a>
    <a href="javascript:void(0)" >删除</a>
</div>


<%--添加按钮组--%>
<div id="datagridtooradd">
    <a href="javascript:void(0)" >添加</a>
    <a href="javascript:void(0)" >清空</a>
</div>

<%--编辑按钮组--%>
<div id="datagridtooredit">
    <a href="javascript:void(0)" >修改</a>
    <a href="javascript:void(0)" >清空</a>
</div>


<table id="datagridpersion">
    <thead>
    <tr>
        <th data-options="field:'id',width:100,checkbox:true">ID</th>
        <th data-options="field:'name',width:100">姓名</th>
        <th data-options="field:'gender',width:100,formatter:person.fmt">性别</th>
        <th data-options="field:'age',width:100,sortable:true">年龄</th>
        <th data-options="field:'phone',width:100">手机号</th>
        <th data-options="field:'address',width:300">地址</th>
        <th data-options="field:'jyaq',width:300,formatter:person.caozuo">操作</th>
    </tr>
    </thead>
</table>

<%--添加的界面--%>
<div id="dialogadd" align="center">
    <form id="addform" action="/add" method="post">
    <table>
        <tr>
            <td>名字</td>
            <td><input type="text" name="name" id="name"/></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><input type="text" name="gender" id="gender"/></td>
        </tr>
        <tr>
            <td>年龄</td>
            <td><input type="text" name="age" id="age"/></td>
        </tr>
        <tr>
            <td>手机</td>
            <td><input type="text" name="phone" id="phone"/></td>
        </tr>
        <tr>
            <td>地址</td>
            <td><input type="text" name="address" id="address"/></td>
        </tr>
    </table>


    </form>
    
</div>


<%--修改的界面--%>
<div id="dialogedit" align="center">
    <form id="editform" action="/edit" method="post">
        <table>
         <input type="hidden" name="id" id="id"/></td>
           <tr>
                <td>名字</td>
                <td><input type="text" name="name" id="name"/></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input type="text" name="gender" id="gender"/></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input type="text" name="age" id="age"/></td>
            </tr>
            <tr>
                <td>手机</td>
                <td><input type="text" name="phone" id="phone"/></td>
            </tr>
            <tr>
                <td>地址</td>
                <td><input type="text" name="address" id="address"/></td>
            </tr>
        </table>


    </form>

</div>








<script>
    // person相关的函数
    var person ={
   
        /** 参数： value 当前列的值 row 当前行的json数据 index 数据的下标 */
        fmt:function(value,row,index) {
   
            console.log(value+"==="+row+"==="+index)
            if(value==1){
   
                return '男'
            }else{
   
                return '女'
            }
        },

        //格式化显示操作的按钮
        caozuo:function (value,row,index) {
   
            return '<a href="javascript:void(0)" class="xiu_gai">修改</a> <a href="javascript:void(0)" class="shan_chu">删除</a>';
        }
    };


    $("#datagridpersion").datagrid({
   

        title:"用户信息",
        iconCls:"icon-man",
        height:500,
        width:1000,
        url:'/showPersion',
        pagination:true,
    // 引用按钮组
        toolbar: '#datagridtoorbar',
        rownumbers:true, //显示行号
        checkOnSelect:false, //为false的时候，只有复选框被选中，才是真正的选中
        striped:true, //黑白相间
        //数据加载完成之后，执行的代码
        onLoadSuccess:function () {
   
            $('.xiu_gai').linkbutton({
   
                iconCls:"icon-edit",
                onClick:function () {
   
                // 点击了这个编辑按钮，先显示编辑的页面
                    $('#dialogedit').dialog({
   
                        closed:false,
                        // 是对话框有灯罩的效果
                        modal:true
                    })

                    // console.log($(this).parent().parent().parent().children())
                // 显示完修改的页面，现在需要将值回填到表单中，那么就需要获得当前行的值
                // 获得当前行的数据的id
                    var vid = $(this).parent().parent().parent().children().eq(0).find("input").val();
                    // console.log(vid)
                // ajax请求获取当前的数据
                // 填充到当前的编辑页
                    var ps={
   'id':'1001','name':'六级','age':18,'gender':1,'phone':1836396369,'address':"哈哈哈哈"};
                    $('#editform').form('load','/getbyid?id='+vid);


                }
            });
            $('.shan_chu').linkbutton({
   
                iconCls:"icon-cancel"
            });
        }
    });

// 生效添加用户的easyui的样式

    $('#dialogadd').dialog({
   
        width:300,
        title:"添加客户信息",
        iconCls:"icon-man",
        buttons:"#datagridtooradd",
        closed:true   //定义这个弹框初始化的时候是关闭的


    })
    // 生效编辑用户的easyui的样式

    $('#dialogedit').dialog({
   
        width:300,
        title:"编辑客户信息",
        iconCls:"icon-man",
        buttons:"#datagridtooredit",
        closed:true   //定义这个弹框初始化的时候是关闭的


    })



//生效列表按钮组
    $('#datagridtoorbar>a:contains(添加)').linkbutton({
   
        iconCls:"icon-add",
        onClick:function () {
   
        // 1 显示框 修改dialog的closed的属性
            $('#dialogadd').dialog({
   
                closed:false,
            // 是对话框有灯罩的效果
                modal:true
            })


        }
    });

    $('#datagridtoorbar>a:contains(删除)').linkbutton({
   
        iconCls:"icon-remove",
        onClick:function () {
   
        // 获得被选中的行
        // 先获取整个列表，之后用easyui里面的datagrid，这个里面有一个方法getChecked
            var datagrid = $("#datagridpersion").datagrid("getChecked");
            //getChecked 方法的返回值是选择中的当前行Jason数据列表

            //获得所有的被选中的id
            var list01=[];
            var param ="";
            for(var i=0;i<datagrid.length;i++){
   
                var id=datagrid[i].id;
                list01.push(id);
                if(i==0){
   
                    param=param+"id="+id;
                }else {
   
                    param=param+"&id="+id;
                }


            }
            console.log(typeof list01);
        // 发送ajax请求
            $.ajax({
   
                url: "/deleteAll",  //请求的路径
                type:"get",   //请求的类型
                data:param,    //请求的数据
                dataType:"json",  //返回的数据的类型
                success:function (json) {
       //返回数据要执行的函数
                        console.log(json);
                    $("#datagridpersion").datagrid("reload",{
   
                    });//重新加载当前页
                    $.messager.show({
   
                        title:"提示",
                        msg:json.msg
                    })


                }
            })
        }
    })

// 生成添加按钮组的样式
    $('#datagridtooradd>a:contains(添加)').linkbutton({
   
        iconCls:"icon-ok",
        onClick:function () {
   
        // 1 将表单的数据进行提交
            $('#addform').form('submit',{
   
                success:function (data) {
   
                    console.log(data);
                    var parse = JSON.parse(data);
                    $.messager.show({
   
                        title:"提示",
                        msg:parse.msg
                    });
                    $('#dialogadd').dialog({
   
                        closed:true

                    });
                    // 2 在表单提交成功之后，datagrid重新的加载
                    $("#datagridpersion").datagrid("reload")
                // 清空表单
                    $("#addform").form("clear")

                }

            })



        }

    });

    $('#datagridtooradd>a:contains(清空)').linkbutton({
   
        iconCls:"icon-clear"
    });

// 编辑的按钮组的样式
    $('#datagridtooredit>a:contains(修改)').linkbutton({
   
        iconCls:"icon-edit",
    // 点击这个修改之后，将修改的数据往后台传
        onClick:function () {
   
        // 提交表单数据
            $('#editform').form('submit',{
   
                success:function (data) {
   
                    //给你一个提示的信息
                    var parse = JSON.parse(data);
                    $.messager.show({
   
                        title:"提示",
                        msg:parse.msg
                    });
                    //关闭修改的页面
                    $('#dialogedit').dialog({
   
                        closed:true

                    });
                    // 2 在表单提交成功之后，datagrid重新的加载
                    $("#datagridpersion").datagrid("reload")


                }


            });

        }
    });
    $('#datagridtooredit>a:contains(清空)').linkbutton({
   
        iconCls:"icon-clear"
    });
</script>
</body>
</html>

controller层

package com.controller;

import com.pojo.person;
import com.service.PersionService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/** * @author liujing * @date 2020/9/5--13:07 */
@Controller
public class PersonController {
   
    @Autowired
    private PersionService persionService;
    @RequestMapping("/getbyid")
    @ResponseBody
    public Object getById(int id){
   
        person allById = persionService.getAllById(id);
        System.out.println(allById.toString());

        return allById;
    }
// 添加用户
    @ResponseBody
    @RequestMapping("/add")
    public  Object  add(person p){
   

        System.out.println(p);
        int i = persionService.addPersion(p);
        Map<String, String> map = new HashMap<>();
        map.put("code","200");
        map.put("msg","添加成功");
        return map;

    }


    // 修改用户
    @ResponseBody
    @RequestMapping("/edit")
    public  Object  edit(person p){
   
        System.out.println(p.toString());
        int i1 = persionService.updateById(p);
        System.out.println(p);

        Map<String, String> map = new HashMap<>();
        map.put("code","200");
        map.put("msg","编辑成功");
        return map;

    }

    @ResponseBody
    @RequestMapping("/showPersion")
    public  Object  showPersion( int page,
                                 int rows){
   
        Object all02 = persionService.getAll02(page,rows);
        return all02;

    }

    @ResponseBody
    @RequestMapping("/deleteAll")
    public  Object  deleteAll(HttpServletRequest request){
   
        String[] ids = request.getParameterValues("id");
        System.out.println(ids[0]);
        System.out.println(ids[1]);
        int i = persionService.deleteBatch(ids);
        Map<String, String> map = new HashMap<>();
        map.put("code","200");
        map.put("msg","批量删除成功");
        return map;


    }



}

service层

package com.service;

import com.pojo.person;
import org.apache.ibatis.annotations.Param;

import java.util.List;

/** * @author * @date 2020/9/5--19:45 */
public interface PersionService {
   
    public Object getAll02(int page, int rows);

    public int deleteBatch(@Param("ids") String[] ids);

    public int addPersion(person p);

    public person getAllById(int id);

    public int updateById(person p);
}

package com.service.impl;



import com.baomidou.mybatisplus.core.metadata.IPage;
import com.mapper.persionMapper;
import com.pojo.person;
import com.service.PersionService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import javax.sound.midi.Soundbank;
import java.util.List;

/** * @author * @date 2020/9/5--19:46 */
@Service
public class PersionServiceimpl implements PersionService {
   
    @Autowired
    private persionMapper persionMapper;
    @Override
    public Object getAll02(int page, int rows) {
   
        

        List<person> all01 = persionMapper.getAll01();

        return all01;
    }

    @Override
    public int deleteBatch(String[] ids) {
   
        int i = persionMapper.deleteAll(ids);
        return i;

    }

    @Override
    public int addPersion(person p) {
   
        int i = persionMapper.addPersion(p);
        return i;
    }

    @Override
    public person getAllById(int id) {
   
        person byId = persionMapper.getById(id);
        return byId;
    }

    @Override
    public int updateById(person p) {
   
        int update = persionMapper.update(p);
        return update;
    }
}

pojo层

package com.pojo;

import com.fasterxml.jackson.annotation.JsonFilter;
import org.springframework.stereotype.Component;

import java.util.Objects;

/** * @author * @date 2020/9/5--13:05 */

public class person {
   

    private int id;
    private String name;
    private String gender;
    private  String age;
    private String phone;
    private String address;

    public person() {
   
    }

    public person(int id, String name, String gender, String age, String phone, String address) {
   
        this.id = id;
        this.name = name;
        this.gender = gender;
        this.age = age;
        this.phone = phone;
        this.address = address;
    }

    public int getId() {
   
        return id;
    }

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

    public String getName() {
   
        return name;
    }

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

    public String getGender() {
   
        return gender;
    }

    public void setGender(String gender) {
   
        this.gender = gender;
    }

    public String getAge() {
   
        return age;
    }

    public void setAge(String age) {
   
        this.age = age;
    }

    public String getPhone() {
   
        return phone;
    }

    public void setPhone(String phone) {
   
        this.phone = phone;
    }

    public String getAddress() {
   
        return address;
    }

    public void setAddress(String address) {
   
        this.address = address;
    }

    @Override
    public boolean equals(Object o) {
   
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        person person = (person) o;
        return id == person.id &&
                Objects.equals(name, person.name) &&
                Objects.equals(gender, person.gender) &&
                Objects.equals(age, person.age) &&
                Objects.equals(phone, person.phone) &&
                Objects.equals(address, person.address);
    }

    @Override
    public int hashCode() {
   
        return Objects.hash(id, name, gender, age, phone, address);
    }

    @Override
    public String toString() {
   
        return "person{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", gender='" + gender + '\'' +
                ", age='" + age + '\'' +
                ", phone='" + phone + '\'' +
                ", address='" + address + '\'' +
                '}';
    }
}

mapper层

package com.mapper;

import com.pojo.person;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Component;

import java.util.List;

/** * @author * @date 2020/9/5--19:26 */
@Component
@Mapper
public interface persionMapper {
   
// 通过id获取
    public person getById(int id);
//得到全部
    public List<person> getAll01();
//批量删除
    public int deleteAll(@Param("ids") String[] ids);
//添加用户
    public int addPersion(person p);
// 修改用户
    public int update(person p);
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.mapper.persionMapper">

    <select id="getAll01" resultType="com.pojo.person" >
        SELECT
        id,
        name ,
        age,
        gender,
        phone,
        address
        FROM persion
    </select>

    <select id="getById" resultType="com.pojo.person" >
        SELECT
        id,
        name ,
        age,
        gender,
        phone,
        address
        FROM persion where id=#{
   id}
    </select>

    <delete id="deleteAll">

            delete from persion where id in
            <foreach collection="ids" item="id" open="(" separator="," close=")">
                #{
   id}
            </foreach>
    </delete>

    <insert id="addPersion">
        insert into persion(name,age,gender,phone,address) values (#{
   name},#{
   age},#{
   gender},#{
   phone},#{
   address})
    </insert>


    <update id="update">
            update persion
            <trim prefix="set" suffixOverrides=",">
                <if test="name != null">
                    name =#{
   name},
                </if>

                <if test="gender != null">
                    gender =#{
   gender},
                </if>

                <if test="age != null">
                    age =#{
   age},
                </if>

                <if test="phone != null">
                    phone =#{
   phone},
                </if>

                <if test="address != null">
                    address =#{
   address},
                </if>
            </trim>
            where id=#{
   id}
    </update>
</mapper>

利用easyui实现增删改查：ssm项目的全部代码

index.jsp页面

persionListjsp页面

controller层

service层

pojo层

mapper层