jsGrid Jquery未加载数据_Jquery_Jsgrid

jsGrid Jquery未加载数据

jquery

jsGrid Jquery未加载数据,jquery,jsgrid,Jquery,Jsgrid,此代码在浏览器中运行时显示网格定义。它还打印到控制台，这样我就可以看到数据数组在那个里。但不显示在网格中，只显示网格标题有什么想法吗 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/ja

此代码在浏览器中运行时显示网格定义。它还打印到控制台，这样我就可以看到数据数组在那个里。但不显示在网格中，只显示网格标题

有什么想法吗

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

</head>

<body>
    <div id="jsGrid"></div>
    <script>
        var ourRequest = new XMLHttpRequest();
        var ourData;
        ourRequest.open('GET', 'http://localhost:8080/test/data/hello', true);
        ourRequest.onload = function() {
            ourData = JSON.parse(ourRequest.responseText);
            console.log(ourData);
        };
        ourRequest.send();

        $("#jsGrid").jsGrid({
            width: "50%",
            height: "300",
            pageLoading: true,
            autoload: true,
            inserting: true,
            editing: true,
            sorting: true,
            paging: true,

            data: ourData,

            fields: [{
                    name: "name",
                    type: "text",
                    width: 150,
                    validate: "required"
                },
                {
                    name: "id",
                    type: "number",
                    width: 50
                }
            ]
        });
    </script>
</body>

</html>


var ourRequest=new XMLHttpRequest（）；
var数据；
我们的请求。打开（'GET'，'http://localhost:8080/test/data/hello",对),；
ourRequest.onload=函数（）{
ourData=JSON.parse（ourRequest.responseText）；
console.log（ourData）；
};
ourRequest.send（）；
$（“#jsGrid”）.jsGrid({
宽度：“50%”，
高度：“300”，
页面加载：对，
自动加载：对，
插入：对，
编辑:对,，
排序：对，
是的，
数据：我们的数据，
字段：[{
姓名：“姓名”，
键入：“文本”，
宽度：150，
验证：“必需”
},
{
姓名：“id”，
键入：“数字”，
宽度：50
}
]
});

您可以使用的内部方法实现此功能

见演示

$（“#jsGrid”）.jsGrid({
宽度：“100%”，
高度：“自动”，
自动加载：对，
是的，
页面大小：10，
pageButtonCount:5，
页面索引：1，
控制器：{
loadData:函数（过滤器）{
返回$.ajax({
url://restcountries.eu/rest/v2/all“，//您可以将url放在这里。
数据类型：“json”
});
}
},
字段：[{
名称：'alpha2Code'，
标题：“代码”，
宽度：50
},{
姓名：“姓名”，
标题：'全名'，
宽度：50
}
]
});
您能给出您的实际数据片段吗
您的分页
和页面加载
是正确的，因此您的数据必须采用以下格式：
{
  "data": [ { ..first item ...}, { ..second item..}, ...],
  "itemsCount": n 
}

itemsont
是数据的记录总数。这是为了允许jsGrid计算总页数
看