CRRM 플러그인을 사용하여 새 jsTree HTML 노드를 올바르게 작성하는 방법은 무엇입니까?

Question

여기 제 상황이 있습니다 : PHP와 MySQL을 백엔드, jQuery, jsTree로 사용합니다.

내 트리가 왼쪽에 있으며 노드를 클릭하면 특정 정보가 트리의 오른쪽에 떠있는 상자에로드됩니다. 그들은이 행동 (페이지가 다시로드되지 않고 모든 Ajax)으로이 트리에서 노드를 추가/편집/제거 할 수 있습니다.

현재 노드에 노드를 추가 할 수 있습니다. 나는 새로운 노드에 대한 사용자 입력을받으며, 모든 것이 유효성 검사를 통과하면 (클라이언트 쪽에서 서버 쪽), 새로운 "노드"가 MySQL 데이터베이스에 추가 된 다음 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> 

내 클릭 행동

가 나는 jsTree 노드를 추가 할 때 각 노드가 현재 ("plant_1", "area_3"등)을, 가지고있는 고유 ID의에 맞도록 제작되어 있습니다 , 나는 그것을합니다 (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'데이터를 정의하는 세 번째 매개 변수 (위 코드의 "{attr :"id = plant _ "+ id}")가 나와 있습니다.

이상적인 솔루션은 jsTree + CRRM에 전달하는 적절한 객체이지만, "수동으로"ID를 추가하는 "create"라인 다음에 Javascript의 추가 라인이있는 해킹 된 솔루션도 찾습니다. 새로 삽입 된 LI 항목에 추가합니다.

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

는 자바 스크립트 객체의 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

그래서, 문제 : 참고로

, 여기 jsTree 위에서 내 "작성"줄을 삽입하는 HTML의 또한 대상. 올바른 줄은 다음과 같습니다.

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

따라서 새 잎을 제공하기 위해 여러 가지 특성을 결정할 수 있습니다. "id"속성은 실제로 LI (목록 항목)에 주어 지므로 정확히 필요한 것입니다.

jsTree 설명서에는 속성 자체가 JS 객체 여야한다고 나와 있지만 객체를 비롯한 많은 자바 스크립트 구문에 지나치게 익숙하지 않습니다.

그냥 후손을 위해, 여기에 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>