easyui页面实现增删改查和后台结合的小案例

效果：增删改查，鼠标移动到缩略图上进行放大显示，修改数据时的数据回显，通过后台返回的json数据正确显示页面，图片文件上传，增删改的快捷键操作，颜色选择器，右击菜单等等

下面我们先看看效果是不是自己想要的吧，代码放最后了~~

数据展示页面：

显示页面时后台返回的json格式

添加数据页面：

修改回显数据页面：

删除数据页面：

jsp页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>product管理</title>
    <%@ include file="/WEB-INF/views/head.jsp" %>
    <!-- 引入自己的js -->
    <script type="text/javascript" src="/js/model/product.js"></script>
</head>
<body>
    <%--数据展示--%>
    <table id="dataGrid" class="easyui-datagrid" style="width:400px;height:250px"
           data-options="
               url:'/product/page',
               rownumbers: true,<%--显示行列号--%>
               fitColumns:true,
               <%--singleSelect:true,--%>
               fit:true,
               toolbar:'#tb',
               pagination:true,
               <%--enableHeaderClickMenu:'true'--%>
                remoteSort: false,
                border: false,
                singleSelect:false,
                <%--checkbox:true,&lt;%&ndash;显示复选框&ndash;%&gt;--%>
                checkOnSelect: true,<%--复选框--%>
                onLoadSuccess:loadSuccess<%-- 页面加载完后-》显示放大图 --%>
               ">
        <thead>
        <tr>
            <th data-options="field:'',width:80,align:'center',checkbox:true">多选框</th>
                        <th data-options="field:'name',width:80,sortable:'true',align:'center'">名称</th>
                        <th data-options="field:'color',width:60,sortable:'true',align:'center',formatter:colorFormat">颜色</th>
                        <%--<th data-options="field:'pic',width:80,sortable:'true',align:'center',hidden:true">图片</th>--%>
                        <th data-options="field:'smallpic',width:80,sortable:'true',align:'center',formatter:imgFormat">缩略图</th>
                        <th data-options="field:'costprice',width:80,sortable:'true',align:'center'">成本价</th>
                        <th data-options="field:'saleprice',width:80,sortable:'true',align:'center'">销售价</th>
                        <th data-options="field:'types',width:80,sortable:'true',align:'center',formatter:resultFormat">类型</th>
                        <th data-options="field:'unit',width:80,sortable:'true',align:'center',formatter:resultFormat">单位</th>
                        <th data-options="field:'brand',width:80,sortable:'true',align:'center',formatter:resultFormat">品牌</th>
                    </tr>
        </thead>
    </table>
    <%--高级查询，增删改 按钮--%>
    <div id="tb" style="padding:5px;height:auto">
        <div style="margin-bottom:5px;background-color: #e8f1f6">
            <a href="#" data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
            <a href="#" data-method="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</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="#" data-method="delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        </div>
        <div>
            <form id="searchForm" action="">
                名称: <input name="name" class="easyui-textbox" style="width:80px">
                <a href="#" class="easyui-linkbutton" data-method="search" iconCls="icon-search">查询</a>
            </form>
        </div>
    </div>
    <%--添加，修改 数据 弹出框--%>
    <div id="productDialog" class="easyui-dialog" title="功能操作" style="width:300px;padding: 15px;"
         data-options="iconCls:'icon-save',modal:true,closed:true">
        <!-- 表单准备 -->
        <form id="editForm" action="" method="post" enctype="multipart/form-data"<%--上传图片--%>>
            <input id="productId" type="hidden" name="id" />
            <table>
                <tr>
                    <td>名称:</td>
                    <td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>颜色:</td>
                    <td><input class="easyui-validatebox" type="color" name="color"></input></td>
                </tr>
                <tr>
                    <td>成本价:</td>
                    <td><input class="easyui-validatebox" type="text" name="costprice"></input></td>
                </tr>
                <tr>
                    <td>销售价:</td>
                    <td><input class="easyui-validatebox" type="text" name="saleprice"></input></td>
                </tr>
                <tr>
                    <td>产品图片:</td>
                    <td>
                        <input name="fileImage" class="easyui-filebox" style="width:100%">
                    </td>
                </tr>
                <tr>
                    <td>单位:</td>
                    <td>
                        <input  class="easyui-combobox" name="unit.id"
                                data-options="valueField:'id',textField:'name',panelHeight:'auto',url:'/util/findAllUnit'">
                    </td>
                </tr>
                <tr>
                    <td>品牌:</td>
                    <td>
                        <input  class="easyui-combobox" name="brand.id"
                                data-options="valueField:'id',textField:'name',panelHeight:'auto',url:'/util/findAllBrand'">
                    </td>
                </tr>
                <tr>
                    <td>类型:</td>
                    <td>
                        <input  class="easyui-combobox" name="types.id"
                                data-options="groupField:'group',valueField:'id',textField:'name',panelHeight:'auto',url:'/util/findChildren'">
                    </td>
                </tr>
            </table>
            <div style="text-align:center;padding-top:20px">
                <a href="#"  class="easyui-linkbutton" data-method="save" iconCls="icon-save">确定</a>
                <a href="#"  class="easyui-linkbutton" onclick="$('#productDialog').dialog('close')" iconCls="icon-cancel">取消</a>
            </div>
        </form>
    </div>
    <%--这是一个隐藏的右击增删改菜单哦 写在body中即可--%>
    <div id="menu_CRUD" class="easyui-menu" style="width: 30px; display: none;">
        <!--放置一个隐藏的菜单Div-->
        <!--具体的菜单事件请自行添加，跟toolbar的方法是基本一样的-->
        <div id="btn_add" data-method="add"  data-options="iconCls:'icon-add'">新增</div>
        <div id="btn_edit" data-method="edit" data-options="iconCls:'icon-edit'">修改</div>
        <div id="btn_delete" data-method="delete" data-options="iconCls:'icon-remove'" onclick="">删除</div>
    </div>
