2. 程式人生 > >js將json轉成樹html

js將json轉成樹html

阿新 • • 發佈：2019-01-19
var  treeJson = [{
    "name": "1級選單A",
    "link": "###",
    "isleaf": false,
    "level": 0,
    "children": [
        {
            "name": "2級選單A",
            "link": "###",
            "isleaf": false,
            "level": 1,
            "children": [
                {
                    "name": "3級選單A1",
                    "link": "###",
                    "isleaf": true,
                    "level": 2,
                    "children": null
                },
                {
                    "name": "3級選單A2",
                    "link": "###",
                    "isleaf": true,
                    "level": 2,
                    "children": null
                }
            ]
        },
        {
            "name": "2級選單2",
            "link": "###",
            "isleaf": false,
            "level": 1,
            "children": [
                {
                    "name": "3級選單3",
                    "link": "###",
                    "isleaf": true,
                    "level": 2,
                    "children": null
                }
            ]
        }
    ]
},
{
    "name": "1級選單B",
    "link": "###",
    "isleaf": false,
    "level": 0,
    "children": [
        {
            "name": "2級選單B",
            "link": "###",
            "isleaf": false,
            "level": 1,
            "children": [
                {
                    "name": "3級選單B1",
                    "link": "###",
                    "isleaf": true,
                    "level": 2,
                    "children": null
                },
                {
                    "name": "3級選單B2",
                    "link": "###",
                    "isleaf": true,
                    "level": 2,
                    "children": null
                }
            ]
        },
        {
            "name": "2級選單2",
            "link": "###",
            "isleaf": false,
            "level": 1,
            "children": [
                {
                    "name": "3級選單3",
                    "link": "###",
                    "isleaf": true,
                    "level": 2,
                    "children": null
                }
            ]
        }
    ]

}];

var makeTree = function(parentObj,treeJson){
var ulObj = $("<ul></ul>");
for(var i=0; i<treeJson.length;i++){
var childHtml ="<li>";
var aHtml = "<a href="+treeJson[i].link+">"+treeJson[i].name+"</a>"

childHtml+=aHtml;
childHtml+="</li>";
var childObj = $(childHtml);
if(treeJson[i].children != null && treeJson[i].children.length>0){
makeTree(childObj,treeJson[i].children);
}
$(ulObj).append(childObj);
}




$(parentObj).append($(ulObj));
};


var parentObj = $("#treediv");
makeTree($(parentObj),treeJson);

jsp： 
<body>
<div id="treediv">

</div>
</body>

最後的效果：

<html>
 <head></head>
 <body>
  <div id="treediv"> 
   <ul> 
    <li><a href="###">1級選單A</a>
     <ul>
      <li><a href="###">2級選單A</a>
       <ul>
        <li><a href="###">3級選單A1</a></li>
        <li><a href="###">3級選單A2</a></li>
       </ul></li>
      <li><a href="###">2級選單2</a>
       <ul>
        <li><a href="###">3級選單3</a></li>
       </ul></li>
     </ul></li>
    <li><a href="###">1級選單B</a>
     <ul>
      <li><a href="###">2級選單B</a>
       <ul>
        <li><a href="###">3級選單B1</a></li>
        <li><a href="###">3級選單B2</a></li>
       </ul></li>
      <li><a href="###">2級選單2</a>
       <ul>
        <li><a href="###">3級選單3</a></li>
       </ul></li>
     </ul></li>
   </ul>
  </div>
 </body>
</html>


相關推薦

js將json轉成樹html

