希望你能帮助我解决我遇到的 jsTree 问题......最近才开始使用它,所以仍然找到我的脚。
我在同一页面上使用了两个 jsTrees(左侧的可用对象和右侧的包含对象),中间有几个按钮,可让用户将对象从左侧树移动到右侧树,反之亦然。我没有使用 dnd 插件,也不打算让用户能够在树之间拖放。我的数据结构只有两层深,父母和孩子/多个孩子。
要提到的另一件事是,当我将节点从一棵树移动到另一棵树时,它会从该树中删除并在另一棵树中创建。
那么我遇到的问题是,我可以在左树中选择一个节点(父节点或它的一个子节点),然后我可以在单击按钮后将其移动到右树。如果我选择的节点是父节点,它会移动父节点和所有子节点。如果我选择的节点是唯一的子节点,它会同时移动父节点和子节点。对于这个例子,让我们坚持这个场景。我通过以下方式做到这一点:
//Check to see if the parent exists in the right tree, if it doesn't create it
I've left this function call out for now but can post later if required
//Assuming the parent doesn't exist, create the parent in the right tree
$("#treeInc").jstree("create", null, false, { attr: { id: parent.id }, data: $(parent).children("a").text() }, false, true);
//Create the child in the right tree belonging to the parent node
$("#treeInc").jstree("create", $("#" + parent.id), "inside", { attr: { id: child.id }, data: $(child).children("a").text() }, false, true);
//Remove the parent and child from the left tree
$("#treeAvail").jstree("remove", $('#' + child.id));
$("#treeAvail").jstree("remove", $('#' + parent.id));
现在这一切都很好,但我遇到的问题是,当我尝试将节点移回左树时,父节点似乎总是存在于数据中,即使认为应该被删除。这意味着我实际上并没有调用代码来创建父级,而只是调用了子级,它最终独自徘徊,看不到父级。
所以我的逻辑是首先通过基本上在属于右树的节点中查找父 id 来检查父是否存在。到目前为止,我已经以几种不同的方式完成了此操作,并且每次都失败了。
我已经调用了左树的“get_json”函数来循环遍历节点,但它存在于那里。我循环遍历我最初从中加载左树的数组,但该数组包含初始加载中的所有节点,并且似乎永远不会改变。我尝试使用“delete_node”而不是删除,但这没有区别。
那我做错了什么?如果我从 jsTree 中删除一个节点,就数据而言,我如何检查该树以查看它是否已消失?
请帮忙,它快把我逼疯了!!!
我的实际树数据来自 Web 服务,但对于这个示例,下面的 json 数组就可以了。
availDataCache = [
{ attr: { id: "A_R1" }
, data: "Report 1"
, state: "open"
, children: [{ attr: { id: "A_PSA1" }, data: "Param Set A"}]
}
, { attr: { id: "A_R2" }
, data: "Report 2"
, state: "open"
, children : [
{ attr: { id: "A_PSA2" }, data: "Param Set A" }
,{ attr: { id: "A_PSB1" }, data: "Param Set B" }
]
}
];
$("#treeAvail").jstree({
"json_data": {
"data": availDataCache
},
"core": {
"animation": 0
},
"plugins": ["themes", "json_data", "ui", "core", "crrm"]
});
$("#treeInc").jstree({
"json_data": {
"data": incDataCache
},
"core": {
"animation": 0
},
"plugins": ["themes", "json_data", "ui", "core", "crrm"]
});