2016-12-26 134 views
0

我使用Ajax將數據加載到jsGrid中。jsGrid loadData不起作用

我有以下代碼:

$("#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調用返回一個對象數組,但它不會填充到表中。

怎麼了?

回答

1

ajax調用返回一個對象數組,但它不會填充到表中。

怎麼了?

第一:ajax本身就是一個承諾,所以你可能會返回自己。

二:高度:「100%」,:這將高度設置爲一個小的值(我的電腦「.jsgrid網體」的值僅爲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>