JQuery SlickGrid инициализировать с данными JSON

Question

Проблема: как инициализировать 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"}]

Пожалуйста, помогите мне узнать, как запустить SlickGrid с данными JSON.

РЕДАКТИРОВАТЬ: У меня нет никаких ошибок консоли.

Answer 1

Я реализовал это, реализовав поставщик данных и передав его в конструктор. Это, вероятно, не будет работать, как есть, но, надеюсь, вы поняли идею. По сути, у вас есть поставщик данных, который загружает массив посредством вашего вызова 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);