[JAVASCRIPT][EXTJS]直接用JSON创建树形控件（Ext.tree.TreePanel ）

最新推荐文章于 2021-10-19 19:52:54 发布
最新推荐文章于 2021-10-19 19:52:54 发布
阅读量4.7k 收藏
点赞数
分类专栏： JavaScript专区 网页专区 文章标签： extjs json javascript file tree stylesheet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/szwangdf/article/details/5671555
版权

直接用JSON创建树形控件（Ext.tree.TreePanel ）

1、创建多个根节点的树形

2、直接使用JsonList创建树形

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="keywords" content="Extjs, Ext, Ext JS, Ext JavaScript, example, fully loaded tree example, static tree, tree example Ext" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fully Loaded Tree</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<mce:script type="text/javascript" src="../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../ext-lang-zh_CN.js" mce_src="ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
    
    // json data describing the tree
	var json = [
	{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [ 
	    {"text" : "A3", "id" : 10001, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "A4", "id" : 10002, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "A6", "id" : 10003, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "A8", "id" : 10004, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Q7", "id" : 10005, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "S4", "id" : 10006, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "S6", "id" : 10007, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "S8", "id" : 10008, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "TT", "id" : 10009, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    }]
	},
	{"text" : "BMW", "id" : 200, "leaf" : false, "cls" : "folder", "children" : [ 
	    {"text" : "3 Series Convertible", "id" : 10001, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "3 Series Coop", "id" : 10002, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "3 Series Sedan", "id" : 11000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "3 Series Sports Wagon", "id" : 21000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "5 Series", "id" : 31000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "6 Series", "id" : 41000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "7 Series", "id" : 51000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "M", "id" : 61000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "M3", "id" : 71000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "M5", "id" : 81000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "M6", "id" : 91000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "X3", "id" : 101000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "X5", "id" : 111000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Z4", "id" : 121000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    }]
	},
	{"text" : "Cadillac", "id" : 300, "leaf" : false, "cls" : "folder", "children" : [ 
	    {"text" : "CTS", "id" : 11000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "CTS-V", "id" : 21000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "DTS", "id" : 31000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Escalade", "id" : 41000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Escalade - ESV", "id" : 51000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Escalade - EXT", "id" : 61000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "SRX", "id" : 71000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "STS", "id" : 81000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "STS-V", "id" : 91000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "XLR", "id" : 111000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "XLR-V", "id" : 121000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    }]
	},
	{"text" : "Jaguar", "id" : 400, "leaf" : false, "cls" : "folder", "children" : [ 
	    {"text" : "S-Type", "id" : 11, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "X-Type", "id" : 22, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "XJ-Series", "id" : 33, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "XK-Series", "id" : 44, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    }]
	},
	{"text" : "Maserati", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : [
	    {"text" : "Coupe", "id" : 10200, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Grand Sport", "id" : 10300, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Quattroporte", "id" : 10400, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    }]
	},
	{"text" : "Porsche", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : [
	    {"text" : "911 Carrera", "id" : 123, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "911 Carrera 4", "id" : 90, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "911 Turbo", "id" : 789, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Boxster", "id" : 56, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Cayenne", "id" : 334, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Cayman", "id" : 222, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    }]
	}
	];

    // shorthand
    var Tree = Ext.tree;

    var tree = new Tree.TreePanel(
    	//'tree', 
    	{
		title:'选项列表',
		width: 200,
		height:300,
		root:root,
		animate: true,//是否动画
		useArrows: true,//树形目录使用visit中树目录显示效果(三角形代替+号)  
		rootVisible : false,//顶节点是否显示、设置成false后顶节点的子节点就作为顶节点（可以有多个子节点作为顶节点）
        enableDD:false,
		loader: new Tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
		lines: true,
		selModel: new Ext.tree.MultiSelectionModel(),
	        containerScroll: false
	    });

    // set the root node
    var root = new Tree.TreeNode({
        text: 'Autos',
        draggable:false,
        id:'source'
    });

    tree.setRootNode(root);

	var objLoader = tree.getLoader();
    for(var i = 0, len = json.length; i < len; i++) {
        root.appendChild(objLoader.createNode(json[i]));
    }
    
    tree.render(document.body);
    root.expand(); 
    
});
// --></mce:script>
</head>
<body>
<div id="tree"></div>
</body>
</html>


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

逐浪_一生悬命
关注
专栏目录
Ext树形结构——TreePanel
Donny的专栏
12-26 1万+
创建一个树 树控件由Ext.tree.TreePanel类定义，控件名称为treepanel，继承自Panel面板。 要实现一棵树也很简单： 1.    创建一个TreePanel 2.    为TreePanel设置一个根结点（RootNode） 3.    添加子节点（TreeNode）到根几点。 示例： Ext.BLANK_IMAGE_URL = '../../resource...
ExtJs动态生成treepanel的Json格式
10-23
主要介绍了ExtJs动态生成treepanel的Json格式的相关资料,需要的朋友可以参考下
ExtJs加载JSON格式树
wjt276的专栏
12-12 236
html文件中加入 &lt;script src="treedata.js"&gt;&lt;/script&gt; /** * 动态加载JSON格式的数据 */ var mytree_2=new Ext.tree.TreePanel({ //el:"container",//应用到的html元素id animate:true,//以动画形式伸展,收缩子节...
【转】extjs加载json数据动态生成树
zhldt2008的专栏
03-07 7368
<br />使用ExtJS2，以JSON（JavaScript Object Notation）TreeLoader 异步读取数据，构造一棵异步加载的树。 <br /><br />1. 下载ExtJS2，地址：http://www.extjs.com/<br />   下载Ext JS 2.1 SDK：ext-2.1.zip。 <br />   examples文件夹下全部是ExtJS例子演示程序。 <br />   ExtJS2主要的会用到以下几个文件：ext-all.css、ext-base.js、ex
Json转化与ExtJS树(后台处理)
Fate is about choice
05-23 293
一、JSON对格式化数据的操作： 1.导入依赖包： import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; 2.Map转化为JSON数组： //声明一个Hash对象并添加数据 Map params = new HashMap(); params.put("userna...
extjs-tree.zip_extjs tree
09-24
ExtJS Tree是一个强大的JavaScript库，专门用于创建交互式的树形结构。这个"extjs-tree.zip"文件包含了使用Java编写的ExtJS异步树形控件的示例代码，旨在帮助开发者快速理解和应用这一功能。ExtJS是Sencha公司开发的...
使用ExtJs构建树形菜单功能
11-18
在ExtJs中，树形菜单主要通过`Ext.tree.TreePanel`类来实现。该类继承自`Panel`面板，提供了许多特性和方法来方便地构建和操作树形结构。下面我们通过一个简单的例子来创建一棵基础的树： ```javascript Ext....
ext树形动态菜单 .doc
07-15
`var menutree1 = new Ext.tree.TreePanel({` 这段代码用于创建一个基于 ExtJS 框架的树形菜单对象。`Ext.tree.TreePanel` 是一个功能强大的树形菜单控件，支持自动滚动、动画效果、拖放等功能，并可以通过配置参数...
extjs动态树的示例代码.rar
12-05
1. **Ext.tree.Panel**：ExtJS中的树形组件是基于`Ext.tree.Panel`创建的。这是一个容器，可以包含一个或多个`TreeNode`，并提供滚动、分页等功能。创建树形控件时，需要定义`rootVisible`（是否显示根节点）、`...
extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据
04-16
NULL 博文链接：https://maoyi606.iteye.com/blog/1782825
[JAVASCRIPT][EXTJS]直接用JSON创建树形控件（Ext.tree.TreePanel ）(转)
weixin_30552811的博客
07-04 92
直接用JSON创建树形控件（Ext.tree.TreePanel ） 1、创建多个根节点的树形 2、直接使用JsonList创建树形 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>...
使用静态Json数据源创建Ext.tree.TreePanel组件
DON'T PANIC
08-01 182
如何用静态JSON数据作为TreePanel数据源？ 有人从TreeLoader继承实现了TreeStoreLoader，可直接引用Store。经测试发现该类无法工作，而且调试麻烦。 从root节点下手，一次性把数据放到树节点上，在AsyncTreeNode的children属性赋值给JSON对象。...
使用extjs、json开发用到的包,json的结构模式
萧逸闲侃
09-11 1895
使用ExtJS2，以JSON（JavaScript Object Notation）TreeLoader 异步读取数据，构造一棵异步加载的树1. 下载ExtJS2，地址：http://www.extjs.com/    下载Ext JS 2.1 SDK：ext-2.2.zip。    examples文件夹下全部是ExtJS例子演示程序。    ExtJS2
用非递归的方式实现数组转树
mmmawo的博客
10-19 296
把平铺的数组结构转成树形结构 数组: const arr = [ { 'id': '29', 'pid': '', 'name': '总裁办' }, { 'id': '2c', 'pid': '', 'name': '财务部' }, { 'id': '2d', 'pid': '2c', 'name': '财务核算部'}, { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'}, { 'id': 'd2', 'pid': '',
使用ExtJS2构造动态异步加载的树
JRQ 的博客
06-15 6118
标题：使用ExtJS2构造动态异步加载的树作者：JRQ 链接：http://blog.csdn.net/jrq/archive/2008/06/15/2549839.aspx 正文： 使用ExtJS2，以JSON（JavaScript Object Notation）TreeLoader 异步读取数据，构造一棵异步加载的树。  1. 下载ExtJS2，地址：
ExtJS的使用方法汇总(3)——树形结构
热门推荐
薛敬明的专栏
09-14 1万+
在应用程序中，我们经常需要显示或处理树状结构的对象信息，比如部门信息和地区信息，树是一种非常典型的数据结构，这些信息都可以用树来表示。对于传统的HTML页面来说，完全依靠手动编码来实现树是比较困难的，因为需要写很多的JS代码，对基于AJAX异步加载来说尤其如此，不但涉及AJAX数据异步加载，还需要考虑跨浏览器支持，处理起来非常麻烦，EXT中提供了现成的树控件，通过这些控件，可以在B/S应用中快速开
Ext.ux.tree.TreeGrid实现异步节点加载：点击触发数据获取
这篇文档展示了如何在 Ext.ux.tree.treegrid 中利用异步加载功能，结合服务器端的数据处理，构建一个动态且交互式的树形数据展示控件。这种设计有助于提高数据处理的效率和用户界面的响应性，特别适合需要频繁加载...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值