当前位置: 首页 > 面试题库 >

jsTree-按需通过Ajax加载子节点

姜淇
2023-03-14
问题内容

我正在尝试让jsTree与子节点的按需加载一起使用。我的代码是这样的:

jQuery('#introspection_tree')。jstree({ 
        “ json_data”:{
            “ ajax”:{
                网址:“ http:// localhost / introspection / introspection / product”
            }
    },
    “ plugins”:[“主题”,“ json_data”,“ ui”]
    });

调用返回的json是

[
  {
    “ data”:“套件1”,
    “ attr”:{
      “ id”:“ 1”
    },
    “儿童”:[
      [
        {
          “数据”:“硬件”,
          “ attr”:{
            “ id”:“ 2”
          },
          “儿童”:[

          ]
        }
      ],
      [
        {
          “数据”:“软件”,
          “ attr”:{
            “ id”:“ 3”
          },
          “儿童”:[

          ]
        }
      ]
    ]
  }
  .....
]

每个元素可以有很多孩子,树会很大。当前,这将立即加载整个树,这可能需要一些时间。当用户打开子节点时,我该怎么做以实现按需加载?

提前致谢。


问题答案:

Irishka向我指出了正确的方向,但并不能完全解决我的问题。我在弄弄她的答案,然后想到了这个。仅为了清楚起见,使用了两个不同的服务器功能。第一个列出了顶层的所有产品,第二个列出了给定productid的所有子级:

jQuery("#introspection_tree").jstree({
    "plugins" : ["themes", "json_data", "ui"],
    "json_data" : {
        "ajax" : {
            "type": 'GET',
            "url": function (node) {
                var nodeId = "";
                var url = ""
                if (node == -1)
                {
                    url = "http://localhost/introspection/introspection/product/";
                }
                else
                {
                    nodeId = node.attr('id');
                    url = "http://localhost/introspection/introspection/children/" + nodeId;
                }

                return url;
            },
            "success": function (new_data) {
                return new_data;
            }
        }
    }
});

从函数返回的json数据是这样的(注意state =每个节点中的close状态):

[
  {
    “ data”:“套件1”,
    “ attr”:{
      “ id”:“ 1”
    },
    “ state”:“关闭”
  },
  {
    “数据”:“ KPCM 049”,
    “ attr”:{
      “ id”:“ 4”
    },
    “ state”:“关闭”
  },
  {
    “ data”:“ Linux BSP”,
    “ attr”:{
      “ id”:“ 8”
    },
    “ state”:“关闭”
  }
]

不需要静态数据,该树现在在每个级别上都是完全动态的。



 类似资料:
  • 问题内容: 好的,所以我对ajax和从外部加载内容还很陌生,希望对我的问题有任何见解。 我目前有一个隐藏的div,它是空的,单击链接后应该在其中加载ajax内容。 我目前有一个链接列表,所有链接都具有相同的类,并且我想在单击空白div时进行幻灯片切换,然后从链接要访问的页面中加载内容。 链接: 当前的jQuery: 刚接触Ajax并加载外部内容时,我想知道如何从位于标签中的链接页面加载内容。因此,

  • 我用jstree制作了一个树,它部分加载,并在扩展节点时通过json_data插件加载。这里是代码的关键: 然后,我想展开一些节点,并选择一个叶节点,这取决于哪个用户正在访问站点。我在一个循环中执行此操作,如下所示: 打开父节点可以正常工作,并且当树显示但firstChild节点未打开时,firstChild将公开。如果我再次启动循环,firstchild将成功打开以显示叶节点。 我的猜测是,当上

  • 出于性能的考虑,我们会对模块和组件进行按需加载。 按需加载组件 通过 umi/dynamic 接口实现,比如: import dynamic from 'umi/dynamic'; const delay = (timeout) => new Promise(resolve => setTimeout(resolve, timeout)); const App = dynamic({ loa

  • 问题内容: 我正在创建一个浏览大量图片的应用程序。至此,项目的那部分完成了,它对正确的图片进行了排序,过滤和加载,甚至将它们拆分为单独的页面以加快加载速度。 效果很好,但每页加载25张图片仍需要8秒钟以上。我已经进行了一些研究,得出的结论是,使用异步jQuery Ajax请求是最好的方式,以便尽可能快地同时加载所有请求。 到目前为止,这是我的代码: 此代码的问题在于,除了带有灰色边框的空白方形外,

  • 我试图通过插入URL来使用JavaScript获取整个网页。但是,该网站被构建为一个单页面应用程序(SPA),它使用JavaScript/Backbone.js在呈现初始响应后动态加载大部分内容。 例如,当我路由到以下地址时: 然后在控制台中输入以下内容(在页面加载之后): 我在这里尝试了每个标记的内容的解决方案,但它看起来不够健壮,无法实际加载页面: 问:在JavaScript上完全加载网页的选

  • 使用最新的jstree。我可以加载所有节点,但现在我正在尝试延迟加载节点。当我展开最后一个可见节点时,不会生成GET。 .js 从初始调用返回的JSON数据是[{"state":{"open": true,"禁用": false,"选择": false},"id":"-100","text":"Node1 Text","子":[{"state":{"open": false,"禁用": false