JsGrid загружает вложенный объект в таблицу - PullRequest
Новая
       3

JsGrid загружает вложенный объект в таблицу

0 голосов
/ 09 сентября 2018

Я занимаюсь разработкой веб-проекта в Django и использую 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.Что мне делать?

1 Ответ

0 голосов
/ 10 сентября 2018

Как и в вашем ответе, данные json поступают в формате response.results. Итак, в вашем методе loadData вам нужно передать ваш results, используя $.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();
 }

DEMO 

$("#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>
...