87,902
社区成员
发帖
与我相关
我的任务
分享easyUI datagrid一直不出数据
如题，我感觉我的代码是正确的，可是一直不出数据。看了好多帖子，试了各种办法，都没用，我快要崩溃了。请各位帮帮忙
我的前台代码：
<div id="dd"></div>
$(function () {
$('#dd').datagrid({
title: "测试 ",
width: "auto",
striped: true,
singleSelect: true,
loadMsg: "正在加载，请稍等...",
url: '/test/GetGridData', //获取数据地址
pagination: true,
rownumbers: true,
pageList: [5, 10, 15, 20],
pageSize: 10,
idField: "id",
columns: [[
{ title: "测试1", field: "productid", width: "180", align: "center" },
{ title: "测试2", field: "productname", width: "300", align: "center" },
{ title: "测试3", field: "city", width: "300", align: "center" }
]]
});
});
后台代码：
public JsonResult GetGridData(int rows, int page)
{
//result为json数据格式测试
string result = "";
result += "{\"total\":" + (rows *page)+ " ";
result += "rows:{[ ";
for (int i = 0; i <= rows; i++)
{
result += "{\"productid\":编号" + i + ",\"productname\":姓名" + i + ",\"city\":城市" + i + "\"}";
}
result += "]}";
JsonResult js = Json(result, JsonRequestBehavior.AllowGet);
return js;
}
我的前台代码：
<div id="dd"></div>
$(function () {
$('#dd').datagrid({
title: "测试 ",
width: "auto",
striped: true,
singleSelect: true,
loadMsg: "正在加载，请稍等...",
url: '/test/GetGridData', //获取数据地址
pagination: true,
rownumbers: true,
pageList: [5, 10, 15, 20],
pageSize: 10,
idField: "id",
columns: [[
{ title: "测试1", field: "productid", width: "180", align: "center" },
{ title: "测试2", field: "productname", width: "300", align: "center" },
{ title: "测试3", field: "city", width: "300", align: "center" }
]]
});
});
后台代码：
public JsonResult GetGridData(int rows, int page)
{
//result为json数据格式测试
string result = "";
result += "{\"total\":" + (rows *page)+ " ";
result += "rows:{[ ";
for (int i = 0; i <= rows; i++)
{
result += "{\"productid\":编号" + i + ",\"productname\":姓名" + i + ",\"city\":城市" + i + "\"}";
}
result += "]}";
JsonResult js = Json(result, JsonRequestBehavior.AllowGet);
return js;
}
...全文
请发表友善的回复…
发表回复
无聊的上午 2018-02-11
- 打赏
- 举报
回答上述几个点：
1、easyui datagrid组件中的分页参数如果设置了显示，有默认参数，至于组件内数据有没有分页与这些参数的确有关系，但是别人做这个组件的人不是傻瓜，不会没意识到你漏加或者不加该参数造成的BUG的，默认参数我记得是5,10,15
2、在datagrid中使用url获取数据的方式，easyui会自动将一些分页需要的参数传给后台，可以在后台打印出来看看，easyui此处用的是ajax提交
3、如果使用外部传参的方式，分页函数要自己在调用easyui的分页组件，是比较麻烦的做法
4、datagrid有提供loadFilter的属性，可以在这个方法属性中得到后台返回后且还没有被grid加载的数据，这种方式也可以用来加工数据字段
无聊的上午 2018-02-11
- 打赏
- 举报
额。。别人是前端数据拿不到，数据过去了，可能是格式没对
无聊的上午 2018-02-11
- 打赏
- 举报
外部引入，要用easyui的分页组件做，意思就需要加载两个easyui的组件
路过打_酱油 2018-02-11
- 打赏
- 举报
分页真有那么难吗？把要返回的list分页，在通过gson转换下就好啦
无聊的上午 2018-02-09
- 打赏
- 举报
loadFilter : function(data){
//过滤数据操作
return value;
}
无聊的上午 2018-02-09
- 打赏
- 举报
补充一下 loadFilter 是属性，参数是方法
无聊的上午 2018-02-09
- 打赏
- 举报
搞的好麻烦 还用了ajax在外面看数据，easyui的datagrid有个loadFilter 方法，原本用法是过滤从后台传回的数据的，可以在此函数中加工回传的数据，在return时就会加载加工后的数组，当然如果有需要也可以用来查看你的数据是否正确，还有调试时最好用console.log打印，alert的数据显示有时候是不完整的
这里建议你检查一下你回传的数据中的key是否与数据行中的field匹配
如果数据一切都匹配，建议就在loadFilter 中做一次字符串转json的步骤在return出去试试
xiaoyuyu1111 2018-02-09
- 打赏
- 举报
不知道问题解决没有，但是rows是不是空，json数据是否符合，在请求的response里查看一下就看到了。
xiao_lone 2017-12-06
- 打赏
- 举报
json序列化后的jsonData格式再拼接result的字符串是什么，确定是json格式的吗
偷垃圾的猫 2017-12-05
- 打赏
- 举报
说的很有道理。经过这一步一步的测试下来，我写的能出数据的方法是因为在前台ajax里面将数据进行了转换，所以easyUI表格出现了数据，如果我直接传出来，页面不出数据的原因，确实是数据格式有问题，因为js里面提示 那个rows为null，说明easyUI没有接收到。。。可是我在后台里面用了json转对象的方法的，，，还是报这个错误。这是我写的后台方法
xiaoyuyu1111 2017-12-04
- 打赏
- 举报
首先用loadData的这种数据加载方式，是不能使用datagrid自己的分页逻辑和事件的，除非你自己加上这些逻辑，如果你用loadData数据能出来，而后台的url出不来，那就是url返回的数据格式有问题。关于url返回数据正确后，分页的后台逻辑是要自己写的，easyui的前台是你传多少数据，就会显示多少数据，比如你传了1页10条，但你返回的是20条，它也会都显示出来，这是需要前后台配合的。后台请求有没有发出，要用浏览器调试看，不是没反应就是没发出请求。为了显示，我写了个假的url，虽然页面无反应，但是请求是发出了的。看form data数据
xiao_lone 2017-11-30
- 打赏
- 举报
$(function(){
var page_json= {
pageSize: 10,//每页显示的记录条数，默认为10
pageList: [10,20,50],//可以设置每页记录条数的列表
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
onSelectPage: function (pageNumber, pageSize) {
pageChange(pageNumber, pageSize);
},
layout: ['list', 'sep', 'first', 'prev', 'links', 'next', 'last', 'sep', 'refresh']
};
$(pid).datagrid('getPager').pagination(page_json);//初始化设置分页
});
function pageChange(index, size) {
//在后台分页，ajax重新获取数据，返回data
$(pid).datagrid('loadData', data);
}
偷垃圾的猫 2017-11-29
- 打赏
- 举报
页面加载进去的时候，执行后台的方法是正确的，，rous和page的值，前台也能看出来啊。
我现在说的是下拉列表的点击，和上一页下一页那些按钮的那些点击事件，根本就没有走后台方法。又何来的传值是否正确呢
夜明小肥猪 2017-11-28
- 打赏
- 举报
你先在后台获取下rows和page看下传值是否正确，然后针对list拼一个分页的写法出来
偷垃圾的猫 2017-11-27
- 打赏
- 举报
但是我点击下拉列表的多少行，，和点击上一页、下一页，根本没有进入后台
夜明小肥猪 2017-11-27
- 打赏
- 举报
后台没有写分页吧，前台传过去的page和rows你没用用到，所以拼完json传回来的是全部数据。
偷垃圾的猫 2017-11-24
- 打赏
- 举报
pageList这个有的，，我是说点击以后多少列没有反应。照道理是点击了10列，显示10列，，点击20列，显示20列。。可是没有用，分页参数不起作用
偷垃圾的猫 2017-11-24
- 打赏
- 举报
还是不正确的
zk_Kang 2017-11-24
- 打赏
- 举报
pageSize:10,
pageList: [10, 20, 30,40]//这两个要一起存在，不能单独使用，你说的点击每页显示条数不起作用，这个。。是不是测试数据太少了。。没遇到过。
zk_Kang 2017-11-23
- 打赏
- 举报
你将datagrid里面的url置空为‘’；在后面加上
$.ajax({
beforeSend: function(xhr) {
xhr.setRequestHeader('Authorization', 'Bearer ' + $.session.get("token"));
},
url: url,
type: "post",
contentType: 'application/json;charset=utf-8',
dataType: "json",
data: null,//这里是传递的数据，没有可以写null
success: function(data) {
console.log(data);//data就是后台传递过来的值
$("#id").datagrid("loadData", $.parseJSON(data).rows);//给传递过来的data中加入一个字段，就是“page”：1
},
async: true,
error: function(er) {
alert('错误:' + JSON.stringify(er));
}
});
加载更多回复（26）
