Javascript jQuery使用json数据初始化网格

问题：如何使用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数据运行SlickGrid

编辑：

---

我没有任何控制台错误。

我实现它的方式是实现一个数据提供程序并将其传递给构造函数。这可能不会像现在这样起作用，但希望你能理解。实际上，您让数据提供者通过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);

确保您的

#数据
元素的宽度和高度已设置。SlickGrid不会自动为您设置容器的宽度或高度。由于容器中的所有内容都是相对或绝对定位的，因此看起来好像SlickGrid的初始化没有工作。
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);