jsGrid loadData does not work

问题

I use Ajax to load data into the jsGrid.

I have the following code:

$("#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 }
    ]
});

});

The ajax call returns an array of objects but it does not populate in the table.

What's wrong?

回答1:

The ajax call returns an array of objects but it does not populate in the table.

What's wrong?

First: ajax is by itself a promise, so you may return itself.

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.

The snippet:

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

回答2:

On my case I noticed that I could do the method to get the data like this:

$.post(
       'getData.php',
        {
         //parameters here
        })
         .done(function(data){
         var dataArray = JSON.parse(data);
         $("#jsGrid").jsGrid({
          width: "100%",
          height: "400px",
           
          inserting: true,
          editing: true,
          sorting: true,
          paging: true,
           
          data: dataArray,
           
           fields: [
                   { name: "dbfield1", type: "text", width: 50, title: "textOnColumnHere1" },
                   { name: "dbfield2", type: "text", width: 100,title: "textOnColumnHere2" },
                   { name: "dbfield3", type: "text", width: 50,title: "textOnColumnHere3" },
                   { name: "dbfield4", type: "text",width: 100,title: "textOnColumnHere4" },
                   { type: "control" }
                  ]
                  
               });//jsgrid
    });//$.post

It's important to know your data, for example my json array had the format shown below, if you know the names put them on name, and put the column header you want on column on title, hope this helps someone.

[{
  dbfield1: 1,
  dbfiled2: "John",
  dbfield3: 25,
  dbfield4: "Canada"
  },
  {n row...with same fields}
  {n+1 row...with same fields}
 ]

来源：https://stackoverflow.com/questions/41335918/jsgrid-loaddata-does-not-work

标签

jquery

ajax

jsGrid