文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Ajax不在Webix中工作。

问Ajax不在Webix中工作。
EN

Stack Overflow用户
提问于 2017-03-03 04:32:00
回答 1查看 957关注 0票数 4

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

代码语言：javascript
复制
<!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>

我的页面只加载了一个错误

未定义的ReferenceError: tree_data未定义

另外，页面不是在划桨。我是不是漏掉了ajax之类的东西。有人能帮我一下吗。

如果你需要，我也会把我的json数据。

我的tree_data.json

代码语言：javascript
复制
[
  { 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

代码语言：javascript
复制
[
  { 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}
]
jquery
json
ajax
webix
javascript
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-03 05:34:45

我假设tree_data是您试图通过ajax请求获取的json数据。您需要返回数据或将其存储在某个地方供以后使用。在您拥有的代码中，您没有定义tree_data或grid_data。尝试获取类似于它是如何实现here的数据

​

代码语言：javascript
复制
<!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

代码语言：javascript
复制
[{
  "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

代码语言：javascript
复制
[{
  "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()的范围。希望这能有所帮助。

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

https://stackoverflow.com/questions/42570705

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档