热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

TreeLoader:不为子节点发出ajax请求?-TreeLoader:Notfiringajaxrequestforchildnodes?

Okso,ihavethissitethatiamputtingtogetherintheplayframework.Itbasicallyconnectstoa

Ok so, i have this site that i am putting together in the play framework. It basically connects to an FTP site on the back end, retrieves a list of folders/files and sends that to a basic ExtJS front-end as JSON.

我把这个网站放在play框架中。它基本上连接到后端的一个FTP站点,检索文件夹/文件的列表,并将其发送到基本的ExtJS前端作为JSON。

I have it working so that the Tree Panel gets populated correctly, but it doesn't seem to be doing anything special when i expand a non-leaf node.

我让它工作以便树面板得到正确的填充,但是当我扩展一个非叶节点时,它似乎并没有做什么特别的事情。

Based on what i've read, it should use the data url, and pass a node parameter with the id of the node to that data url to get the data for the child nodes, but in firebug i don't see any requests being sent for that data.

根据我所读的内容,它应该使用数据url,并将具有节点id的节点参数传递给该数据url,以获取子节点的数据,但是在firebug中,我没有看到为该数据发送任何请求。

What do i need to do to allow the ajax calls to fire so that nodes that have children will get them dynamically when the node is expanded?

我需要做什么来允许ajax调用触发,以便具有子节点的节点在扩展节点时动态地获取它们?

Here is the relevant code for reference:

以下是相关的代码供参考:

Ext.onReady(function() {



   new Ext.Viewport({
       layout: 'border',
       defaults: {
         height: 100,
         width: 250,
         collapseMode: 'mini'
       },
       items : [
           {
               region: 'center',
               margins: '5 5 0 0',
               contentEl: 'center-content'
           },
           {
               id: 'file-tree',
               region: 'west',
               title: 'Files',
               split: true,
               collapsible: true,
               xtype: 'treepanel',
               autoScroll: true,
               loader: new Ext.tree.TreeLoader({
                    dataUrl: 'http://localhost:9000/application/listFiles',


                }),

               root: new Ext.tree.AsyncTreeNode({
                   expand: true,
                   text: "/",
                   id: "/"
               }),
               rootVisibile: true,
               listeners: {
                   click: function(n) {
                       Ext.Msg.alert('File Tree Click', 'You clicked: ' + n.attributes.id);
                   }
               }
           }
       ]
   });
});

The id returned in the JSON is the complete path to sub directory i would like to expand, and the listfiles action will take that parameter and return the appropriate files.

JSON中返回的id是我想要展开的子目录的完整路径,而listfiles操作将接受该参数并返回适当的文件。

As requested, here is a snippet of the JSON output:

按照要求,以下是JSON输出的一个片段:

[
      {
          id: "/./",
          text: "./",
          leaf: false,
          children: [ ]
      },
      {
          id: "/../",
          text: "../",
          leaf: false,
          children: [ ]
      },
      {
          id: "/.ftpquota",
          text: ".ftpquota",
          leaf: true,
          children: [ ]
      },
      {
          id: "/.htaccess",
          text: ".htaccess",
          leaf: true,
          children: [ ]
      },
      {
          id: "/022610.html",
          text: "022610.html",
          leaf: true,
          children: [ ]
      },
      {
          id: "/Gail/",
          text: "Gail/",
          leaf: false,
          children: [ ]
      }
]

That last item is an example of the folder that i am looking to dynamically load the children to.

最后一项是我要动态加载子目录的文件夹示例。

2 个解决方案

#1


2  

It is not populating the non-leaf treenodes because in your JSON, there are no children.

它不填充非叶treenodes,因为在JSON中没有子元素。

