双jsTree实现 [英] Dual jsTree Implementation

问题描述

我是jsTree的新手，我想使用双jsTree。

I am newbie to jsTree, I want to use dual jsTree.

[左JsTrree] [>>] [右JsTrree]

>>：从左到右复制所选节点的按钮jsTree

">>" : Button for copy selected node from left to right jsTree

我想复制部分从左到右的树层次结构jsTree。

I want to copy partial tree hierarchy from left to right jsTree.

• 没有重复的节点。


• 我不知道想要复制所选节点的子节点


• 只有左边jsTree中的选定节点按照右边的jsTree结构合并到右边的jsTree

如果用户从左侧jsTree选择了任何节点，则在按钮（>>）上单击我想将部分树从选定节点复制到根节点。

If user selected any node from left jsTree then on button(">>") click I want to copy partial tree from selected node to root node.

左jsTree如下

 Root
     -----A
          -----A1
               -----A1.1
               -----A1.2
          -----A2
               -----`A2.1`
               -----A2.2

     -----B
          -----B1
          -----B2

     -----C
          -----C1
               -----C1.1
               -----C2.2

------ -------------------------------------------------- ------------------------------

现在假设用户选择了节点A2.1在按钮（>>）之后点击以下部分树应显示在右侧jsTree

--------------------------------------------------------------------------------------
Now assume user selected node A2.1 then after button(">>") click following partial tree should display in right jsTree

[＃1]右jsTree：

 Root
     -----A
          -----A2
               -----`A2.1` 

现在，在右边的jsTree中添加了根节点，只有选定的节点才能合并进入正确的jsTree。

Now Root node is added in right jsTree now on wards only selected node should merge into right jsTree.

---------------------------- -------------------------------------------------- --------

现在假设用户选择了C1然后只有C1应该合并到右边的jsTree。

Now assume user selected C1 then Only C1 should merge into right jsTree.

[＃2]从左侧jsTree添加C1后的右jsTree结构：

Root
     -----A
          -----A2
               -----A2.1 
     -----C
          -----`C1`

假设用户选择A1然后A1应合并到适当的位置

[＃3]从左侧jsTree添加A1后的右jsTree结构：

Assume user selected A1 then A1 should merge into appropriate place
[#3] Right jsTree structure after A1 added from left jsTree:

Root
     -----A
          -----`A1`
          -----A2
               -----A2.1                   
     -----C
          -----C1

到目前为止我的解决方法如下

My workaround till now is as follows

从左侧选择节点后我正在建设从选定节点到根节点的xml。
并生成存储在cookie中的partial_xml_string。 OnClick（>>）按钮我从cookie +清除partial_xml_string的cookie值读取partial_xml_string的值。
[＃1]案例正确完成。有没有其他好方法来实现[＃1]案例？

after selection of node from left jsTree I am building xml from selected node to root node. and generated partial_xml_string stored into cookie. OnClick of (">>")button I am reading value of partial_xml_string from cookie + clearing cookie value of partial_xml_string. [#1] case done properly. Is there any other good way to achive [#1] case ?

使用.get_path（node，id_mode）我从root获取路径（ID& Name）叶节点

Using .get_path ( node , id_mode ) I am getting path(ID & Name) from root to leaf node

如果id_mode = true则节点 ID = Root.id，A.id，A2.id，A2.1 .id

if id_mode =true then node IDs = Root.id,A.id, A2.id, A2.1.id

如果id_mode = false则节点名称 = 根，A，A2，A2.1

if id_mode =false then node Name's = Root, A, A2, A2.1

是否可以将此路径设置为jsTree的右侧？

如果是，那么如何设置此路径？
如果路径已经存在，那么如何防止复制？ else将所选节点合并到右边的jsTree。

If yes then How to set this path ? If path already exist then how to prevent copying ? else merge selected node to right jsTree.

------------------------ -------------------------------------------------- ------------------

使用.bind（select_node.jstree，函数（事件） ，数据）我们可以处理所选节点上的事件。如何处理 + * 图标的事件on？*

Using .bind("select_node.jstree", function (event, data) we can handle event on selected node. How to handle event onClick of + *icon* ?

考虑我的左侧jsTree只包含一个带有+图标的Root节点，然后如何处理+ icon上的onClick事件？查看墨水的答案

Consider my left jsTree contains only one Root node with + icon then How to handle onClick event on + icon? see ink's answer

我想获取所选节点的子节点如何将子节点列表附加到选定节点？

如何实现[＃2]和[ ＃3]使用jsTree函数？

How to achieve [#2] and [#3] using jsTree functions ?

任何有关此事的帮助或指导都将不胜感激。

Any help or guidance in this matter would be appreciated.

推荐答案

我可以帮助你[+]点击事件。
你必须修改你的jquery.jstree.js（未压缩的版本）。
打开它，找到带有<$的字符串C $ C>切换_node：function（obj）（有一个标签符号，所以搜索 toggle_node ）并在此处添加1行。编辑后必须是：

I can help you with [+] click event. You have to modify your jquery.jstree.js (uncompressed version). Open it, find string with toggle_node : function (obj) (there is a tab symbol so search toggle_node) and add 1 line here. After edit it must be:

        toggle_node : function (obj) {
            obj = this._get_node(obj);
            this.__callback(obj); // these line must be added
            if(obj.hasClass("jstree-closed")) { return this.open_node(obj); }
            if(obj.hasClass("jstree-open")) { return this.close_node(obj);}             
        },

现在你可以像往常一样为 toggle_node 事件绑定一个回调。以下是示例：

Now you can bind a callback as usual for toggle_node event. Here is example:

    $("#your_jstree").bind("toggle_node.jstree", function (e, data) {
        is_opened = $(data.rslt).hasClass('jstree-open') ? false : true;
        node_id = $(data.rslt).attr('id');
        alert('node with id='+node_id+' is '+(is_opened ? 'opening' : 'closing')+' now.');          
    })

在节点打开或关闭之前，这些回调调用。并且在加载树时也不会触发此事件，就像使用 open_node 事件一样。

这篇关于双jsTree实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！