5

私の状況は次のとおりです。PHP と MySQL をバックエンドとして使用し、jQuery と jsTree をフロントエンドとして使用しています。

私のツリーは左側にあり、ノードをクリックすると、ツリーの右側に浮かぶボックスに特定の情報が読み込まれます。この動作で、このツリーのノードを追加/編集/削除できます (ページのリロードなし、すべて Ajax)。

現在、ツリーにノードを正常に追加できます。新しいノードのユーザー入力を取得し、すべてが検証に合格すると (クライアント側が最初、サーバー側が 2 番目)、新しい「ノード」が 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 プラグインを使用)。

$("#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」データをオブジェクト形式で定義する 3 番目のパラメーター (上記のコードでは、"{attr : "id=plant_"+id}") が記載されています。

理想的な解決策は、jsTree + CRRM に渡す適切なオブジェクトですが、「作成」行の後に Javascript の行を追加し、新しく挿入した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>
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 に答える