What you can do is reload the root node, passing additional parameters (ID's) for the subfolders you would like to get results for.

您可以做的是重载根节点,为希望获得结果的子文件夹传递额外的参数(ID)。

on the click or expand events for the AsyncTreeNode, you will need to reload the root. Feed the reload method the ID subfolder (clickedVal) you'd like to reload the tree with.

在为AsyncTreeNode单击或展开事件时,需要重新加载根。为要重新加载树的ID子文件夹(clickedVal)提供reload方法。

myTreePanel.loader = new Ext.tree.TreeLoader({
    dataUrl:  'http://localhost:9000/application/listFiles',
    requestMethod: 'POST',
    listeners: {
        beforeload: function() {
        this.baseParams.subFolderID = clickedVal;
            }
    }
});
myTreePanel.root.reload({baseParams: {subFolderID: clickedVal});

Addtional Notes: You'll probably need to build in some navigation controls to move back up the tree using this method.

附加说明:您可能需要构建一些导航控件,以便使用此方法向树中移动。

#2


1  

As mentioned by the previous poster, the returned JSON, as written, would NOT return any children (no apparent hierarchy/referencing is present). To explain what is happening, it may help for me to take you through a simple treepanel example.

正如前面的海报所提到的,返回的JSON如所写,不会返回任何子元素(没有明显的层次结构/引用)。为了解释正在发生的事情,我将带您看一个简单的treepanel示例。

First things first- the ExtJS component, the treepanel itself. At its simplest level, you can set un up thus:

首先是ExtJS组件,treepanel本身。在最简单的层次上,您可以这样设置:

    MYtreepanel=new Ext.tree.TreePanel({
        dataUrl: 'sourceofnodestructure.php',
        root: {
            nodeType: 'async',
            id:'root-node'
            }
        }
    });

Taking you through this code, what this does is create the treepanel component at the most basic level (you will need to add additional settings concerning layout, format, etc etc- as per the code in your original post so it fits with your setup), and add only the minimum settings required to work.

带你通过这段代码中,这是创建treepanel组件在最基本的层面上(有关布局,您需要添加额外的设置格式,等等——按照你的原创文章中的代码符合您的设置),并添加所需的最小设置工作。

The root node is set to asynchronous (i.e. when you click it, it will load its children dynamically from an external source), and given the id value 'root-node' (or whatever you wish). This id is important. When understanding the operation of async treepanels, you should note that when a node is expanded, by default a POST request is sent to the panels loader/dataurl (in this case 'sourceofnodestructure.php') containing the id of the node clicked, this id is passed in a variable called 'node'. The server side script then needs to read this (i.e. in php using $_REQUEST['node']) and serve up the respective JSON denoting the childeren for the clicked node.

根节点被设置为异步(例如,当您单击它时,它将从外部源动态加载其子节点),并给出id值'root-node'(或您希望的任何内容)。这个id是很重要的。在理解异步treepanels的操作时,您应该注意到,当扩展一个节点时,默认情况下,一个POST请求被发送给面板加载器/dataurl(在本例中是“sourceofnodestruction .php”),其中包含节点单击的id,这个id在一个名为“node”的变量中传递。然后,服务器端脚本需要读取这个(即在php中使用$_REQUEST['node']),并提供相应的JSON,表示单击节点的childeren。

i.e. (again, in PHP):

例如(再一次,在PHP中):

switch($_REQUEST['node']){
case "root-node":
// output JSON for child nodes under the root node
break;
case "child node 1":
// output JSON for child nodes under the first child node under the root
break;
}
etc etc...

The second part of any treepanel is the node structure. In the above example, this is fed by a server side script- sourceofnodestructure.php. PHP is my preferred way of serving up nodes as it lets me apply my own processing rules and assign additional attributes to nodes in a more flexible way. As I am not sure whether you are using php or not ('http://localhost:9000/application/listFiles'), I wont go into detail regarding it - however, you should go through how your script identifies the clicked node and ensure you remember that the id of the clicked node is sent to the script in the POST variable 'node', you need to trap this and output children as appropriate.

任何treepanel的第二部分都是节点结构。在上面的示例中,这是由一个服务器端脚本——sourceofnodestruction .php提供的。PHP是我提供节点的首选方式,因为它允许我应用自己的处理规则,并以更灵活的方式为节点分配其他属性。因为我不确定你是否使用的是php(http://localhost:9000 /应用程序/ listFiles),我不会去了解关于它的细节问题,但是,你应该通过你的脚本标识点击节点,确保你记住点击节点的id是发送到脚本的变量节点,您需要这和输出的孩子适当的陷阱。

Let me know if you would like an example of the PHP one may use to handle this.

如果您想要一个PHP示例来处理这个问题,请告诉我。


推荐阅读
  • 本文讨论了Kotlin中扩展函数的一些惯用用法以及其合理性。作者认为在某些情况下,定义扩展函数没有意义,但官方的编码约定支持这种方式。文章还介绍了在类之外定义扩展函数的具体用法,并讨论了避免使用扩展函数的边缘情况。作者提出了对于扩展函数的合理性的质疑,并给出了自己的反驳。最后,文章强调了在编写Kotlin代码时可以自由地使用扩展函数的重要性。 ... [详细]
  • 本文介绍了django中视图函数的使用方法,包括如何接收Web请求并返回Web响应,以及如何处理GET请求和POST请求。同时还介绍了urls.py和views.py文件的配置方式。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • 欢乐的票圈重构之旅——RecyclerView的头尾布局增加
    项目重构的Git地址:https:github.comrazerdpFriendCircletreemain-dev项目同步更新的文集:http:www.jianshu.comno ... [详细]
  • Servlet多用户登录时HttpSession会话信息覆盖问题的解决方案
    本文讨论了在Servlet多用户登录时可能出现的HttpSession会话信息覆盖问题,并提供了解决方案。通过分析JSESSIONID的作用机制和编码方式,我们可以得出每个HttpSession对象都是通过客户端发送的唯一JSESSIONID来识别的,因此无需担心会话信息被覆盖的问题。需要注意的是,本文讨论的是多个客户端级别上的多用户登录,而非同一个浏览器级别上的多用户登录。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 微信官方授权及获取OpenId的方法,服务器通过SpringBoot实现
    主要步骤:前端获取到code(wx.login),传入服务器服务器通过参数AppID和AppSecret访问官方接口,获取到OpenId ... [详细]
  • 生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文介绍了在Linux下安装Perl的步骤,并提供了一个简单的Perl程序示例。同时,还展示了运行该程序的结果。 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板
    本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤,包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读,读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ... [详细]
  • 网络请求模块选择——axios框架的基本使用和封装
    本文介绍了选择网络请求模块axios的原因,以及axios框架的基本使用和封装方法。包括发送并发请求的演示,全局配置的设置,创建axios实例的方法,拦截器的使用,以及如何封装和请求响应劫持等内容。 ... [详细]
  • 本文介绍了使用哈夫曼树实现文件压缩和解压的方法。首先对数据结构课程设计中的代码进行了分析,包括使用时间调用、常量定义和统计文件中各个字符时相关的结构体。然后讨论了哈夫曼树的实现原理和算法。最后介绍了文件压缩和解压的具体步骤,包括字符统计、构建哈夫曼树、生成编码表、编码和解码过程。通过实例演示了文件压缩和解压的效果。本文的内容对于理解哈夫曼树的实现原理和应用具有一定的参考价值。 ... [详细]
author-avatar
BLUE1352_126
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有