效果:增删改查,鼠标移动到缩略图上进行放大显示,修改数据时的数据回显,通过后台返回的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,<%–显示复选框–%>--%>
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多分析下前台和后台的传参数据哦!!