万物皆可CRUD, SSM+Easyui 做了一点小小的封装,用到就直接CV操作了.

万物皆可CRUD,今天又写了一个,做了一些小的封装: SSM+Easyui

公共文件: commn.jsp

<link href="${pageContext.request.contextPath}/resource/easyui/themes/material/easyui.css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/resource/easyui/themes/icon.css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/resource/css/common.css" rel="stylesheet"/>
<script src="${pageContext.request.contextPath}/resource/easyui/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/easyui/jquery.easyui.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/easyui/locale/easyui-lang-zh_CN.js"></script>

js文件 : user.js

let userTable;
let userSearchForm;
let userAddForm;
let userEditForm;
let userAddDialog;
let userEditDialog;
let ctx=null;

let user = {
    init: function (contextPath) {
        ctx=contextPath;
        userTable = $("#user_table"); //表格
        userAddForm = $("#user_add_form"); //添加表单
        userEditForm = $("#user_edit_form"); //编辑表单
        userAddDialog = $("#user_add_dialog"); //添加弹框
        userEditDialog = $("#user_edit_dialog"); //编辑弹框
        userSearchForm = $("#user_search_form");//模糊查询
        user.initTable(); //初始化表格
    },
    URL: {
        list: function () {
            return ctx+'/user/list.do';
        },
        delete: function () {
            return ctx+'/user/delete.do';
        },
        add: function () {
            return ctx+'/user/add.do';
        },
        get: function (id) {
            return ctx+'/user/get.do?id=' + id;
        },
        update: function () {
            return ctx+'/user/update.do';
        }
    },
    //初始化表格数据
    initTable: function () {
        userTable.datagrid({
            title: '用户信息表',
            url: user.URL.list(),
            autoSave: true,//自动保存
            fit: true,
            collapsible: true,
            fitColumns: true,
            toolbar: '#user_toolbar',//绑定工具栏
            pagination: true,  //是否开启分页
            pageList: [5, 12, 15, 20],
            pageSize: 12,
            rownumbers: true, //显示行列号
            showFooter: true,
            singleSelect: false, //只可以选择1行
            columns: [[
                {field: 'id', title: 'ID', width: 100, checkbox: true},
                {field: 'phone', title: '电话号码', width: 250, align: 'center'},
                {field: 'role', title: '角色', width: 200, align: 'center'},
                {field: 'password', title: '密码', width: 200, align: 'center'},
                {field: 'username', title: '用户名', width: 200, align: 'center'},
                {
                    field: 'sex', title: '性别', width: 200, align: 'center',
                    formatter: function (value, row, index) {
                        return row.sex === 1 ? '男+'+ctx : '女'
                    }
                }
            ]]
        });
    },
    //查询
    search: function () {
        userTable.datagrid('load', {
            username: $('#user_search_form #username').val(),
            role: $('#user_search_form #role').val(),
            phone: $('#user_search_form #phone').val(),
            sex: $('#user_search_form #sex').val(),
            startTime: $('#user_search_form #startTime').val(),
            endTime: $('#user_search_form #endTime').val()
        });
    },
    //添加
    add: function () {
        userAddForm.form('submit', {
            url: user.URL.add(),
            contentType: 'application/json',
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                console.log(result)
                if (result) {
                    $.messager.alert('提示', '添加成功');
                    user.closeAddDialog();
                    user.clear(userAddForm);
                    user.reload();
                } else {
                    $.messager.alert('提示信息', "添加失败", 'warning');
                }
            }
        });
    },
    //删除
    delete: function () {
        //获取选中行的数据
        let selectRows = userTable.datagrid("getSelections");
        //如果没有选中行的话,提示信息
        if (selectRows.length < 1) {
            $.messager.alert("提示消息", "请选择要删除的记录!", 'warning');
            return;
        }
        //如果选中行了,则要进行判断
        $.messager.confirm("确认消息", "确定要删除所选记录吗?", function (isDelete) {
            //如果为真的话
            if (isDelete) {
                //定义变量值
                let strIds = "";
                //拼接字符串,这里也可以使用数组,作用一样
                for (let i = 0; i < selectRows.length; i++) {
                    strIds += selectRows[i].id + ",";
                }
                //循环切割
                strIds = strIds.substr(0, strIds.length - 1);
                $.post(user.URL.delete() + '?id=' + strIds, function (jsonObj) {
                    if (jsonObj.code === 0) {
                        userTable.datagrid("reload"); //删除成功后 刷新页面
                        $.messager.alert('提示', '删除成功!', 'info');
                    } else {
                        $.messager.alert('提示信息', '删除失败,请联系管理员!', 'warning');
                    }
                }, "JSON");
            }
        });
    },
    //更新
    update: function () {
        userEditForm.form('submit', {
            url: user.URL.update(),
            contentType: 'application/json',
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                if (result) {
                    $.messager.alert('提示', '更新成功', 'info');
                    user.closeEditDialog();
                    user.clear(userEditForm);
                    user.reload();
                } else {
                    $.messager.alert('提示信息', "更新失败", 'error');
                }
            }
        });
    },
    //显示添加框
    showAddDialog: function () {
        userAddDialog.dialog('open').dialog('setTitle', '添加');
    },
    //关闭添加框
    closeAddDialog: function () {
        user.clear(userAddDialog)
        userAddDialog.dialog('close');
    },
    //显示编辑框
    showEditDialog: function () {
        let sels = userTable.datagrid("getSelections");
        if (sels.length < 1) {
            $.messager.alert("对话框", "至少选择一行", 'warning');
            return;
        }
        if (sels.length > 1) {
            $.messager.alert("对话框", "只能选择一行", 'warning');
            return;
        }
        $.ajax({
            type: "GET",
            url: user.URL.get(sels[0].id),
            success: function (data) {
                if (data.code === 0) {
                    userEditForm.form("load", data.data);
                    userEditDialog.dialog('open');
                } else {
                    alert(data.msg);
                }
            }
        });
    },
    //关闭编辑框
    closeEditDialog: function () {
        user.clear(userEditForm)
        userEditDialog.dialog('close');
    },
    //重置表单
    clear: function (formElement) {
        formElement.form('clear');
    },
    //刷新
    reload: function () {
        userTable.datagrid("reload");
    },
}

