树形菜单


代码(2种数据结构类型任选1种)
<div id="tree" class="tree"></div>

<script>
// 第1种数据结构
var jsonArr1 =[
	{
		"id" : "zg",
		"name": "中国",
		"open" : true,
//		"checked" : true,
//		"icon" : "icon-language",
		"childrenList": [
			{
				"id" : "jss",
				"name": "江苏省",
//				"open" : true,
//				"checked" : true,
//				"icon" : "icon-language",
				"childrenList": [
					{
						"id" : "wx",
						"name": "无锡",
//						"open" : true,
//						"checked" : true,
//						"icon" : "icon-language",
//						"url" : "http://www.javaex.cn/",
//						"childrenList": []
					}, {
						"id" : "nj",
						"name": "南京",
//						"open" : true,
//						"checked" : true,
//						"icon" : "icon-language",
						"childrenList": [
							{
								"id" : "fzm",
								"name" : "夫子庙",
//								"open" : true,
//								"checked" : true,
//								"icon" : "icon-language",
//								"url" : "http://www.javaex.cn/",
//								"childrenList": []
							}, {
								"id" : "qhh",
								"name": "秦淮河",
//								"open" : true,
//								"checked" : true,
//								"icon" : "icon-language",
//								"url" : "http://www.javaex.cn/",
//								"childrenList": []
							}
						]
					}
				]
			}, {
				"id" : "bjs",
				"name": "北京市",
//				"open" : true,
//				"checked" : true,
//				"icon" : "icon-language",
				"childrenList": [
					{
						"id" : "bj",
						"name": "北京",
//						"open" : true,
//						"checked" : true,
//						"icon" : "icon-language",
//						"url" : "http://www.javaex.cn/",
//						"childrenList": []
					}
				]
			}
		]
	}, {
		"id" : "rb",
		"name": "日本",
//		"open" : true,
//		"checked" : true,
//		"icon" : "icon-language",
		"childrenList": [
			{
				"id" : "11",
				"name": "11区",
//				"open" : true,
//				"checked" : true,
//				"icon" : "icon-language",
//				"url" : "http://www.javaex.cn/",
//				"childrenList": []
			}
		]
	}
];

// 第2种数据结构(最顶级的parentId小于1即可)
var jsonArr2 = [
	{id: 1, parentId: -1, name: "中国", open: false, "checked" : false, "icon" : ""},
		{id: 101, parentId: 1, name: "江苏省", open: false, "checked" : false, "icon" : ""},
			{id: 115, parentId: 101, name: "无锡", open: false, "checked" : false, "icon" : "", url: "http://www.javaex.cn/"},
			{id: 116, parentId: 101, name: "南京", open: false, "checked" : false, "icon" : ""},
				{id: 1001, parentId: 116, name: "夫子庙", open: false, "checked" : false, "icon" : "", url: "http://www.javaex.cn/"},
				{id: 1002, parentId: 116, name: "秦淮河", open: false, "checked" : false, "icon" : "", url: "http://www.javaex.cn/"},
		{id: 102, parentId: 1, name: "北京市", open: false, "checked" : false, "icon" : ""},
			{id: 1003, parentId: 102, name: "北京", open: false, "checked" : false, "icon" : "", url: "http://www.javaex.cn/"},
	
	{id: 2, parentId: -1, name: "日本", open: false, "checked" : false, "icon" : ""},
		{id: 1004, parentId: 2, name: "11区", open: false, "checked" : false, "icon" : "", url: "http://www.javaex.cn/"}
];

// 调用组件
javaex.tree({
	id : "tree",
	data : jsonArr1,
	type : 1,		// 数据结构类型(1或2)
	isShowAllSelect : true,	// 是否显示全选
	isAllowJumpUrl : false,	// 点击菜单名称时,是否允许跳转链接
	icon : true,			// 是否显示图标
//	checkbox : false,		// 是否显示复选框
//	withoutNodeArr : [1, 2],	// 回调函数获取选中和半选中的复选框的值时,排除哪些节点(级别)的值
	callback : function(rtn) {
		// 初始化和点击复选框时的回调信息(返回选中和半选中的复选框的值,数组形式)
		console.log("idArr:" + rtn.idArr);
		
		// 点击菜单文字时的回调信息
		console.log("node:" + rtn.node);	// 返回当前菜单的节点(第几级别)
		console.log("id:" + rtn.id);		// 返回当前菜单的id
		console.log("name:" + rtn.name);	// 返回当前菜单的名称
	}
});
</script>

参数说明(使用属性默认值时,可以缺省该属性)
序号 属性名 默认值 说明
1 id 树形菜单承载元素的id
2 data json格式的数据
3 type 数据结构类型,必填,填1或2
4 isShowAllSelect false 是否显示全选
5 isAllowJumpUrl false 点击菜单名称时,是否允许跳转链接
6 icon false 是否显示图标,如果改成了true,而自己的数据里又没有icon数据,则会显示默认图标
7 checkbox true 是否显示复选框
8 withoutNodeArr 获取复选框值时,排除的节点数组(从1开始),例如[1, 2]
9 isClose false 是否默认为闭合状态
10 callback 回调函数,写法参考代码示例