jsGrid loadData 不起作用答案

【问题标题】：jsGrid loadData does not workjsGrid loadData 不起作用
【发布时间】：2016-12-26 20:18:57
【问题描述】：

我使用 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 调用返回一个对象数组，但它没有填充到表中。

怎么了？

【问题讨论】：

标签： jquery ajax jsgrid

【解决方案1】：

ajax 调用返回一个对象数组，但它没有填充到表中。

怎么了？

首先：ajax 本身就是一个promise，所以你可以返回它自己。

第二：height: "100%"，：这会将高度设置为一个小值（在我的计算机上，“.jsgrid-grid-body”的值“只有 3px ！！！）。您可以使用默认值或设置另一个值。

sn-p：

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

在我的情况下，我注意到我可以使用以下方法获取数据：

$.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 数组具有如下所示的格式，如果您知道名称将它们放在名称上，并将您想要的列标题放在标题上的列上，希望这对某人有所帮助。

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

【讨论】：