李炎恢jQuery EasyUI中tree

最新推荐文章于 2021-02-13 07:02:13 发布

tiz198183

最新推荐文章于 2021-02-13 07:02:13 发布

阅读量371

点赞数

分类专栏： easyUI

easyUI 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用EasyUI框架实现的树形控件配置案例，详细展示了通过JSON数据格式来组织多层次的菜单项，并设置了动画效果、复选框等功能。

效果：

index.html

<ul id="box"></ul>

tree.json

【

{

"id" : 1, "children" : [{ }]

}，

{}，{}】

[
	{
		"id" : 1,
		"text" : "系统管理",
		"iconCls" : "icon-save",
		"children" : [
			{
				"text" : "主机信息",
				"state" : "closed",
				"children" : [
					{
						"text" : "版本信息"
					},
					{
						"text" : "数据库信息"
					}
				]
			},
			{
				"text" : "更新信息"
			},
			{
				"text" : "程序信息"
			}
		]
	},
	{
		"id" : 2,
		"text" : "会员管理",
		"children" : [
			{
				"text" : "新增会员",
				"checked" : true
			},
			{
				"text" : "审核会员"
			}
		]
	}
]

$(function () {
	
	$('#box').tree({
		url : 'tree.json',
		animate : true,//节点在展开或折叠的时候是否显示动画效果。
		checkbox : true,//节点前是否显示复选框
		cascadeCheck : true,//是否层叠选中状态。
		onlyLeafCheck : false,//是否只在末级节点之前显示复选框。
		lines : true,//是否显示树控件上的虚线。
		dnd : true,//是否启用拖拽功能
		data : [{
			"text" : "本地节点"
		}],
		formatter : function (node) {//定义如何渲染节点的文本。
			return '[' + node.text + ']';
		}
	});
               

});