jQuery的SlickGrid初始化JSON數據

問題：如何使用JSON數據初始化SlickGridjQuery的SlickGrid初始化JSON數據

非我不工作代碼：

<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。編輯：我沒有任何控制檯錯誤。

來源

2013-10-22 Maciej Płocki

確保您的＃data元素的寬度和高度都設置了。 SlickGrid不會自動爲你設置容器的寬度或高度。並且由於容器內的所有內容都相對或絕對地定位，所以它看起來好像SlickGrid的初始化不起作用。 – idbehold

好的建議，thx –

我實現它的方式是實現一個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);

來源

2013-10-25 20:14:16 Damian

謝謝。幾行新代碼及其工作。 –

jQuery的SlickGrid初始化JSON數據

回答

相關問題