如何使用CRRM插件正确创建新的jsTree HTML节点？

Question

这是我的情况：使用PHP和MySQL作为我的后端，我的前端使用jQuery和jsTree。

我的树在左边，点击一个节点会触发某些信息加载到树右侧的一个框中。他们可以使用这种行为添加/编辑/删除此树中的节点（无需重新加载页面，所有Ajax）。

目前，我可以成功地将一个节点添加到树中。我为新节点提供用户输入，如果所有事情都通过了验证（客户端第一，服务器端第二），则将新的“节点”添加到我的MySQL数据库中，然后使用一些Javascript更新jsTree通过向它的父节点添加一个新节点（在初始页面加载时，PHP使用无序列表和列表项正确地构建了一个HTML树）。

我的简单问题：我如何添加一个新的节点到jsTree的列表项（“李”）的“ID”属性？

仅供参考，这里是我的HTML树的外观。这是交给jsTree，它的HTML_DATA插件：

<ul> 
    <li class="plant" id="plant_3"><a href="javascript:void();">Plant Three</a> 
    </li> 
    <li class="plant" id="plant_1"><a href="javascript:void();">Plant One</a> 
    <ul> 
      <li class="area" id="area_2"><a href="javascript:void();">Area Two</a> 
     </li> 
      <li class="area" id="area_1"><a href="javascript:void();">Area One</a> 
    <ul> 
      <li class="building" id="building_1"><a href="javascript:void();">Building One</a> 
     <ul> 
       <li class="floor" id="floor_2"><a href="javascript:void();">1st Floor</a> 
      </li> 
       <li class="floor" id="floor_3"><a href="javascript:void();">2nd Floor</a> 
      </li> 
       <li class="floor" id="floor_1"><a href="javascript:void();">Ground Floor</a> 
      </li> 
      </ul> 
     </li> 
     </ul> 
     </li> 
     </ul> 
    </li> 
</ul> 

我的点击动作上的唯一ID的每个节点都有（“plant_1”，“area_3”等）目前，当我加入jsTree节点是有方向性的，我做这种方式（通过CRRM插件）：

$("#my_tree").jstree({ 
"ui" : { 
    "select_limit" : 1, 
    "selected_parent_close" : "select_parent" 
}, 
"html_data" : { 
    "ajax" : { 
    "url" : "file.php?action=get_my_tree", 
    "data" : function (n) { 
     return { 
    id : n.attr ? n.attr("id"): 0 
    }; 
    } 
    } 
}, 
"core" : { 
    "animation" : 0 
}, 
"plugins": [ "ui", "themes", "html_data", "hotkeys", "crrm"] 
    }); 

任何想法：

$("#my_tree").jstree("create", null, false, name, {attr : "id=plant_"+id}, true); 

#my_tree用它来初始化？ CRRM插件文档提到了第三个参数（在我上面的代码中，它是“{attr：”id = plant _“+ id}”），它以对象形式定义'attr'数据。

一个理想的解决方案是将适当的对象传递给jsTree + CRRM，但我会寻找甚至是一个被黑客入侵的解决方案，在我的“创建”行之后添加一行额外的Javascript行，我“手动”添加一个ID到新插入的LI项目。

仅供参考，下面是jsTree与我的 “创造” 行插入上面的HTML：

$("#my_tree").jstree("create", null, false, name, { 
    attr : "id=plant_" + id 
}, true); 

是JavaScript对象的attr为：

<li class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>New Node!</a></li> 

Answer 1

所以，用这条线的问题也是一个对象。正确的行如下：

$("#my_tree").jstree("create", null, false, name, { 
    attr : { 
     id: 'plant_' + id 
    }, 
    data: name 
}, true); 

因此，你可以确定几个属性给你的新叶。 “id”属性实际上是给了LI（列表项），这正是我所需要的。

jsTree文档确实提到这些属性应该是JS对象本身，但我并不太熟悉很多Javascript语法，包括对象。

只是为了后人，这里就是被添加到jsTree的HTML：

<li id="plant_x" class="jstree-leaf"> 
    <ins class="jstree-icon">&nbsp;</ins> 
    <a href="#"> 
     <ins class="jstree-icon">&nbsp;</ins> 
     New Node! 
    </a> 
</li>