jquery easyui datagrid 使用 method 'loadData' 显示不了json数据
更新，我用下面的代码重新运行了一下，现在能加载上json数据了，但是查看网页源代码能看到元素，网页中却显示空白。这是最新的问题。
我自己定义了一个loaddata函数，里面GET方法得到json数据（能成功），但是在回调函数里面使用datagrid的'loadData'方法无法将数据显示出来，查看网页元素显示相应的表是空的。请问这是怎么回事？下面是相应的代码。
这个是datagrid的定义函数
@(category:String)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title id="category">@category</title>
<link rel="stylesheet" type="text/css" href="@routes.Assets.at("themes/default/easyui.css")">
<link rel="stylesheet" type="text/css" href="@routes.Assets.at("themes/icon.css")">
<style type="text/css">
body {
margin: 0px;
}
a {
color: #21759b;
text-decoration: none;
}
a:hover {
color: #0f3647;
text-decoration: underline;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="@routes.Assets.at("js/jquery.easyui.min.js")"></script>
<script type="text/javascript" src="@routes.Assets.at("js/datagrid-scrollview.js")"></script>
@*<script type="text/javascript" src="@routes.Assets.at(js/jquery.flot.min.js)"></script>*@
@*<script type="text/javascript" src="@routes.Assets.at(js/jquery.flot.time.min.js)"></script>*@
<script type="text/javascript" src="@routes.Assets.at("js/jquery.mousewheel.min.js")"></script>
<script type="text/javascript">
var field; //当前排序字段
var rows; //数据
var scrollLeft = 0; //横向滚动条位置，可恢复
var scrollEvent = function(e) { //滚动条事件
scrollLeft = $(this).scrollLeft();
};
//阻止连带滚动外部窗口
var preventScrollParent = function(e, d) {
var t = $(this);
if (d > 0 && t.scrollTop() <= 0) {
e.preventDefault();
} else {
if (d < 0 && (t.scrollTop() >= t.get(0).scrollHeight - t.innerHeight())) {
e.preventDefault();
}
}
};
$(function () {
field = "commentnum" ;
$("#dg").width($(self).width())
.height($(self).height())
.datagrid({
// url: "http://localhost:9000/json/"+ $("#category" ).text() + "/" + field,
// method:"GET",
loadMsg : 'Loading',
view : scrollview,
idField: 'id',
pageSize : 50,
autoRowHeight : false,
rownumbers : true,
singleSelect : true,
border : false,
striped : true,
onLoadSuccess : loadFinish
// columns:[[
// {field:'id',title:'id',width:100},
// {field:'name',title:'名字',width:400},
// {field:'url',title:'访问购买',width:220,align:'right'},
// // {field:'imgsrc',title:'图片',width:100,align:'right'},
// {field:'price',title:'价格',width:60,align:'right'},
// {field:'commentnum',title:'评论数',width:60,align:'right'},
// {field:'likerate',title:'好评率',width:60,align:'right'},
// {field:'category',title:'品类',width:60,align:'right'}
// ]]
});
setTimeout(loaddata, 50);
});
//加载某列排序的数据
function loaddata() {
$("#dg").datagrid("loading");
$.getJSON("http://localhost:9000/json/"+ $("#category" ).text() + "/" + field, {}, function(result) {
rows = result.rows;
$("#dg").datagrid('loadData', rows);
});
}
//加载完成后处理
function loadFinish() {
$("#dg").datagrid("loaded");
$(".datagrid-view2 .datagrid-body").scrollLeft(scrollLeft);
$(".datagrid-header-row>td").css("font-weight", "normal");
$(".datagrid-header-row>td[field='" + field + "'").css("font-weight", "bold");
$(".datagrid-header-row>td").click(function() {
clickTitle($(this));
});
$(".datagrid-row a").click(function(e) {
e.stopPropagation();
})
$(".datagrid-view2 .datagrid-body").scroll(scrollEvent);
$(".datagrid-view2 .datagrid-body").bind('mousewheel', preventScrollParent);
}
//标题点击排序事件
function clickTitle(title) {
if (title.attr("field") && title.attr("field") != field && (title.attr("field") == "price"||title.attr("field")=="likerate"||title.attr("field")=="commentnum")) {
scrollLeft = $(".datagrid-view2 .datagrid-body").scrollLeft();
field = title.attr("field");
$(".datagrid-view2 .datagrid-body").unbind("scroll", scrollEvent);
$(".datagrid-view2 .datagrid-body").unbind('mousewheel', preventScrollParent);
loaddata();
}
}
//当前排序列加粗
function cellStyle(colname) {
return function(value, row, index) {
if (colname == field) return 'font-weight:bold;';
else return '';
}
}
</script>
</head>
<body>
<table id="dg">
<thead>
<tr>
<th data-options="field:'id'" width="100">ID</th>
<th data-options="field:'name'" width="100">名字</th>
<th data-options="field:'url'" width="100">访问网页</th>
<th data-options="field:'price'" width="100">价格</th>
<th data-options="field:'commentnum'" width="100">评价数</th>
<th data-options="field:'likerate'" width="100">好评率</th>
<th data-options="field:'category'" width="100">品类</th>
</tr>
</thead>
</table>
</body>
</html>
展开
收起
1
条回答
写回答
写回答
-
{ "total": 1, "rows": [ { "id": "13019921", "insidepage": "2015-05-15" } ] }这是要返回的json格式，是否和你的一致
2019-07-17 19:15:22赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
