jsGrid loadData不工作

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调用返回一个对象数组，但不会填充到表中。

怎么了？

Answer 1

ajax调用返回一个对象数组，但它不会填充表中。

怎么了？

首先: ajax本身就是一个承诺，所以您可以返回它自己。

Second:网格高度："100%"，：这会将高度设置为一个小值(在我的电脑上，“.jsgrid--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数组的格式如下所示，如果你知道它们的名称，把它们放在name上，把你想要的列标题放在title上的column上，希望这对某些人有帮助。

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