javascript - JsGrid 将嵌套对象加载到表中

Question

我正在 Django 中开发一个 Web 项目并使用 jsGrid。我遇到了问题，但找不到解决方案。

我有一个嵌套的 JSON 数据，它是通过组合多个数据库表记录创建的。这是我的 JSON:

{  
   "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 表中。我该怎么办？

Answer 1

在您的响应中，json 数据的格式为 response.results。所以，在你的 loadData您需要使用 $.Deferred() 传递结果 的方法像这样

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({
    width: "100%",
    height: "auto",
    filtering: !0,
    editing: !0,
    sorting: !0,
    paging: !0,

    //for loadData method Need to set auto load true
    autoload: true,
    pageSize: 15,
    pageButtonCount: 5,
    deleteConfirm: "Do you really want to delete the client?",

    noDataContent: "Directory is empty",

    controller: {
        loadData: function(filter) {
            var deferred = $.Deferred();
            $.ajax({
                type: "get",
                url: "//api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jsgrid&site=stackoverflow",
                dataType: "json",
                success: function(response) {
                    deferred.resolve(response.items);
                }
            });
            return deferred.promise();
        }
    },

    fields: [{
        name: "owner.display_name",
        title: 'Name',
        type: "text",
        width: 50
    }, {
        name: "title",
        title: 'Title',
        type: "text",
        width: 200
    }]
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="//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="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="jsGrid"></div>