loadData просто не будет работать - PullRequest
Новая
       7

loadData просто не будет работать

0 голосов
/ 04 июля 2018

Ниже приведен мой полный код. Нет ошибок и отображается Directory is empty. 

<script>
    $(document).ready(function() {
        $("#table").jsGrid({
            width: "100%",
            height: "auto",
            paging: false,
            autoload: false,
            noDataContent: "Directory is empty",

            controller: {
                loadData: function(filter) {
                    var data = {
                        data: [{
                            nickname: "test",
                            email: "t@gmail.com"
                        }]
                    };
                    console.log(data);
                    return data;
                }
            },
            fields: [{
                name: "nickname",
                type: "text",
                width: 80,
                title: "Name"
            }, {
                name: "email",
                type: "text",
                width: 100,
                title: "Email Address",
                readOnly: false
            }]
        });
    });
</script>

Вывод на консоль такой, как показано ниже. Что-то не так в форматировании?

enter image description here

Есть ли способ включить больше диагностики, например распечатать, какие данные он фактически получает, чтобы разрешить поиск неисправностей?

1 Ответ

0 голосов
/ 04 июля 2018

Вам нужно установить autoload:true

autoload (default false)

Логическое значение, указывающее, будет ли вызываться controller.loadData при отображении сетки.

А также вам нужно вернуть data.data внутри loadData() метода, потому что у вас есть массив внутри данных.

КОД SNIPPET 

controller: {
    loadData: function(filter) {

        var data = {
            data: [{
                nickname: "test",
                email: "t@gmail.com"
            }]
        };
        return data.data; //As per your data array is like this console.log(data.data) so you need to send like this data.data
    }
},

DEMO 

$(document).ready(function() {

    $("#table").jsGrid({
        width: "100%",
        height: "auto",
        paging: false,

        //for loadData method Need to set auto load true
        autoload: true,

        noDataContent: "Directory is empty",

        controller: {
            loadData: function(filter) {
            
            alert('Table load data method fire because we have set config autoload:true')
                var data = {
                    data: [{
                        nickname: "test",
                        email: "t@gmail.com"
                    }]
                };
                return data.data;//As per your data array is like this console.log(data.data) so you need to send like this data.data
            }
        },

        fields: [{
            name: "nickname",
            type: "text",
            width: 80,
            title: "Name"
        }, {
            name: "email",
            type: "text",
            width: 100,
            title: "Email Address",
            readOnly: false
        }]
    });
    
    $("#table1").jsGrid({
        width: "100%",
        height: "auto",
        paging: false,

        //for loadData method will not work with auto load false
        autoload: false,

        noDataContent: "Directory is empty",

        controller: {
            loadData: function(filter) {
               alert('Table 1 load data method not fire')
                return []
            }
        },

        fields: [{
            name: "nickname",
            type: "text",
            width: 80,
            title: "Name"
        }, {
            name: "email",
            type: "text",
            width: 100,
            title: "Email Address",
            readOnly: false
        }]
    });
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>


<div id="table"></div>
<br>
<br>
<br>
<div id="table1"></div>
...