后台布局 main.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>后台管理</title>
    <%@ include file="/WEB-INF/views/common/tag.jsp"%>
    <%@ include file="/WEB-INF/views/common/link.jsp"%>
</head>
<body class="easyui-layout">
<%--上--%>
<div region="north" style="height: 50px; background-color: #E0ECFF"></div>
<%--左--%>
<div region="west" style="width: 200px" title="导航菜单" split="true">
    <div id="leftMenu" class="easyui-sidemenu" data-options="data:menu,onSelect:menuSelect,multiple:true" style="width: 193px;"></div>
</div>
<%--主体--%>
<div data-options="region:'center'" style="background:#fff3f3;">
    <!--选项卡使用-->
    <div id="div_tabs" class="easyui-tabs" data-options="fit:true,border:false">
        <!--首页-->
        <div id="windows" title="用户管理" style="background-color: #ffffff;background-size: cover;">
           <iframe src="${pageContext.request.contextPath}/userPage.do" style='width:100%;height:98%' frameborder='0'></iframe>
        </div>
    </div>
</div>
<%--下--%>
<div region="south" style="height: 25px;padding: 5px" align="center"></div>
</body>
</html>
<script type="text/javascript">

    //点击左侧菜单
    function menuSelect(item){
        if(item==null || item.url==null){
            return;
        }
        //判断选项卡是否存在
        let has=$("#div_tabs").tabs("exists",item.text);
        if(has){
            //选中存在的选项卡
            $("#div_tabs").tabs("select",item.text);
        }else{
            //创建新的选项卡面板
            $("#div_tabs").tabs("add",{
                title:item.text,
                closable:true,
                content:"<iframe src="+item.url+" style='width:100%;height:98%' frameborder='0'/>"
            })
        }
    }

    //菜单数据,可以动态从后台加载: url: 请求路径
    let menu=[{
        text: '系统管理',
        iconCls: 'icon-sum',
        state: 'open',
        children: [{
            url:'/userPage.do',
            text: '用户管理',
            iconCls : 'icon-user'
        }, {
            url:'/rolePage.do',
            text: '角色管理',
            iconCls : 'icon-user'
        }, {
            text: '部门管理',
            iconCls : 'icon-user',
            url:'/deptPage.do',
        }]
    }, {
        text: '基础管理',
        iconCls: 'icon-more',
        state: 'open',
        children: [{
            text: '文档管理',
            iconCls : 'icon-user'
        }, {
            text: '下载管理',
            iconCls : 'icon-user'
        }, {
            text: 'Option6',
            iconCls : 'icon-user'
        }]
    }];

