5

这是我的情况：使用 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 插入的 HTML，上面有我的“create”行：

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

1 回答 1

8

所以，这一行的问题：

$("#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>
于 2010-07-06T17:36:39.320 回答