日期:2014-05-17  浏览次数:20931 次

easyui之datagrid为什么后台返回的数据在前台不显示
前台的datagrid如下:

<script type="text/javascript">
$(function(){
$("#datagrid").datagrid({
url : "datagrid01",
title : "dd",
iconCls : 'icon-save',
pagination : true,
pageSize : 5,
pageList : [10 ,20,30],
fit : true,
fitColums : false,
idFiled : 'id',
colums : [ [ {
title : '编号',
field : 'id',
width : 100
},
{
title : '姓名',
field : 'name',
width : 100
},
{
title : '密码',
field : 'password',
width : 100
}
 ] ]


});

});
</script>


<div class="easyui-tabs" fit="true" border="false">
<div title="用户管理" border="false">
<table id="datagrid"></table>
</div>
 </div>
后台模拟的返回json格式的数据如下:
public class datagrid01 extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletExceptionIOException{
response.setCharacterEncoding("UTF-8");

String json="[{'id':'001','name':'admin','password':'password'}]";
PrintWriter out = response.getWriter();
out.print(json.toString());
}
}

响应中的数据:
[{'id':'001','name':'admin','password':'password'}]
问题:为什么前台显示不出来{'id':'001','name':'admin','password':'password'}呢?

------解决方案--------------------
1.提醒:
后台用 json-lib.jar来做吧,你这么做出来的引号和细节很容易出错的。


2.easyui-datagrid:
easyui的datagrid返回值里面需要一个{"rows":""}这样类型的json对象,你可以参考下demo里面的datagrid.json  里面的帮助文档很详细


------解决方案--------------------
js 看数据是否返回没? 然后列名和你后台返回的名称要对应。
------解决方案--------------------
onLoadSuccess:onLoadSuccess  在设置里加这个

function onLoadSuccess(data){

$("#datagrid").pagination('refresh',{
total: data
});
}


------解决方案--------------------
map.put("rows", list);list就是你要显示的
------解决方案--------------------
<table id="dg" title="Custom DataGrid Pager" style="width:750px"
data-options="rownumbers:true,singleSelect:true,pagination:true,url:'svnlog/listProject.do',method:'get',row:'10,20'">
<thead>
<tr>
<th data-options="field:'name',width:200">工程名字</th>
<th data-options="field:'svnUsername',width:100">用户名字</th>
<th data-options="field:'svnPassword',width:100">用户密码</th>
<th data-options="field:'url',width:300">仓库地址</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(function(){
var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid
pager.pagination({
  pageSize: 10,//每页显示的记录条数,默认为10  
      pageL