</body>
</html>

head.jsp：公共js，css引入  (在做多个页面时提取出来的相同的css，js)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 此部分代码为公共代码部分，在其他页面引用即可使用  <%@ include file="/WEB-INF/views/head.jsp"%> --%>
<!-- easyui的样式支持 -->
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<!-- easyui的图标支持 -->
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<!-- jQuery支持 -->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<!-- Easyui的功能支持(基于jQuery，必需在jQuery后面)-->
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<!-- Easyui的国际化支持(中文) -->
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- 对jQuery又做了很多功能扩展 -->
<script type="text/javascript" src="/easyui/plugin/jquery.jdirk.js"></script>

<%--引入验证的控件--%>
<link href="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.css" rel="stylesheet" />
<script src="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.rules.js"></script>

<!-- 我们自己对于js的扩展--公共js -->
<script type="text/javascript" src="/WEB-INF/test/common.js"></script>

<!-- jquery的按键扩展支持 -->
<script type="text/javascript" src="/js/plugin/shortcut_key/jquery.hotkeys.js"></script>

<%-- easyui鼠标移到图片上可放大预览 --%>
<script src="/js/plugin/datagrid_tooltip/jeasyui.extensions.base.tooltip.js"></script>

<%-- easyui表单编辑扩展   会和jeasyui.extensions.datagrid.tooltip.js冲突 --%>
<script src="/js/plugin/datagrid_cellEdit/jeasyui.extensions.datagrid.getColumnInfo.js"></script>
<script src="/js/plugin/datagrid_cellEdit/jeasyui.extensions.datagrid.editors.js"></script>
<script src="/js/plugin/datagrid_cellEdit/jeasyui.extensions.datagrid.edit.cellEdit.js"></script>

<!-- datagrid-隐藏列的支持 -->
<%--  <link href="/easyui/plugin/datagrid/jeasyui.extensions.datagrid.css" rel="stylesheet" />
  <script src="/easyui/plugin/menu/jeasyui.extensions.menu.js"></script>
  <script src="/easyui/plugin/datagrid/jeasyui.extensions.datagrid.getColumnInfo.js"></script>
  <script src="/easyui/plugin/datagrid/jeasyui.extensions.datagrid.columnToggle.js"></script>--%>
