jsGrid 加载数据不起作用

Question

我使用 Ajax 将数据加载到 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 调用 returns 一个对象数组，但它不会填充到 table。

怎么了？

Answer 1

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

What's wrong?

首先：ajax 本身就是一个承诺，因此您可以 return 本身。

第二个：height: "100%",：这会将高度设置为一个小值（在我的电脑上这个值“.jsgrid-grid-body”只有 3px!!!)。您可以使用默认值或设置其他值。

片段：

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

Answer 2

在我的案例中，我注意到我可以像这样获取数据：

$.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

了解您的数据很重要，例如我的 json 数组的格式如下所示，如果您知道名称，请将它们放在名称上，然后将您想要的列 header 放在列上关于标题，希望这对某人有所帮助。

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

jsGrid 加载数据不起作用

jsGrid loadData does not work

ajax

jquery

jsgrid