</script>


页面: user.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/common/tag.jsp" %>
<%@ include file="/WEB-INF/views/common/link.jsp" %>

<%--数据表格--%>
<table id="user_table"></table>

<%--顶部工具栏--%>
<div id="user_toolbar" style="display: none">
    <%--    操作按钮--%>
    <div style="margin-bottom:5px">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="user.showAddDialog()">添加</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="user.showEditDialog()">修改</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true">保存</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true">剪切</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="user.delete()">移除</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="user.reload()">刷新</a>
    </div>
    <%--    搜索表单--%>
    <form id="user_search_form">
        <span>开始时间:</span>
        <input id="startTime" class="easyui-datebox" style="width:100px">
        <span>结束时间: </span>
        <input id="endTime" class="easyui-datebox" style="width:100px">
        <span>用户名:</span>
        <input id="username" style="line-height:26px;border:1px solid #ccc">
        <span>电话:</span>
        <input id="phone" style="line-height:26px;border:1px solid #ccc">
        <span>性别</span>
        <select id="sex" class="easyui-combobox" name="role" style="width:130px;">
            <option value="">请选择性别</option>
            <option value="1">男生</option>
            <option value="0">女生</option>
        </select>
        <span>角色:</span>
        <select id="role" class="easyui-combobox" name="role" style="width:130px;">
            <option value="">请选择角色</option>
            <option value="role">管理员</option>
            <option value="user">普通用户</option>
        </select>
        <a href="#" class="easyui-linkbutton" plain="false" data-options="iconCls:'icon-search'"
           onclick="user.search()">查询</a>
        <a href="#" class="easyui-linkbutton" plain="false" data-options="iconCls:'icon-clear'"
           onclick="user.clear(userSearchForm)">重置</a>
    </form>
    <hr>
</div>

<%--添加弹框--%>
<div id="user_add_dialog" class="easyui-dialog"  style="width:500px;height:400px;top: 50px;padding: 10px;display: none"
     data-options="closed:'true',iconCls:'icon-save',resizable:true,modal:true,buttons:[{text:'重置',iconCls:'icon-clear',handler:function(){user.clear(userAddForm)}},{text:'保存',iconCls:'icon-save',handler:function(){user.add()}},{text:'取消',iconCls:'icon-cancel',handler:function(){user.closeAddDialog()}}]">
    <form id="user_add_form" data-options="iframe:false" method="post">
    <table class="com_table" align="center" cellpadding="5">
        <tr>
            <td></td>
            <td><label>用户名:</label></td>
            <td><input class="easyui-textbox com_input" type="text" name="username" data-options="required:true"/></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><label>电话号码:</label></td>
            <td><input class="easyui-textbox com_input" type="text" name="phone" data-options="required:true"/></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><label>密码:</label></td>
            <td><input class="easyui-textbox com_input" type="text" name="password" data-options="required:true"/></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><label>性别:</label></td>
            <td>
                <select class="easyui-combobox" name="sex" data-options="panelHeight:'auto',require:true" style="width:173px;">
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><label>用户:</label></td>
            <td>
                <select class="easyui-combobox" name="role" data-options="panelHeight:'auto',require:true" style="width:173px;">
                    <option value="用户">用户</option>
                    <option value="管理员">管理员</option>
                </select>
            </td>
            <td></td>
        </tr>
    </table>
    </form>
</div>