var  treeJson = [{     "name": "1級選單A",     "link": "###",     "isleaf": false,     "level": 0,     "children": [         {             "

js將json自動轉html表格例項

Js自動將json格式轉成html table形式展現，做下筆記 截圖如下： html程式碼： <html> <head> <title></title> <script type="text/javascrip

js將json數組轉成tree對象

子節點 數據 In 代碼 pan 原理 each 今天 ole 昨天遇到一道面試題，手寫js將json數組轉成tree對象，昨天寫錯了，今天特意想了下，思路其實挺簡單，循環+遞歸，獲取子節點對象。 1 let data = [ 2 {‘parent_id‘: 0,

js 將json資料自動繫結到 html table 表格中

/*自動繫結到table*/ var f = new Function("+[{id:"1",name:"aa"},{id:"2",name:"bb"}]+"); var list = f(); var h= "<table id='tb'>"; h+= "&l

js將物件轉成json格式

/** * 序列化成json字串 * @param obj * @return */ function Serialize(obj){ switch(obj.construc

問題集錄--jquery將json轉excel保持

ros ring com display idl != html nco move 代碼如下： <html> <head> <meta http-equiv="content-type" content="text/html;

js 將json字符串轉換為json對象的方法解析

val 一個 例如 str1 其他 全局 man 找不到 json字符串 例如： JSON字符串:var str1 = ‘{ "name": "cxh", "sex": "man" }‘; JSON對象:var str2 = { "name": "cxh", "sex":

ObjectMapper將json轉對象報錯處理

exc ctu 構造 struct test col bject spa 解決辦法 在使用ObjectMapper將json轉對象，調用mapper.readValue(jsonStr, XwjUser.class)時，報如下錯： com.fasterxml.jackso

java將Excel轉化為Html

view mas pub str ali alt inpu hashmap align 　　之前在做移動端頁面的時候，發現iphone不支持預覽excel文檔，於是將excel轉化為html元素然後查看其中的具體信息，在這裏整理下文檔，以便於記憶避免踩坑。 　　1. 引入相

react標籤屬性dangerouslySetInnerHTML將字串轉化為html（動態渲染）

根據需求，前端頁面有時需要動態展示後端返回的程式碼，但是此時的程式碼是字串型別，直接展示，頁面顯示的只是字串，這時就用到了react標籤屬性dangerouslySetInnerHtml屬性； dangerouslySetInnerHtml用法： dangerouslySetInnerH

POI將word轉化為html

參考資料 1.POI包依賴：https://poi.apache.org/components/index.html 2.包版本問題：https://bbs.csdn.net/topics/392208805 並沒有使用其中的3.9的版本，使用的為3.13 最開始使用的

js 將json字串轉換為json物件的方法解析（簡單處理JSON語法格式校驗問題）

js 將json字串轉換為json物件的方法解析 將json字串轉換為json物件的方法。在資料傳輸過程中，json是以文字，即字串的形式傳遞的，而JS操作的是JSON物件，所以，JSON物件和JSON字串之間的相互轉換是關鍵 例如： JSON字串: var str1 = ‘{

java執行command並通過libreoffice軟體的方式將word轉化成HTML的詳細步驟解析

一、實現程式碼 ： import org.apache.commons.io.IOUtils; import java.io.File; import java.io.IOException; import java.io.InputStream; import java

將.md轉化為.html

總共需要下載的東西-windows pandoc 現在你需要下載的安裝包有： pandoc-windows版本 步驟 下載並安裝pandoc 在你的.md目錄下開啟cmd 只需要.

最簡單的JS實現json轉csv

　　工作久了，總會遇到各種各樣的資料處理工作，比如同步資料，初始化一些資料，目前比較流行的互動資料格式就是JSON，可是伺服器中得到的JSON資料如果提供給業務人員看的話可能會非常不方便，這時候，轉成CSV檔案，可以方便的被Excel工具進行讀寫。另外就是，json轉CSV之後，會很容易的同部到資料庫中，這樣

vue.js將px轉化為rem

1.下載lib-flexible 我使用的是vue-cli+webpack，所以是通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-fl

將String轉化成HTML格式

方式1:一個String顯示在網頁上，不會安置原來的格式顯示，比如說，回車符在網頁上就顯示成了一個空格， 下面這個方法可以將String改為HTML可以辨認的格式。 public static String toHTMLString(String in) {

js 將網頁下載為html

Test.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>網頁HTML存本地</title> <

Gson將json轉List,List轉json

json轉List val mNewsSortList = Gson().fromJson(newsSortConfig, object : TypeToken<List<NewsSo

JS 將json數組轉為嵌套層級數組

tree 層級 鍵值 多說 urn src alt dtree 分享圖片 ele UI 的樹級菜單的數據要求是這種嵌套的,但是Ztree的老用發的是 var zNodes =[ { id:1, pId:0, name:"zTree Hom