文章/答案/技术大牛

发布

社区首页 >问答首页 >jsGrid Jquery未加载数据

问jsGrid Jquery未加载数据
EN

Stack Overflow用户

提问于 2018-06-19 06:13:38

回答 2查看 766关注 0票数 0

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

有什么想法吗？

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

jquery

jsgrid

回答 2

Stack Overflow用户

发布于 2018-07-03 14:57:47

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

请参阅演示

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

票数 0

Stack Overflow用户

发布于 2018-07-04 01:38:04

你能给出一个你的实际数据的片段吗？

你的paging和pageLoading是真的，所以你的数据必须是这样的：

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

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50918157

复制

相似问题

问jsGrid Jquery未加载数据
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jsGrid Jquery未加载数据EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jsGrid Jquery未加载数据
EN