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
ServletException,
IOException{
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