Javascript JsGrid将嵌套对象加载到表中
我正在Django中使用jsGrid开发一个web项目。我遇到了一个问题,找不到解决办法 我有一个嵌套的JSON数据,它是通过组合多个DB表记录创建的。这是我的JSON:Javascript JsGrid将嵌套对象加载到表中,javascript,jquery,django,django-rest-framework,jsgrid,Javascript,Jquery,Django,Django Rest Framework,Jsgrid,我正在Django中使用jsGrid开发一个web项目。我遇到了一个问题,找不到解决办法 我有一个嵌套的JSON数据,它是通过组合多个DB表记录创建的。这是我的JSON: { "count":3, "results":[ { "personnel":{ "name":"david", "age":34 }, "company":"IBM" },
{
"count":3,
"results":[
{
"personnel":{
"name":"david",
"age":34
},
"company":"IBM"
},
{
"personnel":{
"name":"john",
"age":28
},
"company":"Google"
},
{
"personnel":{
"name":"Yuri",
"age":42
},
"company":"Microsoft"
}
]
}
以下是我的js脚本:
function () {
$("#personnelsgrid").jsGrid({
height: "500px",
width: "100%",
filtering: !0,
editing: !0,
sorting: !0,
paging: !0,
autoload: !0,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: {
loadData: function (filter) {
return $.ajax({
type: "GET",
url: "/get_personnels",
dataType: "json",
data: filter
});
}
},
fields: [
{name: "personnel.name", type: "text", width: 50},
{name: "personnel.age", type: "number", width: 50, filtering: false},
{name: "company", type: "text", width: 200},
]
如图所示,我的数据中有一个嵌套对象。尽管JSON来自服务器,但它并没有加载到jsGrid表中。我该怎么办?因为在您的响应中,json数据以
响应的格式出现。结果
。因此,在您的方法中,您需要像这样传递结果
loadData: function(filter) {
var deferred = $.Deferred();
$.ajax({
type: "GET",
url: "/get_personnels",
dataType: "json",
data: filter,
success: function(response) {
deferred.resolve(response.results);
}
});
return deferred.promise();
}
演示
$(“#jsGrid”).jsGrid({
宽度:“100%”,
高度:“自动”,
筛选:!0,
编辑:!0,
排序:!0,
分页:!0,
//对于loadData方法,需要将自动加载设置为true
自动加载:对,
页面大小:15,
pageButtonCount:5,
deleteConfirm:“是否确实要删除客户端?”,
noDataContent:“目录为空”,
控制器:{
loadData:函数(过滤器){
var deferred=$.deferred();
$.ajax({
键入:“获取”,
url://api.stackexchange.com/2.2/questions?order=desc&sort=activity&taged=jsgrid&site=stackoverflow“,
数据类型:“json”,
成功:功能(响应){
延迟。解决(响应。项目);
}
});
延迟返回。承诺();
}
},
字段:[{
名称:“所有者。显示名称”,
标题:“姓名”,
键入:“文本”,
宽度:50
}, {
姓名:“职务”,
标题:“标题”,
键入:“文本”,
宽度:200
}]
});代码>