<%--编辑弹框--%>
<div id="user_edit_dialog" class="easyui-dialog"  style="width:500px;height:400px;top: 50px;padding: 10px;display: none" data-options="closed:'true',iconCls:'icon-save',resizable:true,modal:true,buttons:[{text:'更新',iconCls:'icon-ok',handler:function(){user.update()}},{text:'取消',iconCls:'icon-cancel',handler:function(){user.closeEditDialog()}}]">
    <form id="user_edit_form" data-options="iframe:false"  method="post">
        <table class="com_table" align="center" cellpadding="5">
            <input type="hidden" name="id" id="id">
            <tr>
                <td></td>
                <td><label>用户名:</label></td>
                <td><input class="easyui-textbox com_input" type="text" name="username" data-options="required:true"/></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><label>电话号码:</label></td>
                <td><input class="easyui-textbox com_input" type="text" name="phone" data-options="required:true"/></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><label>密码:</label></td>
                <td><input class="easyui-textbox com_input" type="text" name="password" data-options="required:true"/></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><label>性别:</label></td>
                <td>
                    <select class="easyui-combobox" name="sex" data-options="panelHeight:'auto',require:true" style="width:173px;">
                        <option value="1">男</option>
                        <option value="0">女</option>
                    </select>
                </td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><label>用户:</label></td>
                <td>
                    <select class="easyui-combobox" name="role" data-options="panelHeight:'auto',require:true" style="width:173px;">
                        <option value="用户">用户</option>
                        <option value="管理员">管理员</option>
                    </select>
                </td>
                <td></td>
            </tr>
        </table>
    </form>
</div>
<script src="<%=request.getContextPath()%>/resource/js/user.js"></script>
<script>
    user.init('<%=request.getContextPath()%>');
</script>


数据接口 UserController.java

package com.coderman.controller;

import com.coderman.model.EasyUIData;
import com.coderman.model.JsonData;
import com.coderman.model.User;
import com.coderman.service.IUserService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import java.util.List;

/**
 * @Author zhangyukang
 * @Date 2020/8/14 20:16
 * @Version 1.0
 **/
@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private IUserService userService;

    @RequestMapping(value = "/list.do",method = RequestMethod.POST)
    @ResponseBody
    public EasyUIData<User> list(@RequestParam(value = "page",defaultValue = "1") Integer page,
                         @RequestParam(value = "rows",defaultValue = "20") Integer rows,
                         User user){
        PageHelper.startPage(page,rows);
        List<User> userList=userService.query(user);
        PageInfo<User> pageInfo = new PageInfo<>(userList);
        return new EasyUIData<>(pageInfo.getTotal(), pageInfo.getList());
    }

    @RequestMapping(value = "/delete.do",method = RequestMethod.POST)
    @ResponseBody
    public JsonData delete(@RequestParam("id") String strIds) throws Exception{
        String[] ids = strIds.split(",");
        userService.delete(ids);
        return JsonData.success();
    }

    @RequestMapping(value = "/add.do",method = RequestMethod.POST)
    @ResponseBody
    public JsonData add(User user, HttpServletRequest request) throws Exception{
        System.out.println(request);
        userService.add(user);
        return JsonData.success();
    }

    @RequestMapping(value = "/update.do",method = RequestMethod.POST)
    @ResponseBody
    public JsonData update(User user){
        userService.update(user);
        return JsonData.success(user);
    }

    @RequestMapping(value = "/get.do",method = RequestMethod.GET)
    @ResponseBody
    public JsonData get(@RequestParam("id") Integer id){
        User user =userService.get(id);
        return JsonData.success(user);
    }

}

路由: ViewController.java

package com.coderman.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * 路由跳转
 * @Author zhangyukang
 * @Date 2020/8/14 17:31
 * @Version 1.0
 **/
@Controller
public class ViewController {

    /**
     * 角色管理
     * @return
     */
    @RequestMapping("/rolePage.do")
    public String rolePage(){ return "role";}

    /**
     * 用户管理
     * @return
     */
    @RequestMapping("/userPage.do")
    public String userPage(){ return "user";}

    /**
     * 部门管理
     * @return
     */
    @RequestMapping("/deptPage.do")
    public String deptPage(){ return "dept";}

    /**
     * 登入页面
     * @return
     */
    @RequestMapping("/loginPage.do")
    public String  loginPage(){ return "login"; }

    /**
     * 后台主页面
     * @return
     */
    @RequestMapping("/mainPage.do")
    public String mainPage(){ return "main"; }


}

# Java   EasyUI   JSP  

评论

公众号:mumuser

企鹅群:932154986

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×