JSONデータ

Question

http://jsfiddle.net/2kwkh2uL/5498/

これは私がしようとしているサンプルコードでは、JavaScriptの関数呼び出しにjsTreeを構築するが、何らかの理由でそれをやっていません。

通常ロードすると問題なくツリーが構築されます。 誰でも私に間違っていることを教えてもらえますか？

function build_tree(tree_data) { 
 
    $('#container').jstree({ 
 
    'core': { 
 
     'data': tree_data 
 
    } 
 
    }); 
 
} 
 

 

 
$("#gen_tree").click(function() { 
 
    var tree_data = "[{ 'id' : 'cases_root', 'parent' : '#', 'text' : 'Cases [0,1,2]', 'case_id' : '0' },{ 'id' : 'my_cases', 'parent' : 'cases_root', 'text' : 'My Cases', 'case_id' : '0' },{ 'id' : 'active', 'parent' : 'my_cases', 'text' : 'active [0,1,2]', 'case_id' : '0' },{ 'id' : '2', 'parent' : 'active', 'text' : 'AXA Investment Managers [0,1,0]', 'case_id' : '0' },{ 'id' : '107157', 'parent' : '2', 'text' : 'Miani, Antonio [13]', 'case_id' : '107157' },{ 'id' : '98', 'parent' : 'active', 'text' : 'Graff Diamonds [0,0,1]', 'case_id' : '0' },{ 'id' : '106560', 'parent' : '98', 'text' : 'HEE JIN, Gong [18]', 'case_id' : '106560' },{ 'id' : '84', 'parent' : 'active', 'text' : 'Optiver Services BV [0,0,1]', 'case_id' : '0' },{ 'id' : '106608', 'parent' : '84', 'text' : 'SAVILUOTO, Antti [24]', 'case_id' : '106608' },]"; 
 
    build_tree(tree_data); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css" rel="stylesheet" /> 
 
<script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script> 
 

 
<div id="container"></div> 
 
<input id='gen_tree' type='button' value='Generate Tree' />

Answer 1

あなたは文字列としてdataを与えているので、あなたの問題がある、しかし、それは有効なJSONではありません、ひいてはjsTreeライブラリによって直列化復元することはできません。

問題を解決するには、JSON形式を修正するか、さらに簡単にデータをオブジェクトとして指定します。これを試してみてください：

function build_tree(tree_data) { 
 
    $('#container').jstree({ 
 
    'core': { 
 
     'data': tree_data 
 
    } 
 
    }); 
 
} 
 

 
$("#gen_tree").click(function() { 
 
    var tree_data = [{ 
 
    'id': 'cases_root', 
 
    'parent': '#', 
 
    'text': 'Cases [0,1,2]', 
 
    'case_id': '0' 
 
    }, { 
 
    'id': 'my_cases', 
 
    'parent': 'cases_root', 
 
    'text': 'My Cases', 
 
    'case_id': '0' 
 
    }, { 
 
    'id': 'active', 
 
    'parent': 'my_cases', 
 
    'text': 'active [0,1,2]', 
 
    'case_id': '0' 
 
    }, { 
 
    'id': '2', 
 
    'parent': 'active', 
 
    'text': 'AXA Investment Managers [0,1,0]', 
 
    'case_id': '0' 
 
    }, { 
 
    'id': '107157', 
 
    'parent': '2', 
 
    'text': 'Miani, Antonio [13]', 
 
    'case_id': '107157' 
 
    }, { 
 
    'id': '98', 
 
    'parent': 'active', 
 
    'text': 'Graff Diamonds [0,0,1]', 
 
    'case_id': '0' 
 
    }, { 
 
    'id': '106560', 
 
    'parent': '98', 
 
    'text': 'HEE JIN, Gong [18]', 
 
    'case_id': '106560' 
 
    }, { 
 
    'id': '84', 
 
    'parent': 'active', 
 
    'text': 'Optiver Services BV [0,0,1]', 
 
    'case_id': '0' 
 
    }, { 
 
    'id': '106608', 
 
    'parent': '84', 
 
    'text': 'SAVILUOTO, Antti [24]', 
 
    'case_id': '106608' 
 
    }]; 
 
    build_tree(tree_data); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css" rel="stylesheet" /> 
 
<script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script> 
 

 
<div id="container"></div> 
 
<input id='gen_tree' type='button' value='Generate Tree' />