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

Question

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

我的树位于左侧，单击节点将触发某些信息加载到浮动到树右侧的框中。他们可以通过此行为添加/编辑/删除此树中的节点（无需重新加载页面，所有 Ajax）。

目前，我可以成功地将节点添加到树中。我接受新节点的用户输入，如果一切都通过验证（首先是客户端，其次是服务器端），则会将一个新的“节点”添加到我的 MySQL 数据库中，然后我使用一些 Javascript 动态更新 jsTree通过向其父节点添加新节点（在初始页面加载时，PHP 正确构建具有无序列表和列表项的 HTML 树）。

我的简单问题：如何向 jsTree 添加一个具有列表项（“LI”）的“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("create", null, false, name, {attr : "id=plant_"+id}, true);

#my_tree 是这样初始化的：

$("#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"]
    });

有什么想法吗？ CRRM 插件文档提到了第三个参数（在我上面的代码中，它的“{attr：”id=plant_“+id}”）以对象形式定义“attr”数据。

理想的解决方案是传递给 jsTree+CRRM 的正确对象，但我什至会寻找一种破解的解决方案，其中在“创建”行之后添加一行 Javascript，其中我“手动”向新插入的对象添加一个 ID李项。

作为参考，下面是 jsTree 通过上面的“create”行插入的 HTML：

<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
}, true);

是：Javascript 对象的 attr 也是一个对象。正确的行如下：

$("#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"> </ins>
    <a href="#">
        <ins class="jstree-icon"> </ins>
        New Node!
    </a>
</li>