JSON

2011-10-31 16 views
6

का उपयोग कर jsTree प्रारंभ करने में मैं कैसे इस तरह से jsTree बनाने:JSON

$("#myTree").jstree({ 
       "plugins": ["themes", "json_data", "ui", "crrm", "dnd"], 
       "themes": { 
        "theme": "default", 
        "dots": false, 
        "icons": false, 
        "url": "../../Content/jsTreeThemes/default/style.css" 
       }, 
       "json_data": { 
        "data" : [] 
       } 
}); 

और उपयोगकर्ता खाली jsTree साथ पृष्ठ देखता है। जब उपयोगकर्ता कुछ कार्रवाई करता है तो मुझे अपना जेएसटी शुरू करना होगा। लेकिन मैं AJAX प्रारंभिकरण का उपयोग नहीं करता (मैं "json_data" में "AJAX" का उपयोग नहीं करता)। कोई फर्क नहीं पड़ता कि कैसे मैं इस स्ट्रिंग प्राप्त करते हैं, जब उपयोगकर्ता पेड़ मैं पहले से ही इस स्ट्रिंग लिया है देखना चाहता है

var stringJSON = [{ 
    "attr": { 
     "id": "1", 
     "rel": "root", 
     "mdata": null 
    }, 
    "data": "title": "root_jsTree", 
    "icon": null 
}, "state": "open", 
"children": [{ 
    "attr": { 
     "id": "7", 
     "rel": "folder", 
     "mdata": null 
    }, 
    "data": { 
     "title": "1", 
     "icon": null 
    }, 
    "state": "", 
    "children": [{ 
     "attr": { 
      "id": "10", 
      "rel": "folder", 
      "mdata": null 
     }, 
     "data": { 
      "title": "leaf", 
      "icon": null 
     }, 
     "state": "", 
     "children": [] 
    }] 
}, { 
    "attr": { 
     "id": "8", 
     "rel": "folder", 
     "mdata": null 
    }, 
    "data": { 
     "title": "leaf", 
     "icon": null 
    }, 
    "state": "", 
    "children": [{ 
     "attr": { 
      "id": "9", 
      "rel": "folder", 
      "mdata": null 
     }, 
     "data": { 
      "title": "leaf", 
      "icon": null 
     }, 
     "state": "", 
     "children": [] 
    }] 
}] 
}]' 

: मैं अपने jsTree इस तरह केवल स्ट्रिंग का उपयोग प्रारंभ करना होगा। और यहां मुझे प्रश्न मिलता है: मैं jsTree कैसे प्रारंभ कर सकता हूं और इसे केवल स्ट्रिंग का उपयोग करके उपयोगकर्ता के लिए प्रदर्शित कर सकता हूं।

उत्तर

5

शायद आप ऐसा कुछ चाहते हैं? http://jsfiddle.net/radek/fmn6g/11/

  • जहां मैं एक बटन क्लिक पर jsTree डालता हूं।
  • क्लिक फ़ंक्शन पर जावास्क्रिप्ट 'jstree' div प्रविष्ट करता है और इसमें jsTree परिभाषा भी शामिल है।
  • जैसा कि आप देख सकते हैं कि मैं जेसन डेटा प्रकार का भी उपयोग करता हूं। मेरे सवाल का display jsTree on click

    में

और जानकारी है कि आप के बाद क्या कर रहे हैं है?

var jsTreeSettings = $("#myTree").jstree("get_settings"); 
jsTreeSettings.json_data.data = $.parseJSON(stringJSON); 
$.jstree._reference("myTree")._set_settings(jsTreeSettings); 

// Refresh whole our tree (-1 means root of tree) 
$.jstree._reference("myTree").refresh(-1); 

यह समाधान भले ही हम से पहले लोड हो रहा है मॉडल के लिए AJAX की स्थापना के लिए काम करेंगे:

5

यहाँ मेरी समाधान है।

प्रलेखन से:

दोनों डेटा और ajax प्रारंभिक पेड़ सेट हैं, तो डेटा स्ट्रिंग से प्रदान की गई है। एक बंद नोड खोलने पर (जिसमें कोई लोड नहीं हुआ बच्चा है) एक AJAX अनुरोध किया जाता है।

और जानकारी यहां है http://www.jstree.com/documentation/json_data

मैं इस समाधान का उपयोग करने के क्योंकि मैं stringJSON कई बार बदल सकते हैं और इस बदली हुई स्ट्रिंग का उपयोग (पुन: लोड पृष्ठ के बिना) पेड़ के पुनर्निर्माण करना होगा फैसला किया।