本文介绍了jsGrid loadData不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用Ajax将数据加载到jsGrid中.
I use Ajax to load data into the jsGrid.
我有以下代码:
$("#jsGrid").jsGrid({
width: "100%",
height: "100%",
autoload: true,
paging: true,
pageSize: 15,
pageButtonCount: 5,
pageIndex: 1,
controller: {
loadData: function(filter) {
var d = $.Deferred();
$.ajax({ url: "/api/index.php/get_data",
contentType: "application/json; charset=utf-8",
data: {a:(filter.page?filter.page:0)},
dataType: "json"
}).done(function(response){
console.info(response);
d.resolve(response);
});
return d.promise();
}
},
fields: [
{ name: "ID", type: "number", width:50 },
{ name: "platform", type: "text", width: 100 },
{ name: "title", type: "text", width: 150 },
{ name: "url_image", type: "text", width: 200 },
{ name: "url", type: "text", width: 200 },
{ name: "cost", type: "text", width: 50 }
]
});
});
ajax调用返回一个对象数组,但未在表中填充.
The ajax call returns an array of objects but it does not populate in the table.
怎么了?
推荐答案
怎么了?
首先:ajax本身就是一个承诺,所以您可能会自己返回.
First: ajax is by itself a promise, so you may return itself.
第二个: 高度:"100%", :这会将高度设置为一个小值(在我的计算机上为".jsgrid-grid-body"仅为3px !!!).您可以使用默认值或设置另一个值.
Second: height: "100%",: this will set the height to a little value (on my computer the value of ".jsgrid-grid-body" is only 3px!!!). You may use the default value or set another one.
摘要:
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
autoload: true,
paging: true,
pageSize: 5,
pageButtonCount: 5,
pageIndex: 1,
controller: {
loadData: function(filter) {
return $.ajax({
url: "https://api.github.com/repositories",
dataType: "json"
});
}
},
fields: [
{name: "name", width: 50},
{name: "full_name", width: 100}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="jsGrid"></div>
这篇关于jsGrid loadData不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!