首页 > 解决方案 > jQuery - jquery-3.4.1.min.js:2 Uncaught ReferenceError: filter is not defined

问题描述

我使用jsGrid本地json文件作为数据源。我在端口 4000 上设置了一个本地json-server运行来提供动态数据。当我点击时http://localhost:4000/networks,我看到 json 就好了。我还设置了一个带有npm'http-server包的本地 http 服务器来访问我的网页。但是,当我尝试点击时http://localhost:8080,我得到一个空白页。在开发控制台中,我看到了这个错误:jquery-3.4.1.min.js:2 Uncaught ReferenceError: filter is not defined. 我对 有点陌生jQuery,不知道为什么会发生这个错误。下面是我的目录结构、我的html文件、js、示例 json 和错误。

Tree:

.
└── src
    ├── data
    │   └── scan.json
    ├── hosts.js
    ├── index.html
    ├── jsgrid-theme.css
    ├── jsgrid-theme.min.css
    ├── jsgrid.css
    ├── jsgrid.js
    ├── jsgrid.min.css
    ├── jsgrid.min.js
    └── style.css

index.html:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script> 
        <link href="style.css" rel="stylesheet">
        <link href="jsgrid.min.css" rel="stylesheet">
        <link href="jsgrid-theme.min.css" rel="stylesheet">      
    </head>
    <body>
        <div id="jsGrid"></div> 
        <script src="http://js-grid.com/js/jsgrid.min.js"></script>
        <script src="hosts.js"></script>
    </body>
</html>

JSON:

{
  "networks": [
          {
            "id": "dc34ec44-aba0-4a9c-9ea0-cbacf48a15e4",
            "ip": "192.168.0.4",
            "mac": "8c:85:90:ae:10:24",
            "packets_received": 74,
            "packets_sent": 97,
            "data_sent": 1352,
            "data_received": 1076
          },
          {
            "id": "b367bc81-b6d0-4c10-86e0-f7394bf2489e",
            "ip": "192.168.0.7",
            "mac": "00:d0:2d:e9:ae:88"
          },
          {
            "id": "d46f11d4-e384-42b3-95d4-5eadc19b6552",
            "ip": "192.168.0.8",
            "mac": "34:93:42:06:01:4c"
          },
          {
            "id": "47da3cb0-ee30-44ad-a1c3-bbf542ffeae3",
            "ip": "17.249.121.246",
            "mac": "f8:a0:97:87:11:0e",
            "packets_received": 18,
            "packets_sent": 7,
            "data_sent": 156,
            "data_received": 256
          }
     ]
}

JS:

$(function() {

    $("#jsGrid").jsGrid({
      width: "auto",
      height: "auto",

      filtering: true,
      editing: false,
      sorting: true,
      paging: true,
      pageLoading : true,

      controller: {
        loadData: function (filter) {
            return $.ajax({
                type: "GET",
                url: "http://localhost:4000/networks",
                data: filter,
                dataType: "json"
            });
        }
      },

      data: filter,
      fields: [
        { name: "ip", type: "text", width: 100 },
        { name: "mac", type: "text", width: 100 },
        { name: "packets_received", type: "number", width: 20 },
        { name: "packets_sent", type: "number", width: 20 },
        { name: "data_received", type: "number", width: 20 },
        { name: "data_sent", type: "number", width: 20 },
      ]
    })  
  })

Error:

jquery-3.4.1.min.js:2 Uncaught ReferenceError: filter is not defined
    at HTMLDocument.<anonymous> (hosts.js:24)
    at e (jquery-3.4.1.min.js:2)
    at t (jquery-3.4.1.min.js:2)

标签: javascripthtmljsonhttpjsgrid

解决方案


您有两次出现该行data: filter;你不想要那些。

根据jsGrid 文档,控制器的 loadData 方法应返回与您在fields属性中定义的结构匹配的数据数组。


推荐阅读