<link href="/css/plugin/datagrid_hide/Site.css" rel="stylesheet" />
<link href="/css/plugin/datagrid_hide/icon-standard.css" rel="stylesheet" />
<link href="/css/plugin/datagrid_hide/jeasyui.extensions.datagrid.css" rel="stylesheet" />
<script src="/js/plugin/datagrid_hide/jeasyui.extensions.menu.js"></script>
<script src="/js/plugin/datagrid_hide/jeasyui.extensions.datagrid.getColumnInfo.js"></script>
<script src="/js/plugin/datagrid_hide/jeasyui.extensions.datagrid.columnToggle.js"></script>

<%-- datagrid-扩展列信息  rowTooltip: false + tooltip:'true' 配合使用 --%>
<script src="/js/plugin/datagrid_tooltip/jeasyui.extensions.datagrid.tooltip.js"></script>
<script src="/js/plugin/datagrid_tooltip/jeasyui.extensions.datagrid.getColumnInfo.js"></script>
<script src="/js/plugin/datagrid_tooltip/jeasyui.extensions.datagrid.getDom.js"></script>
<script src="/js/plugin/datagrid_tooltip/jeasyui.extensions.datagrid.getRowData.js"></script>

jsp页面对于的js

function resultFormat(value,row,index) {  //类型，单位，品牌
    return value.name;
}

function unitFormat(value,row,index) {
    return rows.name;
}

//EasyUI datagrid 与 input type=color 颜色选择器========================================
function colorFormat(value,row,index) {
  return "<div style='width: 20px;height:20px;position:relative;margin-left:30px;background-color: "+value+"'></div>"
}


//显示图片：====================================
function imgFormat(value,row,index) {
    if(value == ''){
        return '';
    }else{
        return "<img id='t3' width='50px' src='"+value+"' alt='xx'>"
    }
}
//成功后进行加载  -》图片放大
function loadSuccess(data) {
    var rows = data.rows;
    for(var i=0;i<rows.length;i++){
        var result = rows[i];
        $.easyui.tooltip.init($("img[src='"+result.smallpic+"']"), {
            position: "right",
            content: "<div style=\"width:500px;height:380px;\"><img src='"+result.pic+"'  /></div>"
        });
    }
}

