Ajax 在 Webix 中不工作

Question

我正在尝试我的第一个 webix 程序。我遵循入门文档。根据文档，我将代码放在 HTML 页面和两个 json 文件中。这是我的完整代码。

<!DOCTYPE HTML>
<html>

<head>
  <link rel="stylesheet" href="../webix_v4.2.4_pro/codebase/webix.css" type="text/css">
  <script src="../webix_v4.2.4_pro/codebase/webix.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <style>
    #app_here {
      width: 1000px;
      height: 400px, margin: 200px;
    }
  </style>
</head>

<body>
  <div id="app_here"></div>

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      $.ajax({
        url: "grid_data.json",
        success: function(result) {
          debugger;
        }
      });
    });
    $(document).ready(function() {
      $.ajax({
        url: "tree_data.json",
        success: function(result) {
          debugger;
        }
      });
    });

    webix.ready(function() {
      webix.ui({
        container: "app_here",
        view: "layout",
        rows: [{
          type: "header",
          template: "My App!"
        }, {
          cols: [{
            view: "tree",
            id: "mytree",
            gravity: 0.3,
            select: true,
            data: tree_data
          }, {
            view: "resizer"
          }, {
            view: "datatable",
            id: "mydatatable",
            autoConfig: true,
            data: grid_data
          }]
        }]
      });
      $$("mytree").open(1);
      $$("mytree").open(2);
      $$("mydatatable").select(1);
    });
  </script>

</body>

</html>

我的页面正在加载，但有一个错误

Uncaught ReferenceError: tree_data is not defined

此外页面未加载。我是否遗漏了 ajax 中的任何内容或其他内容。谁能帮我解决这个问题。

如果您需要，我也会放置我的 json 数据。

我的tree_data.json

[
  { id: "1", 
    type: "folder", 
    value: "Music", 
    css:"folder_music", 
    data:[{
            id : 6,
            type: "folder", 
            value: "Music", 
        },{
            id : 3,
            type: "folder", 
            value: "Music", 
        },{
            id : 4,
            type: "folder", 
            value: "Music", 
        },{
            id : 5,
            type: "folder", 
            value: "Music", 
        }]
 },{ id: "2", 
    type: "folder", 
    value: "Music", 
    css:"folder_music", 
    data:[{
            id : 7,
            type: "folder", 
            value: "Music", 
        },{
            id : 8,
            type: "folder", 
            value: "Music", 
        },{
            id : 9,
            type: "folder", 
            value: "Music", 
        },{
            id : 10,
            type: "folder", 
            value: "Music", 
        }]
 }
]

我的grid_data.json

[
  { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
  { id:2, title:"The Godfather", year:1994, votes:678790, rating:9.2, rank:1},
  { id:3, title:"The Godfather part : 2", year:1994, votes:678790, rating:9.2, rank:1},
  { id:4, title:"The good, the bad and the Ugly ", year:1994, votes:678790, rating:9.2, rank:1},
  { id:5, title:"My Fair Lady", year:1994, votes:678790, rating:9.2, rank:1},
  { id:6, title:"12 Angery Man", year:1994, votes:678790, rating:9.2, rank:1}
]

Answer 1

我假设 tree_data 是您尝试通过 ajax 请求获取的 json 数据。您需要 return 数据或将其存储在某处以备后用。在您的代码中，您没有定义 tree_data 或 grid_data。尝试获取类似于其完成方式的数据 here:

<!DOCTYPE HTML>
<html>

<head>
  <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
  <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>

<body>
  <div id="app_here"></div>

  <script type="text/javascript" charset="utf-8">
    var gridData = (function() {
      var grid_data;
      $.ajax({
        url: "grid_data.json",
        success: function(result) {
          grid_data = result;
          console.log(grid_data);
        }
      });

      return {
        getData: function() {
          if (grid_data) return grid_data;
        }
      }
    })();

    var treeData = (function() {
      var tree_data;
      $.ajax({
        url: "tree_data.json",
        success: function(result) {
          tree_data = result;
          console.log(tree_data);
        }
      });

      return {
        getData: function() {
          if (tree_data) return tree_data;
        }
      }
    })();

    webix.ready(function() {
      webix.ui({

        container: "app_here",
        view: "layout",
        rows: [{
          type: "header",
          template: "My App!"
        }, {
          cols: [{
            view: "tree",
            id: "mytree",
            gravity: 0.3,
            select: true,
            data: treeData.getData() // get your tree_data
          }, {
            view: "resizer"
          }, {
            view: "datatable",
            id: "mydatatable",
            autoConfig: true,
            data: gridData.getData() // get your grid_data
          }]
        }]

      });
      $$("mytree").open(1);
      $$("mytree").open(2);
      $$("mydatatable").select(1);
    });
  </script>

</body>

</html>

您的 JSON 没有加载，因为它无效 json；键必须是这样的字符串：

tree_data

[{
  "id": "1",
  "type": "folder",
  "value": "Music",
  "css": "folder_music",
  "data": [{
    "id": 6,
    "type": "folder",
    "value": "Music"
  }, {
    "id": 3,
    "type": "folder",
    "value": "Music"
  }, {
    "id": 4,
    "type": "folder",
    "value": "Music"
  }, {
    "id": 5,
    "type": "folder",
    "value": "Music"
  }]
}, {
  "id": "2",
  "type": "folder",
  "value": "Music",
  "css": "folder_music",
  "data": [{
    "id": 7,
    "type": "folder",
    "value": "Music"
  }, {
    "id": 8,
    "type": "folder",
    "value": "Music"
  }, {
    "id": 9,
    "type": "folder",
    "value": "Music"
  }, {
    "id": 10,
    "type": "folder",
    "value": "Music"
  }]
}]

grid_data

[{
  "id": 1,
  "title": "The Shawshank Redemption",
  "year": 1994,
  "votes": 678790,
  "rating": 9.2,
  "rank": 1
}, {
  "id": 2,
  "title": "The Godfather",
  "year": 1994,
  "votes": 678790,
  "rating": 9.2,
  "rank": 1
}, {
  "id": 3,
  "title": "The Godfather part : 2",
  "year": 1994,
  "votes": 678790,
  "rating": 9.2,
  "rank": 1
}, {
  "id": 4,
  "title": "The good, the bad and the Ugly ",
  "year": 1994,
  "votes": 678790,
  "rating": 9.2,
  "rank": 1
}, {
  "id": 5,
  "title": "My Fair Lady",
  "year": 1994,
  "votes": 678790,
  "rating": 9.2,
  "rank": 1
}, {
  "id": 6,
  "title": "12 Angery Man",
  "year": 1994,
  "votes": 678790,
  "rating": 9.2,
  "rank": 1
}]

如果这不是您的解决方案，您应该考虑的问题是确保将数据 tree_data 和 grid_data 放入 webix.ready() 的范围内。希望这会有所帮助。

Ajax 在 Webix 中不工作

Ajax is not working in Webix

javascript

ajax

jquery

json

webix

tree_data

grid_data