哎,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>