javascript - 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

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