$(function () {
    var datagrid = $('#dataGrid'); //数据展示
    var productDialog = $("#productDialog");//弹框
    var searchForm = $('#searchForm'); //查询表单
    var editForm = $('#editForm'); //添加与修改表单

    //为所有有data-method的组件添加事件
    $("*[data-method]").on("click",function(){
        // var method = $(this).data("method");
        // zhengqing[method]();
        zhengqing[$(this).data("method")]()
    })

    //防止污染   CRUD
    window.zhengqing = {
        // 下面做CRUD===============================================
        add:function(){
            editForm.form("clear"); //清空form中的数据
            //添加的时候显示密码
            $("*[data-save]").show();
            $("*[data-save] input").validatebox("enable");
            //打开面板(绝对居中)
            productDialog.dialog("center").dialog('open').dialog("setTitle","添加数据");
        },
        edit:function () {
            //记住 ：选择一条数据才能进行修改
            var row =  datagrid.datagrid("getSelected");
            if(row){
                editForm.form("clear");  //清空form中的数据
                $("*[data-save]").hide();//隐藏带data-save属性的元素
                $("*[data-save] input").validatebox("disable");
                //打开面板(绝对居中)
                productDialog.dialog("center").dialog('open').dialog("setTitle","修改数据");
                //数据进行回显
                if(row.unit){ //单位
                    row["unit.id"] = row.unit.id;
                }
                if(row.brand){ //品牌
                    row["brand.id"] = row.brand.id;
                }
                if(row.types){ //类型
                    row["types.id"] = row.types.id;
                }
                editForm.form("load",row);//加载数据
            }else{
                $.messager.alert('提示','请选择1条数据再进行修改！',"warning");
            }

        },
        save:function () {
            var url = "/product/save";//注意：添加和修改的路径要分开哦
            var id = $("#productId").val(); //拿到表单中的id
            if(id){
                url = "/product/update?cmd=update"
            }
            editForm.form('submit', {  //提交表单
                url: url,
                onSubmit: function(){
                    return $(this).form('validate'); //提交之前执行的功能，如果返回false则不会再执行
                },
                //注意：easyui提交后表单后 返回的值只是一个字符串
                success: function(result){
                    //json字符串转换成Json数据 eval("("+jsonStr+")") /JSON.parse(jsonStr)
                    //console.debug(result);
                    result = JSON.parse(result);
                    if(result.success){
                        datagrid.datagrid('reload'); //成功则重新载入当前页面
                        productDialog.dialog('close'); //关闭弹出框
                    }else{
                        $.messager.alert('提示','添加失败:<br /> '+result.msg,"info");
                    }
                }
            });
        },
        delete:function(){  //可进行多行和单行删除
            //getSelected:返回第一个被选中的行或如果没有选中的行则返回null。
            //getChecked:在复选框呗选中的时候返回所有行。（该方法自1.3版开始可用）
            var row = datagrid.datagrid("getChecked");//获取勾选的数据     
            if (row.length!=0){
                $.messager.confirm('确定','是否确定<span style="color: red;font-size: 20px;">删除'+row.length+'条</span>数据？？',function (r) {
                    for (var i = row.length - 1; i >= 0; i--) {
                        if (r){
                            $.get("/product/delete",{id:row[i].id},function (result) {
                                if (result.success){  //删除成功
                                    datagrid.datagrid("reload");//刷新页面  reload：删除之后会在当前页面  当删除本页所有数据之后会跳到前一个页面
                                }else {  //删除失败
                                    $.messager.alert('提示','此数据删除失败：<br />'+result.msg,"info");
                                }
                            })
                        }
                    }
                });
            }else {
                $.messager.alert('提示','请选择1条数据进行删除',"warning");
            }
        },
        // 上面做CRUD===============================================
        search:function(){
            var params = $("#searchForm").serializeObject();//获取过滤的参数值
            datagrid.datagrid('load',params);//刷新grid
        }
    };

//DataGrid右键菜单代码：=======================================
    $('#dataGrid').datagrid({
        /**
         * 右键时触发事件
         * @param e:里面功能很多哦
         * @param rowIndex:点击时当前所在行的索引
         * @param rowData:点击时当前行的数据
         */
        onRowContextMenu: function (e, rowIndex, rowData) {
            e.preventDefault(); //阻止浏览器捕获右键事件
            $(this).datagrid("clearSelections"); //取消所有选中项
            $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
            $('#menu_CRUD').menu('show', {
                //显示右键菜单
                left: e.pageX,//在鼠标点击处显示菜单
                top: e.pageY
            });
            e.preventDefault();  //阻止浏览器自带的右键菜单弹出
        }
    });

// 快捷键支持增删改--绑定相应的事件--按DEL就会执行删除,按SHIFT+1是添加,SHIFT+2是修改=========================
    //注意：需要jquery.hotkeys.js插件哦！！
    $(document).bind('keydown', 'del', zhengqing.delete);
    $(document).bind('keydown', 'Shift+1', zhengqing.add);
    $(document).bind('keydown', 'Shift+2', zhengqing.edit);
})

温馨小提示：这里我只把easyui前台页面的一个CRUD的处理给出来，后台处理返回的数据要根据自己的实现情况来哦，注意前台页面传参和后台对应，以及后台处理数据之后返回给页面的参数，页面如何去正确接收显示即可实现一个简单的增删改查了，记得多按F12多分析下前台和后台的传参数据哦！！

easyui页面实现增删改查和后台结合的小案例

猜你喜欢