मैं सीआरआरएम प्लगइन के साथ एक नया जेएसटी एचटीएमएल नोड कैसे सही तरीके से बना सकता हूं?

Question

यहां मेरी स्थिति है: मेरे बैकएंड के रूप में PHP और MySQL का उपयोग करके, मेरे फ्रंट एंड के लिए jQuery और jsTree।

मेरा पेड़ बाईं ओर है, और नोड पर क्लिक करने से पेड़ के दाईं ओर स्थित एक बॉक्स में कुछ जानकारी लोड हो जाएगी। वे इस पेड़ में नोड्स को इस व्यवहार के साथ जोड़/संपादित/हटा सकते हैं (कोई पेज रीलोड नहीं, सभी अजाक्स)।

वर्तमान में, मैं पेड़ में सफलतापूर्वक नोड जोड़ सकता हूं। मैं नए नोड के लिए उपयोगकर्ता इनपुट लेता हूं, और यदि सब कुछ सत्यापन (क्लाइंट-साइड पहले, सर्वर-साइड सेकेंड) पास करता है, तो मेरे MySQL डेटाबेस में एक नया "नोड" जोड़ा जाता है, और फिर मैं कुछ जावास्क्रिप्ट के साथ फ्लाई पर जेएस ट्री अपडेट करता हूं अपने माता-पिता को एक नया नोड जोड़कर (आरंभिक पृष्ठ लोड पर, PHP सही ढंग से एक HTML पेड़ बनाता है जिसमें अनॉर्डर्ड सूचियों और सूची आइटम होते हैं)।

मेरा सरल प्रश्न: मैं सूची आइटम ("LI") के लिए "आईडी" विशेषता के साथ 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 नोड जोड़ते पर keyed रहे हैं , मैं इसे इस तरह से करना (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 इस के साथ आरंभ नहीं हो जाता? सीआरआरएम प्लगइन दस्तावेज एक तीसरा पैरामीटर का उल्लेख करता है (ऊपर दिए गए मेरे कोड में, यह "{attr:" id = plant _ "+ id}") है जो ऑब्जेक्ट फॉर्म में 'attr' डेटा को परिभाषित करता है।

जेएसटी + सीआरआरएम को पास करने के लिए एक आदर्श समाधान उचित वस्तु होगी, लेकिन मैं एक हैक किए गए समाधान की भी तलाश करूंगा जहां मेरी "निर्माण" लाइन के बाद जावास्क्रिप्ट की एक अतिरिक्त पंक्ति है, जहां मैं "मैन्युअल रूप से" आईडी जोड़ता हूं नए डाले गए एलआई आइटम के लिए।

$("#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 ऊपर मेरी "बनाने" लाइन के साथ सम्मिलित करता है एक वस्तु भी। सही रेखा निम्नानुसार है:

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

तो आप अपना नया पत्ता देने के लिए कई विशेषताओं को निर्धारित कर सकते हैं। "आईडी" विशेषता वास्तव में एलआई (सूची वस्तु) को दी जाती है, जो ठीक वही है जो मुझे चाहिए।

जेएसटी दस्तावेज का उल्लेख है कि गुण जेएस ऑब्जेक्ट्स स्वयं होना चाहिए, लेकिन मैं वस्तुओं सहित कई जावास्क्रिप्ट वाक्यविन्यास से अत्यधिक परिचित नहीं हूं।

बस भावी पीढ़ी के लिए, यहाँ क्या jsTree के एचटीएमएल में जोड़ा जाता है है:

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