双jsTree实现

Posted 2023-02-22

【中文标题】双jsTree实现

【英文标题】：Dual jsTree Implementation

【发布时间】：2012-04-30 16:19:49

【问题描述】：

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

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

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

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

节点不重复。 我不想复制选定节点的子节点 根据右侧 jsTree 结构，仅从左侧 jsTree 中选择的节点合并到右侧 jsTree 中

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

左jsTree如下 "

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

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

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

------------------------------------------ ------------------------------------------ 现在假设用户选择了节点 A2.1，然后在 button(">>") 单击之后，下面的部分树应该显示在右侧的 jsTree 中

[#1] 右jsTree：

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

现在根节点已添加到右侧 jsTree 中，现在仅选定的节点应合并到右侧 jsTree。

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

现在假设用户选择了 C1，那么只有 C1 应该合并到正确的 jsTree 中。

[#2]左侧jsTree添加C1后右侧jsTree结构：

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

假设用户选择了 A1，那么 A1 应该合并到适当的位置[#3] 从左侧 jsTree 添加 A1 后的右侧 jsTree 结构：

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

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

从左侧 jsTree 选择节点后，我正在构建从选定节点到根节点的 xml。 并将生成的 partial_xml_string 存储到 cookie 中。 OnClick of (">>") 按钮我正在从 cookie 中读取 partial_xml_string 的值 + 清除 partial_xml_string 的 cookie 值。 [#1] 案例处理得当。有没有其他好的方法来实现 [#1] 案例？

使用 .get_path ( node , id_mode ) 我正在获取从根到叶节点的路径（ID 和名称）

如果 id_mode =true 那么节点 IDs = Root.id,A.id, A2.id, A2.1.id

如果 id_mode =false 则节点 Name's = Root, A, A2, A2.1

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

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

------------------------------------------ ------------------------------------------------强>

使用 .bind("select_node.jstree", function (event, data) 可以处理选中节点上的事件。+的onClick事件如何处理 *icon * ?

考虑我左边的 jsTree 只包含一个带有 + 图标的根节点，那么如何处理 + 图标上的 onClick 事件？ 查看 ink 的回答

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

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

在此问题上的任何帮助或指导将不胜感激。

【问题讨论】：

我解决了这个问题，将在这里更新答案:)

【参考方案1】：

我可以帮助您处理 [+] 点击事件。 您必须修改 jquery.jstree.js（未压缩版本）。 打开它，找到带有toggle_node : function (obj) 的字符串（有一个tab 符号所以搜索toggle_node）并在此处添加1 行。编辑后必须是：

        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 事件绑定回调。这是一个例子：

    $("#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.');          
    )

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

【讨论】：

感谢您的回复。 [+] 根据您的回答，点击事件正常工作