easyui的前台列表及后台代码

最新推荐文章于 2021-09-15 00:29:11 发布

宝宝程序员

最新推荐文章于 2021-09-15 00:29:11 发布

阅读量471

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_42359423/article/details/80533565

版权

本文介绍了一个使用JQuery EasyUI插件和Java后端实现的简单会员管理系统示例，展示了如何通过前端框架展示数据表格，并进行数据的增删改查操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>欢迎来到极乐世界</title>
<link rel="stylesheet" href="<%=request.getContextPath() %>/jquery-easyui-1.4/themes/default/easyui.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/jquery-easyui-1.4/themes/icon.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery-easyui-1.4/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery-easyui-1.4/jquery.easyui.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/jquery-easyui-1.4/easytree.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>

</head>
<body>
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<div>
<table class="easyui-datagrid" id="userList" title="会员列表"
data-options="singleSelect:false,collapsible:true,pagination:true,url:'/getall',method:'get',pageSize:5,toolbar:toolbar,pageList:[2,5,10]">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'id',width:60">ID</th>
<th data-options="field:'name',width:200">姓名</th>
<th data-options="field:'password',width:100">密码</th>
<th data-options="field:'age',width:100">年龄</th>
<th data-options="field:'sex',width:80,align:'right'">性别</th>
<th data-options="field:'hobby',width:100">爱好</th>
<th data-options="field:'descs',width:100">介绍</th>

<th data-options="field:'address',width:100">地址</th>

</tr>
</thead>
</table>
</div>
<div id="userAdd" class="easyui-window" title="新增会员" data-options="modal:true,closed:true,iconCls:'icon-save',href:'/add'" style="width:800px;height:480px;padding:10px;">
添加
</div>
<div id="userUpd" class="easyui-window" title="修改" data-options="modal:true,closed:true,iconCls:'icon-save',href:'/rest/page/update'" style="width:800px;height:480px;padding:10px;">
修改
</div>

</div>

</body>
<script type="text/javascript">

function getSelectionsIds(){
var userList = $("#userList");
var sels = userList.datagrid("getSelections");
var ids = [];
for(var i in sels){
ids.push(sels[i].id);
}
ids = ids.join(",");
return ids;
}
var toolbar = [{
text:'新增',
iconCls:'icon-add',
handler:function(){
window.location.href="/add";
}
},{
text:'编辑',
iconCls:'icon-edit',
handler:function(){
var ids = getSelectionsIds();
if(ids.length == 0){
$.messager.alert('提示','必须选择一个商品才能编辑!');
return ;
}
if(ids.indexOf(',') > 0){
$.messager.alert('提示','只能选择一个商品!');
return ;
}

$("#userUpd").window({
onLoad :function(){
//回显数据
var data = $("#userList").datagrid("getSelections")[0];
$("#upd").form("load",data);

//回显富文本
itemupdEditor.html(data.descs);

//回显复选框
var hobbys=data.hobby.split(",");
for(var i in hobbys){
//复选框回显
var h=$(".ck[value='"+hobbys[i].trim()+"']").get(0);
if(h!=undefined){
h.checked=true;
}
}

DIDACAKE.init({
"pics" : data.image,
fun:function(node){
DIDACAKE.changeItemParam(node, "upd");
}
});

}
}).window("open");

}
},{
text:'删除',
iconCls:'icon-cancel',
handler:function(){
var ids = getSelectionsIds();
if(ids.length == 0){
$.messager.alert('提示','未选中用户!');
return ;
}
$.messager.confirm('确认','确定删除ID为 '+ids+' 的会员吗？',function(r){
if (r){
/* $.post("/user/delete",{'ids':ids}, function(data){
if(data.status == 200){
$.messager.alert('提示','删除会员成功!',undefined,function(){
$("#userList").datagrid("reload");
});
}
});
*/
$.ajax({
type: "POST",
url: "/rest/delete",
data: {"ids":ids},
statusCode : {
200 : function(){
$.messager.alert('提示','删除商品成功!');
$("#userList").datagrid("reload");
},
400 : function(){
$.messager.alert('提示','提交的参数不合法!');
},
500 : function(){
$.messager.alert('提示','新增商品失败!');
}
}
});

}
});
}
},'-',{
text:'导出',
iconCls:'icon-remove',
handler:function(){
var optins = $("#userList").datagrid("getPager").data("pagination").options;
var page = optins.pageNumber;
var rows = optins.pageSize;
$("<form>").attr({
"action":"/user/export/excel",
"method":"POST"
}).append("<input type='text' name='page' value='"+page+"'/>")
.append("<input type='text' name='rows' value='"+rows+"'/>").submit();
}
}];
</script>
</body>

</html>

后台controller层写列表方法,

//得到列表
@RequestMapping("getall")
@ResponseBody
public Map<String,Object> getall(User emp){
emp.setPage((emp.getPage()-1)*emp.getRows());
List<User> findEmp = userservice.findEmp(emp);
int countEmp = userservice.getCount(emp);
Map<String,Object> map = new HashMap<String , Object>();
map.put("total", countEmp);
map.put("rows", findEmp);
return map;
}