本文介绍了如何使用SSH框架结合EasyUI进行分页数据操作，包括前端和后端的代码分析。前端代码涉及页面展示和交互功能，如条件检索、行编辑和保存。后端主要通过PaginationAction和JSONParser类处理请求和响应。建议读者深入理解EasyUI文档以熟悉各个控件和属性。
SSH结合EasyUI的分页操作（数据的增删改查）
一.效果展示图
如下：
注：1.可以根据条件进行检索，结果直接显示在列表当中。
2.可以双击当前行，进入编辑模式，点击保存则修改确认，点击撤销则取消编辑。
3.点击添加，会在第一行新增编辑行，点击保存，会在列表的结尾新增一条记录。
二.前端代码分析
- Body部分代码
<body>
<form name="searchform" method="post" action="" id="searchform">
<td width="70" height="30">条件检索:</td>
<td height="30"><input type="text" name="condition" size=20
id="search_value"> <select name="value" id="search_type">
<option value="-1">请选择搜索类型</option>
<option value="name">按姓名搜索</option>
<option value="address">按地址搜索</option>
</select> <a id="submit_search">搜索</a></td>
</form>
<table id="mydatagrid">
<thead>
<tr>
<!-- 下面的editor表示可编辑框的相关属性-->
<th
data-options="field:'name',width:100,align:'center',editor: { type: 'text', options: { required: true } }">姓名</th>
<th
data-options="field:'age',width:100,align:'center',sortable:true,editor: { type: 'text', options: { required: true } }"
onclick="sort()">年龄</th>
<th
data-options="field:'address',width:100,align:'center',editor: { type: 'text', options: { required: true } }">地址</th>
<th
data-options="field:'account',width:100,align:'center',editor: { type: 'text', options: { required: true } }">账户</th>
<th
data-options="field:'password',width:100,align:'center',editor: { type: 'text', options: { required: true } }">密码</th>
<th
data-options="field:'email',width:100,align:'center',editor: { type: 'text', options: { required: true } }">邮箱</th>
<th
data-options="field:'company',width:100,align:'center',editor: { type: 'text', options: { required: true } }">单位</th>
</tr>
</thead>
</table>
</body>
- JS部分代码
<script type="text/javascript">
$(function() {
var editRow = undefined;
$('#mydatagrid').datagrid(
{
title : '用户列表',
iconCls : 'icon-ok',
width : 1000,
pageSize : 10,//默认选择的分页是每页5行数据
pageList : [ 5, 10, 15, 20 ],//可以选择的分页集合
//nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取
striped : true,//设置为true将交替显示行背景。
collapsible : true,//显示可折叠按钮
toolbar : "#tb",//在添加 增添、删除、修改操作的按钮要用到这个
url : 'PaginationAction_listUser',//url调用Action方法
loadMsg : '数据装载中......',
singleSelect : true,//为true时只能选择单行
fitColumns : true,//允许表格自动缩放，以适应父容器
queryParams : {},//查询参数
checkOnSelect : true,
remoteSort : false,
frozenColumns : [ [ {
field : 'ck',
checkbox : true
} ] ],
pagination : true,//分页
rownumbers : true,//显示行号
toolbar : [
{
text : '删除',
iconCls : 'icon-remove',
handler : function() {
var row = $("#mydatagrid").datagrid(
"getSelected");
if (row) {
$.ajax({
type : "POST",
url : 'UserAction_deleteUser',
data : "username=" + row.name,
success : function(msg) {
if (msg) {
$.messager.alert('提示信息',
'删除成功!', "info");
$('#mydatagrid').datagrid(
'reload');
} else {
$.messager.alert('提示信息',
'删除失败!', "error");
}
}
});
}
}
},
'-',
{
text : '编辑',
iconCls : 'icon-edit',
handler : function() {
var rows = $('#mydatagrid').datagrid(
'getSelections'); //得到所选择的行
if (rows.length == 1) {
//changeEditorEditRow();//修改编辑的状态
if (editRow != undefined) { //先判断双击前有没有在编辑的行
$('#mydatagrid').datagrid(
'endEdit', editRow); //避免同时开启多个编辑行
}
if (editRow == undefined) {
var index = $('#mydatagrid')
.datagrid('getRowIndex',
rows[0]);//得到选择行的索引
$('#mydatagrid').datagrid(
'beginEdit', index);
editRow = index; //记录当前开启编辑的行
//在开启编辑状态时取消它的选择状态,这样就可以在修改时放弃修改当前行去修改其他行
$('#mydatagrid').datagrid(
'unselectAll');
}
}
}
},
'-',
{
text : '取消编辑',
iconCls : 'icon-redo',
handler : function() {
editRow = undefined;
$('#mydatagrid').datagrid('rejectChanges'); //调用回滚方法
$('#mydatagrid').datagrid('unselectAll');
}
},
'-',
{
text : '保存',
iconCls : 'icon-save',
handler : function() {
$("#mydatagrid").datagrid('endEdit',
editRow);
//如果调用acceptChanges(),使用getChanges()则获取不到编辑和新增的数据。
//var rows = $("#mydatagrid").datagrid('getChanges');
//使用JSON序列化datarow对象，发送到后台。
//var rowstr = JSON.stringify(rows);
//var username=rows[0].name;
//
//alert(rowstr);
}
},
'-',
{
text : '添加',
iconCls : 'icon-add',
handler : function() {
if (editRow != undefined) {
$("#mydatagrid").datagrid('endEdit',
editRow);//避免开启多个编辑行
}
if (editRow == undefined) {
$("#mydatagrid").datagrid('insertRow',
{
index : 0,
row : {
name : '请输入用户名',
age : '请输入年龄',
address : '请输入地址',
account : '请输入账号',
password:'请输入密码',
email : '请输入邮箱',
company : '请输入单位',
}
});
//让添加的新一行开启编辑状态
$("#mydatagrid").datagrid('beginEdit',
0);
editRow = 0;//记录当前编辑的索引
}
}
} ],
onAfterEdit : function(rowIndex, rowData, changes) {
//新增一行
var inserted = $('#mydatagrid').datagrid('getChanges',
'inserted'); //得到插入的数据
//编辑当前行
var updated = $('#mydatagrid').datagrid('getChanges',
'updated'); //得到修改的数据
//即没有选择添加也没有选择修改就直接return结束,不往下面走了 不然url提交地址为空
if (inserted.length < 1 && updated.length < 1) {
editRow = undefined;
datagrid.datagrid('unselectAll');
return;
}
var url = '';
if (inserted.length > 0) { //表示点击的添加按钮
url = 'UserAction_saveUser';
}
if (updated.length > 0) { //表示点击的编辑按钮
url = 'UserAction_updateUser';
}
console.log(rowData);
$.ajax({
url : url,
data : rowData,
success : function(msg) {
$.messager.alert('提示信息', '成功!', "info");
$('#mydatagrid').datagrid('reload');
editRow = undefined;
$('#mydatagrid').datagrid('unselectAll'); //取消选中,避免出现黄色条
}
});
},
onDblClickRow : function(rowIndex, rowData) {
if (editRow != undefined) {
$("#mydatagrid").datagrid('endEdit', editRow);
}
if (editRow == undefined) {
$("#mydatagrid").datagrid('beginEdit', rowIndex);
editRow = rowIndex;//记录当前编辑的索引
}
},
onClickRow : function(rowIndex, rowData) {
if (editRow != undefined) {
$("#mydatagrid").datagrid('endEdit', editRow);
}
}
});
$("#submit_search").linkbutton({
iconCls : 'icon-search',
plain : true
}).click(function() {
var queryParams = $('#mydatagrid').datagrid('options').queryParams;
var value = $('#search_value').val();
var condition = $('#search_type').val();
if (condition == 'name') {
queryParams.address = "";//这里要置为空，因为有缓存的问题（这里我也不是很清楚为什么，猜想是因为类似局部刷新的问题。感兴趣的可以尝试）
queryParams.username = value;
}
if (condition == 'address') {
queryParams.username = "";
queryParams.address = value;
}
$('#mydatagrid').datagrid("reload");
});
});
function sort() {
$('#mydatagrid').datagrid({
sortName : 'age',//当数据表格初始化时以哪一列来排序
sortOrder : 'desc',//定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。
});
}
</script> 3.建议：参考有关EasyUI的文档，对每一个控件和属性进行详细了解
三.后端代码分析
- Action: PaginationAction.class
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.log4j.Logger;
import com.holly.domain.Users;
import com.holly.service.IUserService;
import com.holly.util.JSONParser;
import net.sf.json.JSONObject;
public class PaginationAction {
static Logger log = Logger.getLogger(PaginationAction.class);
private JSONObject jsonObj;
private String rows;// 每页显示的记录数
private String page;// 当前第几页
private IUserService userService;// String依赖注入
private String username;//条件查询，需要带的参数
private String address;//同上
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
// 查询出所有学生信息
public String listUser() throws Exception {
log.info("查询出所有学生信息");
List<Users> list=new ArrayList<>();
if (username!=null&&!username.equals("")) {
Users users = userService.findUserByName(username);
list.add(users);
}else if (address!=null&&!address.equals("")) {
list=userService.findUserByAddress(address);
}else {
list = userService.findByPage(page, rows);
}
this.toBeJson(list, userService.getCountUsers());
return null;
}
// 转化为Json格式
public void toBeJson(List<Users> list, Long total) {
Map<String, Object> map=new HashMap<>();
map.put("total", total);
map.put("rows", list);
JSONParser.writeJson(map);//自定义的工具类
}
public void setUserService(IUserService userService) {
this.userService = userService;
}
public void setJsonObj(JSONObject jsonObj) {
this.jsonObj = jsonObj;
}
public void setRows(String rows) {
this.rows = rows;
}
public void setPage(String page) {
this.page = page;
}
}
2.JSONParser.class
package com.holly.util;
import java.io.IOException;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
//使用的是Jackson的类，需要导入Jackson JAR包
import org.codehaus.jackson.map.ObjectMapper;
public class JSONParser {
final static ObjectMapper om = new ObjectMapper();
public static void writeJson(Object obj) {
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
try {
om.writeValue(response.getWriter(), obj);
} catch (IOException e) {
e.printStackTrace();
}
}
}
3.实现类
/**
* 分页查询
* 这里是公共接口实现类
* hql:代表从Service曾传过来的查询语句“from Users”
*/
@Override
public List<T> findByPage(String start, String number, String hql) {
// 当为缺省值的时候进行赋值
int currentpage = Integer.parseInt((start == null || start == "0") ? "1" : start);// 第几页
int pagesize = Integer.parseInt((number == null || number == "0") ? "10" : number);// 每页多少行
List list =getSession().createQuery(hql)
.setFirstResult((currentpage - 1) * pagesize).setMaxResults(pagesize).list();
return list;
}
4.Struts.xml配置文件
注：配置文件中可以有多个package。
此处必须继承json-default,因为返回的数据类型为Json类型。
</package>
<package name="Easyui" extends="json-default">
<!-- 分页显示Action -->
<action name="PaginationAction_*" class="paginationAction"
method="{1}">
<result type="json">
</result>
</action>
</package>
PS：希望大家多多交流啊！有什么问题，欢迎共同交流-_-.
扫一扫
1719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
