Question

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

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

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

我的简单问题：如何使用列表项（“LI”）的“ID”属性向jsTree添加新节点？

供参考，这是我的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插件）：< / p>

$("#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新插入的LI项目。

供参考，这是jsTree在上面的“创建”行中插入的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">&nbsp;</ins>
    <a href="#">
        <ins class="jstree-icon">&nbsp;</ins>
        New Node!
    </a>
</li>

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

1 个答案: