easyui之datagrid为何后台返回的数据在前台不显示
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就是你要显示的
------解决方案--------------------
------解决方案--------------------
后台返回的json数组中的key必须和页面的name值一致。
------解决方案--------------------
再就是看看Content-Type是否和easyui要的一样
------解决方案--------------------
url正确不？在Servlet打个断点，刷新页面，看是否进去了。。
前台的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
pageList: [10,20,50],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
buttons:[{
iconCls:'icon-search',
handler:function(){
alert('search');
}
},{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-edit',
handler:function(){
var row = $('#dg').datagrid('getSelected');
alert(row.name);
}
}]
});
})
</script>
------解决方案--------------------
后台返回的json数组中的key必须和页面的name值一致。
------解决方案--------------------
再就是看看Content-Type是否和easyui要的一样
------解决方案--------------------
url正确不？在Servlet打个断点，刷新页面，看是否进去了。。