EasyUI.grid接收Struts2返回数据

最新推荐文章于 2017-05-25 17:23:56 发布

椰树海岛

最新推荐文章于 2017-05-25 17:23:56 发布

阅读量3.3k

点赞数

分类专栏： Struts2

本文链接：https://blog.csdn.net/caodegao/article/details/41806487

版权

Struts2 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

哎,easyui确实不如ext啊!

奈何ext4了以后对浏览器和网速要求极高,需要转型easyui

做了好多测验,才知道easyui的grid对json要求很严格,太烦了,做个例子记录下来.

panel.jsp,这个是frame窗口里面的tab页

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>grid</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" type="text/css"
			href="easyui-1.4/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css"
			href="easyui-1.4/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="easyui-1.4/demo.css">
		<script type="text/javascript" src="easyui-1.4/jquery.min.js"></script>
		<script type="text/javascript" src="easyui-1.4/jquery.easyui.min.js"></script>
		<script type="text/javascript"
			src="easyui-1.4/locale/easyui-lang-zh_CN.js"></script>
	</head>

	<body>
		<div class="easyui-layout" style="width: 100%; height: 100%;">


			<div data-options="region:'north'" border="0"
				style="height: 66px">

				<table cellpadding="2">
					<tr>
						<td>User Name:</td>
						<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'length[3,10]',novalidate:true"></td>
					
						<td>Email:</td>
						<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'email',novalidate:true"></td>
					
						<td>Birthday:</td>
						<td><input class="easyui-datebox textbox" data-options="required:true,novalidate:true"></td>
					</tr>
					<tr>
						<td>Address:</td>
						<td><input class="easyui-validatebox textbox" data-options="required:true,novalidate:true"></td>
					
						<td>Phone:</td>
						<td><input class="easyui-validatebox textbox" data-options="required:true,novalidate:true"></td>
					</tr>

				</table>

			</div>

			<div data-options="region:'center'" border="0">

				<table id="dg" class="easyui-datagrid" border="0"
					style="width: 100%; height: 100%"
					data-options="singleSelect:true,			fitColumns:true,
						url:'findPageEmp.action',			rownumbers:true,
						autoRowHeight:false,			pagination:true,
						pageSize:10,			toolbar:'#tb',			onClickRow: onClickRow">
					<thead>
						<tr>
							<th data-options="field:'username',width:100,editor:'textbox'">
								User Name
							</th>
							<th
								data-options="field:'usertype',width:100,editor:{type:'combobox'}">
								User Type
							</th>
							<th
								data-options="field:'email',width:100,editor:{type:'textbox'}">
								Email
							</th>
							<th
								data-options="field:'birthday',width:80,align:'right',editor:'datebox'">
								Birthday
							</th>
							<th
								data-options="field:'address',width:80,align:'right',editor:'textbox'">
								Address
							</th>
							<th data-options="field:'phone',width:250,editor:'textbox'">
								Phone
							</th>
						</tr>
					</thead>
				</table>

				<div id="tb">
					User Name:
					<input class="easyui-datebox" name="emp.username" style="width: 110px">
					User Type:
					<select class="easyui-combobox" panelHeight="auto"
						style="width: 100px">
						<option value="1">
							线上
						</option>
						<option value="2">
							线下
						</option>
					</select>
					<a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
				</div>

			</div>
			<script type="text/javascript">
			var editIndex = undefined;
			function endEditing(){
				if (editIndex == undefined){return true}
				if ($('#dg').datagrid('validateRow', editIndex)){
					var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'usertype'});
					var productname = $(ed.target).combobox('getText');
					$('#dg').datagrid('getRows')[editIndex]['productname'] = productname;
					$('#dg').datagrid('endEdit', editIndex);
					editIndex = undefined;
					return true;
				} else {
					return false;
				}
			}
			function onClickRow(index){
				if (editIndex != index){
					if (endEditing()){
						$('#dg').datagrid('selectRow', index)
								.datagrid('beginEdit', index);
						editIndex = index;
					} else {
						$('#dg').datagrid('selectRow', editIndex);
					}
				}
			}
			function accept(){
				if (endEditing()){
					$('#dg').datagrid('acceptChanges');
				}
			}
			function reject(){
				$('#dg').datagrid('rejectChanges');
				editIndex = undefined;
			}
			function getChanges(){
				var rows = $('#dg').datagrid('getChanges');
				alert(rows.length+' rows are changed!');
			}
		</script>
			<style scoped="scoped">
.textbox {
	height: 20px;
	margin: 0;
	padding: 0 2px;
	box-sizing: content-box;
}
</style>
	</body>
