JSON

2011-10-31 5 views
6

を使用してjsTreeを初期化するために、どのように私はこの方法でjsTreeを作ります。私はjsTreeを初期化する必要があります。しかし、私は、ajaxの初期化を使用していません(私は "json_data"で "ajax"を使用していません)。どんなに私は、ユーザーが、私はすでに、この文字列を持っていた木を見たい、この文字列を、受信方法JSON

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を挿入します。
  • click functionのjavascriptは 'jstree' divを挿入し、jsTreeの定義も含んでいます。
  • ご覧のとおり、jsonデータタイプも使用しています。私の質問display jsTree on click

詳細情報は、あなたが後に何をしているということですか?ここで

5

は私のソリューションです:

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を設定しても動作します。ドキュメントから

データとAjaxの両方が初期のツリーを設定している場合は、データ列からレンダリングされます。 閉じたノード(読み込まれた子がない)を開くと、AJAX要求が行われます。

詳しい情報は、私がstringJSON数回変更し、(ページをリロードせずに)、この変更された文字列を使用してツリーを再構築する必要がありますので、私はこのソリューションを使用することを決定し、ここでhttp://www.jstree.com/documentation/json_data

です。