直接给你们上代码吧:
<%@ page language="java" import="java.util.*" pageEncoding="gbk"
isELIgnored="false" contentType="text/html; charset=gbk"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title></title>
<base href="<%=basePath%>" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/validator.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/css.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/function.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/json2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/work.js"></script>
</head>
<body class="easyui-layout" >
<div data-options="region:'center'" >
<div class="easyui-layout" data-options="border:true,fit:true">
<div class="easyui-panel" data-options="region:'north',title:'当前位置:泵站管理所 - 下月计划列表',collapsible:true,border:true,collapsed:false" style="height:80px;overflow: hidden" >
<form id="frmQuery" action="" method="post" >
<table id="tableQuery" style="margin: 10px;text-align:right;overflow:hidden">
<tr>
<td nowrap="nowrap" ><div><label>标题:</label>
<input class="easyui-validatebox" type="text" name="title" style="width: 100px"></input>
</div></td>
<td nowrap="nowrap"> <div><label>开始时间:</label>
<input class="easyui-datetimebox" name="startTime" id="startTime" style="width: 140px" data-options="validType:'dateTime'"></input></div></td>
<td nowrap="nowrap"><div><label>结束时间:</label>
<input class="easyui-datetimebox" name="endTime" style="width: 140px" data-options="validType:'dateTime'"></input>
</div></td>
<td style="text-align:center;" nowrap="nowrap"><div style="width:100px">
<a href="javascript:queryByParams()" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px">查询</a>
</div></td>
</tr>
</table>
</form>
</div>
<div class="easyui-panel" data-options="region:'center'" >
<table id="table" >
</table>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#table').datagrid({
id: 'dg',
title: '下月计划列表',
idField: 'id',
fit: true,
pagination: true,
rownumbers: true,
fitColumns: false,
singleSelect: true,
checkOnSelect: false,
selectOnCheck: false,
striped: true,
pageSize: 10,
pageList: [10,30,50],
url: 'bzgls/next_list.action',
columns: [[
{field:'ck', checkbox:true},
{field: 'title', title: '标题', width: 100},
{field: 'unit', title: '单位', width: 150 },
{field: 'plantime', title: '时间', width: 150,formatter: function(value, rec) {
return formatDate(turnServerDate(value));}}
]],
onBeforeLoad: function(param) {
param['page'] = $('#table').datagrid('getPager').pagination('options')['pageNumber'];
param['rows'] = $('#table').datagrid('getPager').pagination('options')['pageSize'];
}
});
var pager = $('#table').datagrid('getPager');
$(pager).pagination({
onSelectPage: function(pageNumber, pageSize) {
queryByParams();
}
});
});
function queryByParams() {
if (!$('#frmQuery').form('validate')) {
alert("查询条件有误,请重新输入");
return;
}
var params = new Object();
$('#tableQuery').find('input,select').each(function(k, v) {
if ($(v).attr("name") != undefined) {
params[$(v).attr('name')] = $.trim($(v).val());
}
});
$('#table').datagrid('reload', {
orderBy: 'id',
json: encodeURI(JSON.stringify(params))
});
$('#table').datagrid('unselectAll');
$('#table').datagrid('uncheckAll');
}
</script>
</html>
重点是看红色部分的内容
在js的方法queryByParams中
特别注意带有下划线的那一行,使用encodeURI进行编码
在后台的action中,
首先得有json这个变量,和它的get、set方法
在使用的时候需要进行处理一下
if(json != null && !"".equals(json)){
try {
json = URLDecoder.decode(json, "UTF-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
}
这样得到的json格式的数据就不是乱码了。