jQuery를 SlickGrid는 JSON 데이터를 초기화

Question

문제 : JSON 데이터와 SlickGrid를 초기화하는 방법

내 작동하지 않는 코드 :

<div id="data"> 

</div> 

<script> 
$(document).ready(function(){ 
    $.ajax({  
     type: "GET", 
     url: "<?=Route::url('ajax_list')?>", 
     dataType: 'json', 
     success: function(json) { 

      var grid; 

      var columns = [ 
       {id: "id", name: "Id", field: "id"}, 
       {id: "code", name: "Kod", field: "code"}, 
       {id: "type", name: "Typ", field: "type"}, 
       {id: "height", name: "Wys", field: "height"}, 
       {id: "width", name: "Szer", field: "width"}, 
       {id: "in_stock", name: "Stan", field: "in_stock"} 
      ]; 

      var options = { 
       enableCellNavigation: true, 
       enableColumnReorder: false 
      }; 

      grid = new Slick.Grid("#data", json, columns, options); 
     }    
    }); 
}); 
</script> 

JSON :

[{"id":"7","code":"C22\/30\/130","type":"0","height":"30","width":"130","in_stock":"34","update_hash":"e8df47c817c8acc9831d4ee27394e955"},{"id":"8","code":"C21\/60\/160","type":"0","height":"60","width":"160","in_stock":"12","update_hash":"e8df47c817c8acc9831d4ee27394e955"},{"id":"9","code":"C21\/90\/120","type":"0","height":"90","width":"120","in_stock":"2","update_hash":"e8df47c817c8acc9831d4ee27394e955"},{"id":"10","code":"C22\/30\/080","type":"0","height":"30","width":"80","in_stock":"1","update_hash":"e8df47c817c8acc9831d4ee27394e955"},{"id":"11","code":"C22\/30\/090","type":"0","height":"30","width":"90","in_stock":"23","update_hash":"e8df47c817c8acc9831d4ee27394e955"},{"id":"12","code":"C22\/30\/100","type":"0","height":"30","width":"100","in_stock":"5","update_hash":"e8df47c817c8acc9831d4ee27394e955"}] 

방법을 찾아 도와주세요 json 데이터로 SlickGrid를 실행합니다.

편집 : 콘솔 오류가 없습니다.

Answer 1

내가 구현 한 방식은 dataprovider를 구현하고이를 생성자로 전달하는 것입니다. 이것은 아마도 그대로 작동하지 않을 것이지만 잘하면 당신은 아이디어를 얻을. 기본적으로 데이터 공급자가 json 호출을 통해 배열을로드 한 다음 getItem 메서드가 한 행의 데이터를 반환해야합니다.

var columns = [ 
      {id: "delete", name: "Del", field: "del", formatter: Slick.Formatters.Delete, width: 15}, 
      {id: "edit", name: "Edit", field: "edit", formatter: Slick.Formatters.Edit, width: 15}, 
      {id: "lastName", name: "Last Name", field: "lastName", syncColumnCellResize: true, formatter: Slick.Formatters.ContactLink, width: 50}, 
      {id: "firstName", name: "First Name", field: "firstName", rerenderOnResize: true, width: 50}]; 

var contactDataProvider = function() { 
    //this sets up my data provider 
    this.init = function() { 
     $.ajax({ 
      url: '/jsonContactResults', 
      dataType: 'json', 
      async: false, 
      cache: false, 
      success: function(data) { 
       sets[0] = data.items; // Take the results and put them in array 
       searchId = data.searchId; 
       length = data.length; // You need this 
      } 
    }); 

    this.getLength = function() { 
     return length; 
    }; 

    this.getItem = function(index) { 
     //Implement this so that it returns one row of data from your array 
     //I also have logic that says if I haven't loaded this data yet go grab it and put it in my data array 
    } 

}; 
}; 



var cdo = new contactDataProvider(); 
cdo.init(); 

grid = new Slick.Grid("#myGrid", cdo, columns, options);