2011-10-27 22 views
3

私はjsonデータ形式を使用してjsTreeを持っています。 ルートノードセットのロードは問題ありません。"jstree" jqueryプラグインを使用して子ノードとしてjson変数を追加する方法 - no ajax

私の問題は、クリックされた親ノードに子ノードを追加する方法です。

助けていただければ幸いです。

ありがとうございます!

$("#tree-cat1") 
    .bind("open_node.jstree", function (event, data) { 
     console.log(data.rslt.obj.attr("id")); 
     //eval(loadChild()); 
     //at this point i need to append the result of loadChild() to the tree under the relevant node 
    }) 
    .jstree({ 
     "json_data": { 
      "data": eval(loadRoot()) 
     }, 
     "themes": {"theme": "classic","dots": true,"icons": true}, 
     "plugins": ["themes", "json_data", "ui"] 
    }) 

function loadRoot() { 
    return "[{'data':'A node','state':'closed','attr':{'id':'A'}}]"; 
} 
function loadChild() { 
    return "[{'data':'A1 node','attr':{'id':'A1'}}]"; 
} 
+0

あなたは子供たちに、ノードが開かれるたびに追加しますか?なぜツリーの初期化時にアイテムを追加するのに 'children'プロパティを使わないのですか? – Irishka

+0

ノードを展開するたびにOracleのクエリーを実行してデータを取得します(すべてがjavascript内にあります)。データはjs変数に戻されます。私は木の関連ポイントで返されたデータをツリーに入れる必要があります(コードサンプルごと) – lance

答えて

2

はここにドキュメントを参照してください。

<div id="tree-cat1"></div> 
jsTree docu

EDIT

ここでは、コードで、あなたがあなたの目的地へのURLを変更する必要があり、

HTML、それを試してみてください

js:

$("#tree-cat1").jstree({ 
    "plugins": ["themes", "json_data", "ui"], 
    "themes": {"theme": "classic","dots": true,"icons": true}, 
    "json_data": { 
      //root elements 
     "data": [{"data":'A node',"state":'closed',"attr":{"id":'A'}}], 
     "ajax": { 
      "type": 'POST', 
      "data": {"action": 'getChildren'}, 
      "url": function (node) { 
       var nodeId = node.attr('id'); //id="A" 

       return 'yuorPathTo/GetChildrenScript/' + nodeId; 
      }, 
      "success": function (new_data) { 
       //where new_data = node children 
       //e.g.: [{'data':'A1 node','attr':{'id':'A1'}}, {'data':'A2 node','attr':{'id':'A2'}}] 
       return new_data; 
      } 
     } 
    } 
}); 

OLD PART
まだ行っていない場合はそのようなことは、子供を持つノードを開いて移入されます:

... 
    "json_data": { 
      //root elements 
     "data": [{"data":'A node',"state":'closed',"attr":{"id":'group_A'}}], 
     "ajax": { 
      "type": 'POST', 
      "data": {"action": act.GET_GROUPREPORTS}, 
      "url": function (node) { 
       var nid = node.attr('id'); //id="group_A" 
       nid = nid.substr(nid.lastIndexOf('_')+1); 

       return module.getDBdata_path + nid; 
      }, 
      "success": function (data) { 
       var rid, new_data = data; 

       if (typeof data[0] === 'undefined') { 
        new_data = []; 
        for (rid in data) { 
         if(data.hasOwnProperty(rid)) { 
          new_data.push({"data": data[rid], 
           "attr": {"id": 'rprefix_'+rid, 
             "title": ' ', 
             "rel": 'report', 
             "href": module.repView_path+rid 
           } 
          }); 
         } 
        } 
       } 
       return new_data; 
      } 
     } 
    }, ... 
+0

ありがとうございます。アイリッシュカ、しかし私はまだそれを動作させることができません。私はあなたの提案をajaxオブジェクトを使って試しましたが、どこかで何かが欠けています。私の例をあなたのソリューションの基礎として使うことができますか?私たちがこの仕事をしたら、あなたに大きな時間がかかるでしょう! – lance

+0

変更を参照してください、私は答えを編集しました – Irishka

関連する問題