本文介绍了jsGrid loadData不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用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本身就是一个承诺,所以您可能会自己返回.

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

10-13 17:26