如何使用jQuery生成基於輸入JSON的樹？

首先，我必須通過嵌套列表填充數據。如何使用jQuery生成基於輸入JSON的樹？

其次必須編寫一個CSS，用於添加可展開，可摺疊和文件夾的圖像，最後點擊生成鏈接。它應該顯示完整的展開樹。

 var dataSource = ({ 
      "Items": ({ 
      "Deserts": ({}), 
      "Veg": ({ 
       "VegPulao": "Veg Pulao", 
       "PalakPaneer": "Palak Paneer", 
       "PaneerButterMasala": "Paneer Butter Masala" 
      }), 

      "Chicken": ({ 
       "Tandoori": "Tandoori special" 
      }), 
      "Hot drinks": ({ 
       "Coffe": ({ "Hot": "Hot Coffe", "Medium": "Medium", "Others": ({ "Iris": "Iris Coffe", "Capuccino": "Capuccino" }) }), 
       "Tea": ({"Red": "Red Tea", "Black": "Black Tea"}), 
       "BadamMilk": "Hot Badam Milk", 
       "Bornvita": "Hot Bornvita", 
       "Milk": "Hot Milk" 
      }), 
      "Juice": ({ 
       "Mango": "Mango", 
       "Berry": "Berry", 
       "Grapes": "Grapes", 
       "Wine": ({ 
        "Rose": "Rose", 
        "Red wine": "Red", 
        "Apple": "Apple", 
        "Hard drinks": ({ 
         "Royal challenge": "Royal challenge", 
         "Blender's Pride": "Blender's Pride" 
        }) 
       }) 
      }) 

     }) 
    });

HTML代碼

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Tree Menu</title> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="css/style.css" type="text/css"> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/scripts.js"></script> 
</head> 
<body> 
<a href="" id="mylink" style="font-family:Arial; color:blue; margin:100px;">Generate Sorted List</a><br><br> 
<div class="style"></div> 
</body> 
</html>

CSS代碼：

.style{ 
border:1px solid #A3A3C2; 
width:425px; 
height:500px; 
float:left; 
overflow: scroll; 
} 
#expList .collapsed { 
    list-style-image: url(../img/plusFolder.jpg); 
} 
#expList.expanded { 
list-style-image: url(../img/minusFolder.jpg); 
} 
#expList.folder { 
list-style-image: url(../img/Folder.jpg); 
}

來源

2015-11-02 Madhura Indrazith

爲什麼你周圍的JSON對象，這些括號？你並不需要它們，實際上...... –

Ya不需要json對象周圍的括號。 –

Using AJAX 
 

 
You can also use AJAX to populate the tree with JSON your server returns. The format remains the same as the above, the only difference is that the JSON is not inside the config object, but returned from the server. 
 

 
To take advantage of this option you need to use the $.jstree.defaults.core.data config option. 
 

 
Just use a standard jQuery-like AJAX config and jstree will automatically make an AJAX request populate the tree with the response. 
 

 
In addition to the standard jQuery ajax options here you can supply functions for data and url, the functions will be run in the current instance's scope and a param will be passed indicating which node is being loaded, the return value of those functions will be used as URL and data respectively. 
 

 
If you do not return correct json headers from the server, at least set the dataType jQuery AJAX option to "json". 
 

 
By Uisng AJAX: 
 

 
('#tree').jstree({ 
 
'core' : { 
 
    'data' : { 
 
    'url' : function (node) { 
 
     return node.id === '#' ? 
 
     'ajax_roots.json' : 
 
     'ajax_children.json'; 
 
    }, 
 
    'data' : function (node) { 
 
     return { 'id' : node.id }; 
 
    } 
 
    } 
 
});

/ Alternative format of the node (id & parent are required) 
 
{ 
 
    id   : "string" // required 
 
    parent  : "string" // required 
 
    text  : "string" // node text 
 
    icon  : "string" // string for custom 
 
    state  : { 
 
    opened : boolean // is the node open 
 
    disabled : boolean // is the node disabled 
 
    selected : boolean // is the node selected 
 
    }, 
 
    li_attr  : {} // attributes for the generated LI node 
 
    a_attr  : {} // attributes for the generated A node 
 
}

使用JSON：要Popul用一個JSON對象吃樹，你需要使用$ .jstree.defaults.core.data配置選項。

$('#using_json').jstree({ 'core' : { 
 
    'data' : [ 
 
     'Simple root node', 
 
     { 
 
     'text' : 'Root node 2', 
 
     'state' : { 
 
      'opened' : true, 
 
      'selected' : true 
 
     }, 
 
     'children' : [ 
 
      { 'text' : 'Child 1' }, 
 
      'Child 2' 
 
     ] 
 
     } 
 
    ] 
 
} });

來源

2015-11-02 05:08:19 AnilkumarTanneer

Using AJAX 
 

 
You can also use AJAX to populate the tree with JSON your server returns. The format remains the same as the above, the only difference is that the JSON is not inside the config object, but returned from the server. 
 

 
To take advantage of this option you need to use the $.jstree.defaults.core.data config option. 
 

 
Just use a standard jQuery-like AJAX config and jstree will automatically make an AJAX request populate the tree with the response. 
 

 
In addition to the standard jQuery ajax options here you can supply functions for data and url, the functions will be run in the current instance's scope and a param will be passed indicating which node is being loaded, the return value of those functions will be used as URL and data respectively. 
 

 
If you do not return correct json headers from the server, at least set the dataType jQuery AJAX option to "json". 
 

 
By Uisng AJAX: 
 

 
('#tree').jstree({ 
 
'core' : { 
 
    'data' : { 
 
    'url' : function (node) { 
 
     return node.id === '#' ? 
 
     'ajax_roots.json' : 
 
     'ajax_children.json'; 
 
    }, 
 
    'data' : function (node) { 
 
     return { 'id' : node.id }; 
 
    } 
 
    } 
 
});

/ Alternative format of the node (id & parent are required) 
 
{ 
 
    id   : "string" // required 
 
    parent  : "string" // required 
 
    text  : "string" // node text 
 
    icon  : "string" // string for custom 
 
    state  : { 
 
    opened : boolean // is the node open 
 
    disabled : boolean // is the node disabled 
 
    selected : boolean // is the node selected 
 
    }, 
 
    li_attr  : {} // attributes for the generated LI node 
 
    a_attr  : {} // attributes for the generated A node 
 
}

使用JSON：不同，需要使用 $ .jstree.defaults.core.data配置JSON對象填充樹選項。

$('#using_json').jstree({ 'core' : { 
 
    'data' : [ 
 
     'Simple root node', 
 
     { 
 
     'text' : 'Root node 2', 
 
     'state' : { 
 
      'opened' : true, 
 
      'selected' : true 
 
     }, 
 
     'children' : [ 
 
      { 'text' : 'Child 1' }, 
 
      'Child 2' 
 
     ] 
 
     } 
 
    ] 
 
} });

Using functions: 
 
You can supply a function too. That function will receive two arguments - the node being loaded and a callback function to call with the children for that node once you are ready. 
 

 

 

 
$('#tree').jstree({ 
 
    'core' : { 
 
     'data' : function (obj, cb) { 
 
      cb.call(this, 
 
       ['Root 1', 'Root 2']); 
 
     } 
 
    }}); 
 
\t \t

來源

2015-11-02 05:13:36 AnilkumarTanneer

如何使用jQuery生成基於輸入JSON的樹？

回答

相關問題