`

EasyUI 生成Tree ,并点击打开一个Tab

 
阅读更多
function init() {
	var treeData = [ {
		text : "菜单",
		children : [ {
			text : "一级菜单1",
			attributes : {
				url : "editDataGrid2.do"
			}
		}, {
			text : "一级菜单2",
			attributes : {
				url : ""
			}
		}, {
			text : "一级菜单3",
			state : "closed",
			children : [ {
				text : "二级菜单1",
				attributes : {
					url : ""
				}
			}, {
				text : "二级菜单2",
				attributes : {
					url : ""
				}
			}, {
				text : "二级菜单3",
				attributes : {
					url : ""
				}
			} ]
		} ]
	} ];
	
	
    //实例化树形菜单
    $("#tree").tree({
        data : treeData,
        lines : true,
        onClick : function (node) {
            if (node.attributes) {
                Open(node.text, node.attributes.url);
            }
        }
    });
    
    //在右边center区域打开菜单,新增tab
    function Open(text, url) {
    	var contents ='<iframe id="tabs_'+text+'" scrolling="auto" frameborder="0" src="" style="width:100%; height:99%">fdfdf</iframe>';
        if ($("#tabs").tabs('exists', text)) {
            $('#tabs').tabs('select', text);
        } else {
            $('#tabs').tabs('add', {
                title : text,
                closable : true,
                content : contents
            });
        }
        $("#tabs_"+text).attr("src", url);//redEx.do //url
    }
}

  

	<div region="west" class="west" title="NAVIGATION">
		<ul id="tree"></ul>
	</div>

 

 	<div id="conter" data-options="region:'center'" style="overflow:hidden;">
		<div id="tabs" class="easyui-tabs" data-options="fit:true,border:false" style="border: 0px solid;width: 100%; height: 100%;">
</div>
</div> 

 

分享到:
评论

相关推荐

    easyui-tree多级菜单并动态与数据库交互

    EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括我们这里用到的树形控件(tree)。结合Spring框架,我们可以实现前端界面的操作与后端数据管理的无缝对接。 首先,让我们分析一下项目中的关键文件: 1. **...

    树节点绑定(EasyUI-Tree)内含数据库打开直接用

    - 创建HTML结构:定义一个`&lt;div&gt;`元素作为Tree的容器,并设置`class="easyui-tree"`。 - 初始化Tree:通过JavaScript代码初始化Tree,指定数据源和配置项。 2. 数据库操作: - C#与数据库交互:在后端,通常使用...

    jquery-easyui-tree学习

    jQuery EasyUI就是这样一个强大的前端框架,它基于jQuery,提供了丰富的组件,包括今天我们关注的Tree组件。jQuery EasyUI Tree允许开发者轻松创建可扩展、可操作的树形结构,广泛应用于菜单导航、数据分类展示等...

    解决EasyUI中Tree的CheckBox不能设置为禁用的问题

    //设置一个标志位,在整棵树加载完成后就将标志位设置为false,不允许勾选checkbox了,在加载数据完成之前是可以勾选的,用来在数据中设置勾选了哪些节点 //这样就可以实现读取url数据时是可以设置勾选了哪些节点,在...

    Easyui tree 测试demo

    EasyUI 是一个基于 jQuery 的 UI 插件集合体,提供了丰富的界面组件,其中包括 Tree 组件。在本测试 demo 中,我们将深入探讨 EasyUI Tree 的使用方法以及相关文件的作用。 标题 "Easyui tree 测试demo" 指的是一个...

    easyui datagrid 拖拽到 tree

    在IT领域,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,如datagrid、tree、dialog等,用于快速构建用户界面。本文将详细讲解如何使用EasyUI实现从datagrid组件拖放到tree组件的功能,以及涉及的相关...

    Jquery-easyui-tree常见操作

    Jquery-easyui-tree 是基于 jQuery 和 EasyUI 的一个插件,用于快速构建和操作树形结构。本文将详细介绍 Jquery-easyui-tree 的一些常用操作方法,包括加载树、获取所有选中节点、展开和折叠所有节点以及展开和折叠...

    easyui-tree-diasbleCheckbox

    标题"easyui-tree-diasbleCheckbox"暗示了我们关注的是EasyUI树形控件中的一个特性,即禁用复选框(checkbox)。在EasyUI的树形控件中,每个节点可以配置复选框,用户可以通过选择或取消选择这些复选框来操作数据。...

    easyui tree使用方式

    此外,还有一个整合了许多扩展功能的网站 http://www.jeasyuicn.com/,提供了更多的示例和教程。 三、画面示意图 EasyUI Tree 的画面示意图可以分为两种,一种是群组信息,另一种是电费计价模式。群组信息的示意图...

    springmvc-easyui-tree增删改

    SpringMVC是Spring框架的一个模块,专门用于处理Web应用程序的模型-视图-控制器(MVC)架构,而EasyUI则是一个基于jQuery的前端UI库,提供了一系列美观且易于使用的组件,包括树形控件、窗口、表格等。现在我们来...

    easyui tree

    本例子是关于如何使用 EasyUI 来生成一个简单的树形结构,非常适合初学者学习。 首先,我们需要理解 EasyUI Tree 的基本概念。Tree 组件由节点(Nodes)组成,每个节点可以有子节点,形成层级关系。节点可以通过 ...

    easyui tree 三帧界面

    在“easyui tree 三帧界面”这个主题中,我们主要讨论的是如何利用EasyUI的Tree组件来创建一个具有三个独立区域的界面,其中右侧区域可以动态展示图片和批注信息。 首先,EasyUI的Tree组件是一个强大的树形结构控件...

    EasyUI的tree及datagrid真实使用范例

    EasyUI 是一个基于 jQuery 的前端框架,用于快速构建用户界面,尤其在开发 Web 应用时,它提供了丰富的组件库,其中包括我们今天要讨论的 Tree 和 DataGrid。这两个组件在数据展示和操作中扮演着重要角色。 Tree ...

    ssm+mysql+easyui-tree省市区三级联动

    本项目“ssm+mysql+easyui-tree省市区三级联动”则是在这个框架基础上实现的一个功能模块,主要用于处理地理区域的联动选择,如省、市、区的三级选择。下面我们将详细探讨这一知识点。 首先,Spring作为核心的依赖...

    easyui tree 例子

    EasyUI 是一个基于 jQuery 的前端框架,主要用于构建用户界面,尤其在企业级应用中非常常见。其中,Tree组件是EasyUI的重要组成部分,用于展示层级结构的数据,如组织架构、文件目录等。在这个“easyui tree 例子”...

    easyui_tree 文档及demo

    在给定的“easyui_tree 文档及demo”中,我们主要关注的是 EasyUI 的 Tree 组件,这是一个用于展示层次结构数据的控件,常用于文件系统、组织结构或导航菜单的展示。 1. **异步加载**: EasyUI Tree 支持异步加载...

    easyui-datagrid&&easyui-tree实例

    1. **初始化Tree**: 与datagrid类似,创建一个div元素并绑定到EasyUI tree。 ```html &lt;ul id="tree"&gt; ``` 2. **数据源转换**: ASP.NET端需要将数据库中的数据转换为适合tree的数据格式,通常是JSON数组。 ```...

    EasyUI tree 及 DataGrid

    EasyUI 是一个基于 jQuery 的前端框架,主要用于构建用户界面,特别是对于企业级应用而言,它提供了丰富的组件,如对话框、表单、菜单、树形控件(Tree)和数据网格(DataGrid)等。在本项目中,"EasyUI tree 及 ...

    easyui tree 改进版

    综上所述,"easyui tree 改进版"是一个增强型的树形组件,它在原版的基础上增加了复选框选择功能,提升了用户在操作树形数据时的交互性和效率。开发者可以通过定制数据源、监听事件、配置选项等方式,轻松实现各种复...

    easyui tree扁平化扩展,不用再为children嵌套结构烦恼

    EasyUI Tree插件是基于jQuery的一个轻量级插件,它提供了一种简单的方式创建树形控件。然而,在实际应用中,我们常常遇到数据结构的问题——即如何处理带有`children`属性的嵌套数据结构。这篇文章将详细介绍如何对...

Global site tag (gtag.js) - Google Analytics