Question

此代码显示在浏览器中运行时的网格定义。它还打印到控制台，所以我可以看到数据的数组。不在网格中显示，只是网格标题。

有什么想法吗？

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

Answer 1

您可以通过在loadData内使用grid-controller方法来实现此功能。

查看演示

$("#jsGrid").jsGrid({
  width: "100%",
  height: "auto",

  autoload: true,
  paging: true,
  pageSize: 10,
  pageButtonCount: 5,
  pageIndex: 1,

  controller: {
    loadData: function(filter) {
      return $.ajax({
        url: "//restcountries.eu/rest/v2/all",//you can put your url here.
        dataType: "json"
      });
    }
  },
  fields: [{
      name: 'alpha2Code',
      title: 'Code',
      width: 50
    },{
      name: "name",
      title:'Full Name',
      width: 50
    }
  ]
});

<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="jsGrid"></div>

Answer 2

能否提供您的实际数据摘要？

您的paging和pageLoading是真实的，因此您的数据必须采用以下格式：

{
  "data": [ { ..first item ...}, { ..second item..}, ...],
  "itemsCount": n 
}

itemsCount是数据的记录总数。这是为了让jsGrid计算页面总数。

请参见http://js-grid.com/docs/#loaddatafilter-promisedataresult

jsGrid Jquery没有加载数据

2 个答案: