问jsGrid不显示表
EN

Stack Overflow用户

提问于 2018-08-21 12:28:21

回答 1查看 1.6K关注 0票数 0

我正在使用下面的代码，这是我从一个jsFiddle示例中获得的。似乎在那里工作，但在本地，无论是IE或Chrome。我只有一页空白。

我从config.php中提取了GitHub并用我的属性更新了它。我还提取了createdb.sql文件并创建了一个MySQL数据库(它创建了表“countries”和“clients”)。

最后，我的数据输入了“国家”和“客户”的所有信息，他们认为他们需要在那里，但我不知道为什么。

我做错了什么？

<!doctype html>
<html>
<head>

<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" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<script   src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"</script>
<script   src="https://code.jquery.com/ui/1.12.1/jquery-ui.css"</script>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>
<body>

<div id="jsGrid">
</div>

<script>
window.db = {};

db.countries = [
    { Name: "", Id: 0 },
    { Name: "United States", Id: 1 },
    { Name: "Canada", Id: 2 },
    { Name: "United Kingdom", Id: 3 },
    { Name: "France", Id: 4 },
    { Name: "Brazil", Id: 5 },
    { Name: "China", Id: 6 },
    { Name: "Russia", Id: 7 }
];

db.clients = [
    {
        "Name": "Otto Clay",
        "Age": 61,
        "Country": 6,
        "Address": "Ap #897-1459 Quam Avenue",
        "Married": false
    },
    {
        "Name": "Connor Johnston",
        "Age": 73,
        "Country": 7,
        "Address": "Ap #370-4647 Dis Av.",
        "Married": false
    },
    {
        "Name": "Lacey Hess",
        "Age": 29,
        "Country": 7,
        "Address": "Ap #365-8835 Integer St.",
        "Married": false
    },
    {
        "Name": "Timothy Henson",
        "Age": 78,
        "Country": 1,
        "Address": "911-5143 Luctus Ave",
        "Married": false
    },
    {
        "Name": "Ramona Benton",
        "Age": 43,
        "Country": 5,
        "Address": "Ap #614-689 Vehicula Street",
        "Married": true
    },
    {
        "Name": "Ezra Tillman",
        "Age": 51,
        "Country": 1,
        "Address": "P.O. Box 738, 7583 Quisque St.",
        "Married": true
    },
    {
        "Name": "Dante Carter",
        "Age": 59,
        "Country": 1,
        "Address": "P.O. Box 976, 6316 Lorem, St.",
        "Married": false
    },
    {
        "Name": "Christopher Mcclure",
        "Age": 58,
        "Country": 1,
        "Address": "847-4303 Dictum Av.",
        "Married": true
    },
    {
        "Name": "Ruby Rocha",
        "Age": 62,
        "Country": 2,
        "Address": "5212 Sagittis Ave",
        "Married": false
    },
    {
        "Name": "Imelda Hardin",
        "Age": 39,
        "Country": 5,
        "Address": "719-7009 Auctor Av.",
        "Married": false
    },
    {
        "Name": "Jonah Johns",
        "Age": 28,
        "Country": 5,
        "Address": "P.O. Box 939, 9310 A Ave",
        "Married": false
    },
    {
        "Name": "Herman Rosa",
        "Age": 49,
        "Country": 7,
        "Address": "718-7162 Molestie Av.",
        "Married": true
    },
    {
        "Name": "Arthur Gay",
        "Age": 20,
        "Country": 7,
        "Address": "5497 Neque Street",
        "Married": false
    },
    {
        "Name": "Xena Wilkerson",
        "Age": 63,
        "Country": 1,
        "Address": "Ap #303-6974 Proin Street",
        "Married": true
    },
    {
        "Name": "Lilah Atkins",
        "Age": 33,
        "Country": 5,
        "Address": "622-8602 Gravida Ave",
        "Married": true
    },
    {
        "Name": "Malik Shepard",
        "Age": 59,
        "Country": 1,
        "Address": "967-5176 Tincidunt Av.",
        "Married": false
    },
    {
        "Name": "Keely Silva",
        "Age": 24,
        "Country": 1,
        "Address": "P.O. Box 153, 8995 Praesent Ave",
        "Married": false
    },
    {
        "Name": "Hunter Pate",
        "Age": 73,
        "Country": 7,
        "Address": "P.O. Box 771, 7599 Ante, Road",
        "Married": false
    },
    {
        "Name": "Mikayla Roach",
        "Age": 55,
        "Country": 5,
        "Address": "Ap #438-9886 Donec Rd.",
        "Married": true
    },
    {
        "Name": "Upton Joseph",
        "Age": 48,
        "Country": 4,
        "Address": "Ap #896-7592 Habitant St.",
        "Married": true
    },
    {
        "Name": "Jeanette Pate",
        "Age": 59,
        "Country": 2,
        "Address": "P.O. Box 177, 7584 Amet, St.",
        "Married": false
    }
];

jsGrid.loadStrategies.PageLoadingStrategy.prototype.sort = function() {
        this._grid._sortData();
        this._grid.refresh();
        return $.Deferred().resolve().promise();
    }

$("#jsGrid").jsGrid({
    height: "300px",
    width: "100%",

    autoload: true,
    paging: true,
    pageLoading: true,
    filtering: true,
    sorting: true,
    pageSize: 15,
    pageIndex: 2,

    controller: {
        loadData: function(filter) {
            console.log(filter);
            var startIndex = (filter.pageIndex - 1) * filter.pageSize;
            return {
                data: db.clients.slice(startIndex, startIndex + filter.pageSize),
                itemsCount: db.clients.length
            };
        }
    },

    fields: [
        { name: "Name", type: "text", width: 150 },
        { name: "Age", type: "number", width: 50 },
        { name: "Address", type: "text", width: 200 },
        { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
        { name: "Married", type: "checkbox", title: "Is Married" }
    ]
});

</script>

</body>
</html>

附注：-在这一点上，我不在乎数据来自哪里-- JSON，MySQL，CSV，文本文件，茶叶等等--我只想看到网格。

jsgrid

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-22 05:52:55

您只需更改head内部的导入顺序即可。

jsgrid依赖于jquery的存在，因此我将jquery放在首位。工作守则如下：

<!doctype html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.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" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" </script>
    < script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.css"
  </script>
</head>

<body>

  <div id="jsGrid">
  </div>

  <script>
    window.db = {};

    db.countries = [{
        Name: "",
        Id: 0
      },
      {
        Name: "United States",
        Id: 1
      },
      {
        Name: "Canada",
        Id: 2
      },
      {
        Name: "United Kingdom",
        Id: 3
      },
      {
        Name: "France",
        Id: 4
      },
      {
        Name: "Brazil",
        Id: 5
      },
      {
        Name: "China",
        Id: 6
      },
      {
        Name: "Russia",
        Id: 7
      }
    ];

    db.clients = [{
        "Name": "Otto Clay",
        "Age": 61,
        "Country": 6,
        "Address": "Ap #897-1459 Quam Avenue",
        "Married": false
      },
      {
        "Name": "Connor Johnston",
        "Age": 73,
        "Country": 7,
        "Address": "Ap #370-4647 Dis Av.",
        "Married": false
      },
      {
        "Name": "Lacey Hess",
        "Age": 29,
        "Country": 7,
        "Address": "Ap #365-8835 Integer St.",
        "Married": false
      },
      {
        "Name": "Timothy Henson",
        "Age": 78,
        "Country": 1,
        "Address": "911-5143 Luctus Ave",
        "Married": false
      },
      {
        "Name": "Ramona Benton",
        "Age": 43,
        "Country": 5,
        "Address": "Ap #614-689 Vehicula Street",
        "Married": true
      },
      {
        "Name": "Ezra Tillman",
        "Age": 51,
        "Country": 1,
        "Address": "P.O. Box 738, 7583 Quisque St.",
        "Married": true
      },
      {
        "Name": "Dante Carter",
        "Age": 59,
        "Country": 1,
        "Address": "P.O. Box 976, 6316 Lorem, St.",
        "Married": false
      },
      {
        "Name": "Christopher Mcclure",
        "Age": 58,
        "Country": 1,
        "Address": "847-4303 Dictum Av.",
        "Married": true
      },
      {
        "Name": "Ruby Rocha",
        "Age": 62,
        "Country": 2,
        "Address": "5212 Sagittis Ave",
        "Married": false
      },
      {
        "Name": "Imelda Hardin",
        "Age": 39,
        "Country": 5,
        "Address": "719-7009 Auctor Av.",
        "Married": false
      },
      {
        "Name": "Jonah Johns",
        "Age": 28,
        "Country": 5,
        "Address": "P.O. Box 939, 9310 A Ave",
        "Married": false
      },
      {
        "Name": "Herman Rosa",
        "Age": 49,
        "Country": 7,
        "Address": "718-7162 Molestie Av.",
        "Married": true
      },
      {
        "Name": "Arthur Gay",
        "Age": 20,
        "Country": 7,
        "Address": "5497 Neque Street",
        "Married": false
      },
      {
        "Name": "Xena Wilkerson",
        "Age": 63,
        "Country": 1,
        "Address": "Ap #303-6974 Proin Street",
        "Married": true
      },
      {
        "Name": "Lilah Atkins",
        "Age": 33,
        "Country": 5,
        "Address": "622-8602 Gravida Ave",
        "Married": true
      },
      {
        "Name": "Malik Shepard",
        "Age": 59,
        "Country": 1,
        "Address": "967-5176 Tincidunt Av.",
        "Married": false
      },
      {
        "Name": "Keely Silva",
        "Age": 24,
        "Country": 1,
        "Address": "P.O. Box 153, 8995 Praesent Ave",
        "Married": false
      },
      {
        "Name": "Hunter Pate",
        "Age": 73,
        "Country": 7,
        "Address": "P.O. Box 771, 7599 Ante, Road",
        "Married": false
      },
      {
        "Name": "Mikayla Roach",
        "Age": 55,
        "Country": 5,
        "Address": "Ap #438-9886 Donec Rd.",
        "Married": true
      },
      {
        "Name": "Upton Joseph",
        "Age": 48,
        "Country": 4,
        "Address": "Ap #896-7592 Habitant St.",
        "Married": true
      },
      {
        "Name": "Jeanette Pate",
        "Age": 59,
        "Country": 2,
        "Address": "P.O. Box 177, 7584 Amet, St.",
        "Married": false
      }
    ];

    jsGrid.loadStrategies.PageLoadingStrategy.prototype.sort = function() {
      this._grid._sortData();
      this._grid.refresh();
      return $.Deferred().resolve().promise();
    }

    $("#jsGrid").jsGrid({
      height: "300px",
      width: "100%",

      autoload: true,
      paging: true,
      pageLoading: true,
      filtering: true,
      sorting: true,
      pageSize: 15,
      pageIndex: 2,

      controller: {
        loadData: function(filter) {
          console.log(filter);
          var startIndex = (filter.pageIndex - 1) * filter.pageSize;
          return {
            data: db.clients.slice(startIndex, startIndex + filter.pageSize),
            itemsCount: db.clients.length
          };
        }
      },

      fields: [{
          name: "Name",
          type: "text",
          width: 150
        },
        {
          name: "Age",
          type: "number",
          width: 50
        },
        {
          name: "Address",
          type: "text",
          width: 200
        },
        {
          name: "Country",
          type: "select",
          items: db.countries,
          valueField: "Id",
          textField: "Name"
        },
        {
          name: "Married",
          type: "checkbox",
          title: "Is Married"
        }
      ]
    });
  </script>

</body>

</html>

票数 1

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

原文链接：

https://stackoverflow.com/questions/51948703

复制

相似问题

问jsGrid不显示表
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jsGrid不显示表EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jsGrid不显示表
EN