</html>

这个是main.jsp.Layou分东南西北框.

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>my easyui</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="easyui-1.4/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui-1.4/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="easyui-1.4/demo.css">
	<script type="text/javascript" src="easyui-1.4/jquery.min.js"></script>
	<script type="text/javascript" src="easyui-1.4/jquery.easyui.min.js"></script>
  	<script type="text/javascript" src="easyui-1.4/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript">
		var index = 0;
	
		function addPanel(title,page){
			var tabs = $('#tt').tabs('exists',title);
			if(!tabs){
				$('#tt').tabs('add',{
					title: title,
					href: page,//从超链接载入远程内容到选项卡 面板
					closable: true
				});
			}else{
				$('#tt').tabs('enableTab', title);
			}
		}
		
	</script>
  </head>
  
  <body>
	<div class="easyui-layout" style="width:100%;height:100%;">
		<div data-options="region:'north'" style="height:50px;padding:10px 0px 0px 50%;font-size:large">头部LOGO</div>
		<div data-options="region:'south'" style="height:23px;text-align: center;">
		© 2013 Cookie.Joo <a href="mailto:caodegao@qq.com"><font style="padding: 0px 0px 0px 10px;">Email : Cookie.Joo </font>
		</a>
		</div>
		<div data-options="region:'west'" title="导航" style="width:200px;">
			<div class="easyui-accordion" data-options="fit:true,border:false">
				<div title="系统配置" data-options="selected:true" style="padding:10px;">
					<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;text-align:left;" data-options="plain:true,iconCls:'icon-add'" οnclick="addPanel('模块管理','panel1.jsp')">模块管理</a>
				</div>
				<div title="信息管理" style="padding:10px;">
					<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;text-align:left;" data-options="plain:true,iconCls:'icon-add'" οnclick="addPanel('员工管理','panel2.jsp')">员工管理</a>
				</div>
				<div title="报表管理" style="padding:10px">
					content3
				</div>
			</div>
		</div>
		<div data-options="region:'center'">
			<div id="tt" class="easyui-tabs" data-options="fit:true,border:false,plain:true">
				<div title="首页" style="padding:5px">
					<div title="Title3" style="padding:10px">
						首页
					</div>
				</div>
			</div>
		</div>
	</div>
  </body>
</html>

Action抓取数据和返回数据

要注意的是,

1:grid的集合数据是rows返回的,这里定义为List<Object>,再拿到数据的时候还有循环转进去,不太好

2:total,这个没异议,就是总记录数据,grid会根据rows和total进行组合pagination组件.

3:grid要显示出来,必须以rows返回,但是grid在查询数据,page和rows是以查询条数给到action的,然后你返回又要一个rows集合,TM不知道怎么设计的

4:如果定义rows为String,用json包toString为json格式,在返回时会带\斜杠,一带斜杠jsp又解析不了.真TM是个奇葩

@Resource
	private IEmployeeService employeeService;
	private List<Object> rows;// 每页显示的记录数
	private int page;// 当前第几页
	private int total;

	public int getTotal() {
		return total;
	}

	public String findPageEmp() {
		try {
			int row = Integer.parseInt(request.getParameter("rows"));// 接受参数page和rows
			List<Employee> list = employeeService.findPageEmployee(row, page);
			total = employeeService.countPageEmployee();
			if(CollectionUtils.isNotEmpty(list)){
				rows = new ArrayList<Object>();
				for(Employee t : list){
					rows.add(t);
				}
			}
//			System.out.println(json.toString());
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return SUCCESS;
	}

	public void setPage(int page) {
		this.page = page;
	}

	public void setEmployeeService(IEmployeeService employeeService) {
		this.employeeService = employeeService;
	}

	public List<Object> getRows() {
		return rows;
	}

struts的xml配置

<package name="tsModule-action" extends="struts-default,json-default" namespace="/">
	
		<action name="findAllModule" class="com.cdg.action.TsModuleAction" method="findAllModule">
			<result type="json"> </result>
		</action>
		
		<action name="findPageEmp" class="com.cdg.action.EmpAction" method="findPageEmp">
			<result type="json"> </result>
		</action>
		
	</package>

椰树海岛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
EasyUI.grid接收Struts2返回数据

哎,easyui确实不如ext啊!奈何ext4了以后对浏览器和网速要求极高,需要转型easyui做了好多测验,才知道easyui的grid对json要求很严格,太烦了,做个例子记录下来.panel.jsp,这个是frame窗口里面的tab页 grid <link rel="stylesheet" type="text
复制链接

扫一扫

专栏目录