loadData 不起作用

Question

以下是我的完整代码。没有错误并显示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>

控制台输出如下。格式有什么不对吗？

有没有办法启用更多诊断，例如打印出它实际接收的数据以便进行故障排除？

Answer 1

你需要设置autoload:true

autoload (default false)

一个布尔值，指定在渲染网格时是否调用controller.loadData。

您还需要在loadData() mehtod 中返回data.data，因为数据中有数组。

代码片段

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
    }
},

演示

$(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>