CRRM eklentisi ile yeni jsTree HTML düğümünü nasıl oluştururum?

Question

İşte durumum: PHP ve MySQL'i arka ucum, jQuery ve jsTree kullanarak ön uçurum için kullanıyorum.

Ağacı sol tarafta ve bir düğüme tıklandığında ağacın sağında yüzen bir kutuya yüklenecek belirli bilgiler tetiklenir. Bu davranışta bu ağaçta düğümler ekleyebilir/düzenleyebilir/kaldırabilirler (sayfa yeniden yüklemesi, tüm Ajax).

Şu anda ağacına bir düğümü başarıyla ekleyebiliyorum. Yeni düğüm için kullanıcı girdisi alıyorum ve her şey geçerliliğini (istemci tarafı önce, sunucu tarafı ikinci) geçerse, MySQL veritabanına yeni bir "düğüm" eklenir ve jsTree'yi bazı Javascript ile anında güncellerim Ebeveynine yeni bir düğüm ekleyerek (ilk sayfa yüklemesinde, PHP doğru sıralanmamış listeler ve liste öğeleri içeren bir HTML ağacı oluşturur).

Benim basit bir soru: nasıl liste öğesi ("LI") için bir "kimlik" özelliği ile jsTree için yeni bir düğüm ekleyebilirim?

Referans için, HTML ağacımın neye benzediğini burada görebilirsiniz. Bu jsTree teslim edilir ve HTML_DATA eklenti bulunmaktadır:

<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> 

My tıklayarak eylemler

Bir jsTree düğüm eklediğinizde her düğüm Şu anda ("plant_1", "area_3" vs.), sahip olduğu eşsiz kimlikleri üzerinde kilitlenmiştir Ben o (CRRM eklenti aracılığıyla) bu şekilde yaparsak:

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

Herhangi fikirler:

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

#my_tree bu başlatılır? Nesne şeklinde 'çekici bir verilerini tanımlar: ("{id = bitki _ '+ kimlik onun attr'}", yukarıda benim kod) CRRM eklentisi belgeler üçüncü bir parametre bahseder.

İdeal bir çözüm jsTree + CRRM'ye geçmek için uygun nesne olabilir, ancak "el ile" bir kimlik eklediğim "oluşturma" satırımdan sonra ek bir Javascript satırı bulunan saldırıya uğramış bir çözüm bile arardım yeni eklenen LI öğesine.

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

JavaScript nesnenin attr bumu: bu hat ile

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

Answer 1

Yani, sorunun: Referans olarak

, burada jsTree yukarıda benim "oluşturmak" çizgi ile ekler HTML bulunuyor ayrıca bir nesne.

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

Yani yeni bir sayfa vermek için çeşitli özelliklerini belirleyebilir şöyledir: Doğru çizgidir. "Id" özelliği aslında gerekli şeydir LI (liste öğesi), verilir.

jsTree dokümantasyon nitelikleri JS nesneler kendilerini olmalıdır söz yok, fakat nesneler dahil JavaScript sözdizimi, bir sürü aşırı aşina değilim.

Sadece kuşaklar için, burada jsTree HTML'sinde eklenir ne:

<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>