我是jsTree的新手,我想使用dual 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,然后在按钮(“>>”)单击之后,下面的部分树应该显示在右侧的 jsTree 中
[#1] 右 jsTree:
Root
-----A
-----A2
-----`A2.1`
现在 Root 节点被添加到右侧的 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 中。单击(“>>”)按钮我正在从 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 的右侧?
如果是那么如何设置这个路径? 如果路径已经存在那么如何防止复制?否则将选定的节点合并到右侧的 jsTree。
-------------------------------------------- ----------------------------------------------强>
使用 .bind("select_node.jstree", function (event, data) 我们可以处理选定节点上的事件。如何处理 + *icon 的 onClick 事件* ?
考虑我左边的 jsTree 只包含一个带有 + 图标的根节点,那么如何处理 + 图标上的 onClick 事件? 看墨水的回答
我想获取所选节点的子节点如何将子节点列表附加到所选节点?
如何使用jsTree函数实现[#2]和[#3]?
如有任何帮助或指导,我们将不胜感激。
最佳答案
我可以帮助您处理 [+] 点击事件。
您必须修改您的 jquery.jstree.js(未压缩版本)。
打开它,找到带有 toggle_node : function (obj)
的字符串(有一个制表符,所以搜索 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
事件绑定(bind)回调。这是示例:
$("#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
事件一样。
关于javascript - 双 jsTree 实现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10223212/