jsGrid loadData不起作用 [英] jsGrid loadData does not work

问题描述

我使用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调用返回一个对象数组，但未在表中填充.

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不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！