jQuery MiniUI

标题: datagrid无法显示json数据 [打印本页]

作者: Awen 时间: 2013-2-23 11:20:49 标题: datagrid无法显示json数据

本帖最后由 Awen 于 2013-2-23 13:40 编辑

请指导：

我通过datagrid的url里请求struts 的action返回json数据：
{
total:1,
data:[
  {
"employeeID":"1001",
"userID":"1001",
"userName":"z1",
"password":"11111",
"status":"1"
  }
]
}
可在datagrid里无法显示数据
若我将action返回的json数据拷贝到文本文件里，让datagrid请求这个文本文件，则可以显示
若我通过javascript请求json文本并手动给datagrid设值，datagrid先显示出数据，但马上报datagrid json is error，然后datagrid的数据消失
若我通过javascript请求struts并手动给datagrid设值，datagrid先显示出数据，但马上报datagrid json is error，然后datagrid的数据消失

我判断是json数据出现了问题，但一时又查不出来，请指导。

附代码如下：
<%@ page contentType="text/html; charset=GBK" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>列表查询</title>
<meta http-equiv="content-type" content="text/html; charset=GBK" />
<link href="<%=request.getContextPath()%>/css/main.css" rel="stylesheet" type="text/css" />
<script src="<%=request.getContextPath()%>/scripts/boot.js" type="text/javascript"></script>
</head>
<body>
<h4>列表查询</h4>

<div id="dgFRL1" class="mini-datagrid" style="width:700px;height:100px;"
url="findUsers.action" idField="userID" showFooter="false" allowResize="true" sizeList="[20,30,50,100]" pageSize="20">
<div property="columns">
   <div type="checkcolumn"></div>
      <div field="employeeID" width="120" headerAlign="center" allowSort="true">员工编号</div>
  <div field="userName" width="120" headerAlign="center" allowSort="true">帐号</div>
  <div field="password" width="120" headerAlign="center" allowSort="true">密码</div>
      <div field="status" width="120" headerAlign="center" allowSort="true">状态</div>
</div>
</div>
<br>
<div id="dgFRL2" class="mini-datagrid" style="width:700px;height:100px;"
url="<%=request.getContextPath()%>/jsp/user/data.txt" idField="userID" showFooter="false" allowResize="true" sizeList="[1]" pageSize="1">
<div property="columns">
   <div type="checkcolumn"></div>
      <div field="employeeID" width="120" headerAlign="center" allowSort="true">员工编号</div>
  <div field="userName" width="120" headerAlign="center" allowSort="true">帐号</div>
  <div field="password" width="120" headerAlign="center" allowSort="true">密码</div>
      <div field="status" width="120" headerAlign="center" allowSort="true">状态</div>
</div>
</div>
<br>
<input type="button" value="请求json文本并手动给datagrid赋值"/>
<div id="dgFRL3" class="mini-datagrid" style="width:700px;height:100px;"
url="" idField="userID" showFooter="false" allowResize="true" sizeList="[1]" pageSize="1">
<div property="columns">
   <div type="checkcolumn"></div>
      <div field="employeeID" width="120" headerAlign="center" allowSort="true">员工编号</div>
  <div field="userName" width="120" headerAlign="center" allowSort="true">帐号</div>
  <div field="password" width="120" headerAlign="center" allowSort="true">密码</div>
      <div field="status" width="120" headerAlign="center" allowSort="true">状态</div>
</div>
</div>
<br>
<input type="button" value="请求struts并手动给datagrid赋值"/>
<div id="dgFRL4" class="mini-datagrid" style="width:700px;height:100px;"
url="" idField="userID" showFooter="false" allowResize="true" sizeList="[1]" pageSize="1">
<div property="columns">
   <div type="checkcolumn"></div>
      <div field="employeeID" width="120" headerAlign="center" allowSort="true">员工编号</div>
  <div field="userName" width="120" headerAlign="center" allowSort="true">帐号</div>
  <div field="password" width="120" headerAlign="center" allowSort="true">密码</div>
      <div field="status" width="120" headerAlign="center" allowSort="true">状态</div>
</div>
</div>

<script type="text/javascript">
mini.parse();
var grid1 = mini.get("dgFRL1");
grid1.load();
grid1.sortBy("userName", "desc");

var grid2 = mini.get("dgFRL2");
grid2.load();
grid2.sortBy("userName", "desc");

function test()
{
   $.ajax({
   url: "<%=request.getContextPath()%>/jsp/user/data.txt",
      type: "post",
      success: function (text) {
      var grid3 = mini.get("dgFRL3");
grid3.setData(mini.decode(text)["data"])
grid3.sortBy("userName", "desc");
      }});
}
function test2()
{
   $.ajax({
   url: "findUsers.action",
      type: "post",
      success: function (text) {
      var grid4 = mini.get("dgFRL4");
grid4.setData(mini.decode(text)["data"])
grid4.sortBy("userName", "desc");
      }});
}
</script>
</body>
</html>

附代码运行结果图片：
[attach]1365[/attach]

作者: Awen 时间: 2013-2-23 17:03:00

自己终于解决，原来是struts返回json的问题。
我原来在action将返回的json定义成了一个String，将它改成HashMap就可以了
private HashMap map = new HashMap();
public HashMap getMap() {
return map;
}
<action name="findUsers" class="userAction" method="doFindUsers">
   <result type="json">
   <param name="root">map</param>
   </result>
</action>

作者: niko 时间: 2013-2-23 20:28:20

嗯只要返回正确的JSON就可以了

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)