动态地将单击的节点作为加载节点的父节点 - jsTree

Dynamically make a clicked node as a parent of the loaded nodes - jsTree

本文关键字:节点 加载 父节点 jsTree 单击 动态      更新时间:2023-09-26

我是jsTree的新手,我有2个问题。

*解释: *我有许多基于其ID和类型的层次结构的jsTree,并且我正在尝试实现按需加载技术。在页面加载时,我只显示第一个层次结构(根节点),没有子节点。然后,当我单击任何节点时,我会根据其ID和类型检索该特定节点的子节点(JSON格式)。jsTree 在浏览器上成功附加层次结构,但它无法确认单击的节点是加载节点的父节点(从逻辑上讲,我会期望这一点,因为我没有告诉 jsTree 这样做)。所以,现在我的问题来了:-

1) 如何动态地使这个点击的节点成为这些加载节点的父节点?

2.)我必须双击jsTree的节点才能加载相应的子节点。如何只需单击一下即可执行此操作?

提前谢谢。

这是我的代码:

   In the Servlet, I have the following conditional statements:-
           if(type.equals("root"))
           {
            String jsonString = TreeTest.getRoot().getString("data");
            out.write(jsonString);
           }
           else if(type.equals("rig"))
           {
             String jsonString = TreeTest.getSecondHierarchy(Integer.parseInt(id)).getString("data");
             out.write(jsonString);
           }
           else if(type.equals("well"))
           {
             String jsonString = TreeTest.getThirdHierarchy(Integer.parseInt(id)).getString("data");
             out.write(jsonString);  
           }

我每次调用返回的 JSONObject 采用以下形式:

"数据":{ "数据" : "node_name", "attr": {"id": node_id, "type" : "node_type"} }


        Here is my jsTree codes 
          $(document).ready(function(){
              $("#tree").jstree({
                     "themes": {"theme": "classic"},
                     "core" : { 
                            "strings" : { 
                              "loading" : "Loading data..." 
                            } 
                      },
                     "json_data": {

                     "ajax" : {
                      "type": 'GET',
                       "url": "TreeViewServlet",
                       "data": function(n)
                       { 
                        return{ 
                            "id" : n.attr ? n.attr("id") : 0,
                            "type": n.attr? n.attr("type"): "root"
                        };
                       }
                    }
                   },

                "types" : {
                 "types" : {
                    "rig" : {
                        "icon" : {
                            "image" : "./images/Rig.gif"
                        }
                    },
                    "well" : {
                        "icon" : {
                            "image" : "./images/Well.gif"
                        }
                    },
                    "assysystype" : {
                        "icon" : {
                            "image" : "./images/whxt.gif"
                        }
                    },
                    "assy" : {
                        "icon" : {
                            "image" : "./images/Assy.gif"
                        }
                    },
                 "_Drl-WH" : {
                    "icon" : {
                        "image" : "./images/w_icon.gif"
                    }
                },
                 "_Compl-XT" : {
                    "icon" : {
                        "image" : "./images/x_icon.gif"
                    }
                },
                "subAssy" : {
                   "icon" : {
                        "image" : "./images/subass.gif"
                    }
                  }  
                }
              },
               "plugins" : ["themes","json_data","ui", "core", "types"]

            }).delegate(".jstree-open>a", "click.jstree", function(event)
                        {
                          $.jstree._reference(this).close_node(this,false,false);
                        }).delegate(".jstree-closed>a", "click.jstree", function(event)
                        {
                          $.jstree._reference(this).open_node(this,false,false);
                        });
                 });  

我解决了自己的问题,并决定发布一个答案:-

1)我必须获取点击节点的ID并将其发送到Java Servlet,然后Servlet处理请求并返回该节点的所有子节点的JSON字符串,然后使用AJAX,我将子节点追加回树。

2)有一个神奇的密钥,对于每个节点,我添加了 "state" : "closed" ,仅此而已。