之前在考勤系统中使用到了菜单树的实现,由于使用了extjs的框架,所以菜单树的实现自然是用treePanel,在此记录一下用法。
//菜单
var root = new Ext.tree.AsyncTreeNode({
id: '',
loader: new Ext.tree.TreeLoader({
url: 'WEBForm/GetMenu.aspx',
listeners: {
"beforeload": function(treeloader, node) {
treeloader.baseParams = {
id: node.id,
method: 'POST'
};
}
}
})
});
var treenode = new Ext.tree.TreePanel({
id:"treenode1",
title: "菜单",
root: root,
//默认根目录不显示
rootVisible: false,
border: false,
animate: true,
lines: true,
enableDD: true,
//如果超出范围带自动滚动条
autoScroll: true,
frame: true, // 美化界面
listeners:
{
"click": function(node, event) {
//叶子节点点击不进入链接
if (node.isLeaf()) {
// 显示叶子节点菜单
event.stopEvent();
ALLEvents(node);
} else {
//不是叶子节点不触发事件
event.stopEvent();
//点击时展开
node.toggle();
}
}
}
});
//展开菜单
treenode.expandAll();
注意:如果将treepanel放到panel中,要是菜单出现滚动条,需要再页面加载完后添加控制,我是这样实现的:
Ext.onReady(function() {
new Ext.Viewport({
layout: "border",
items: [north, west, center, south]
});
//调整菜单的高度以显示滚动条
var treeHeight = document.body.clientHeight - 250;
Ext.getCmp("treenode1").setHeight(treeHeight);
//动态调整菜单高度
Ext.EventManager.addListener(window, "resize", function() {
var treeHeight = document.body.clientHeight - 250;
Ext.getCmp("treenode1").setHeight(treeHeight);
});
});
GetMenu.aspx
create PROCEDURE [dbo].[GetMenu]
@staffid varchar(20) ---工号
AS
If @staffid ='admin'
Begin
Select * From T_Menu Order By Id
End
Else
Begin
Select * From T_Menu
Where Id like '01%' --个人信息
Or ActorId In (Select Distinct ActorId From T_Authority Where StaffId=@staffid) --根据权限显示子菜单
Or Id In (
Select distinct ParentId From T_Menu
Where ActorId In (Select Distinct ActorId from T_Authority Where StaffId=@staffid)
Or Id In(Select distinct ParentId From T_Menu
Where ActorId In (Select Distinct ActorId from T_Authority Where StaffId=@staffid)
)
) --获取子菜单的父亲,需要考虑有几级菜单
Order By Id
End
附件中有menu表结构数据
- 大小: 62.1 KB
分享到:
相关推荐
在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...
在本文中,我们将深入探讨`treePanel`和`gridPanel`技术在页面上实现数据的增删改查功能。这两个组件是Ext JS框架中的核心组件,广泛用于构建数据驱动的用户界面。`treePanel`主要用于展示层级结构的数据,如文件...
在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...
在本篇文章中,我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中(checked)的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...
TreePanel 是一种在Web开发中常用的组件,尤其在Ext JS框架中,它被用来展示具有层级结构的数据。这个"带复选框的树"是指在TreePanel中每个节点都带有可选中的复选框,用户可以通过这些复选框来选择或操作树形结构中...
在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...
在本文中,我们将深入探讨如何使用Coolite布局技术,结合数据库数据绑定到TreePanel,并利用TabPanel进行动态展示。Coolite是一种强大的前端开发框架,它提供了丰富的组件和灵活的布局方式,使得创建复杂的Web应用...
在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...
在EXT.NET框架中,TreePanel是一个非常重要的组件,它用于展示层次结构的数据,通常用于构建树形目录或层级关系的界面。在这个特定的场景中,我们关注的是TreePanel中的Checkbox功能以及父子节点间的联动效果。 ...
它提供了丰富的组件库,包括TreePanel和GridPanel,这两个组件在数据展示和管理中扮演着重要角色。 TreePanel是ExtJS中的一个树形控件,它允许你展示层级结构的数据。在教程中,你可能会学到如何创建和配置...
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...
它是一个强大的工具集,提供了多种组件,包括Menu(菜单)和TreePanel(树形面板),这两个组件在Web应用中广泛用于导航和数据组织。 Menu组件在Ext.NET中扮演着重要的角色,它为用户提供了一种易于操作的下拉菜单...
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
在EXTJS开发中,TreePanel是用于展示层级结构数据的组件,它经常被用来构建文件系统或者组织结构等。在处理TreePanel时,我们可能会遇到一个常见问题:当尝试使用MultiSelectionModel(多选模型)重置选中的节点时,...
《无废话ExtJs系列教程十五:树:TreePanel》 ExtJs是一个强大的JavaScript库,用于构建富客户端Web应用。在本教程中,我们将深入探讨一个重要的组件——TreePanel,它是ExtJs用来展示层次结构数据的工具,常用于...
【Ext TreePanel】是Ext JS库中的一个组件,主要用于展示层次结构的数据,比如文件系统、组织结构等。TreePanel提供了一种交互式的树形视图,用户可以通过展开、折叠节点来查看和操作数据。 在Ext JS中,TreePanel...
EXTJS中的TreePanel是用于展示层级数据的组件,它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法,使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明: 1. **主要...
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
本文将深入讲解`Treepanel`的使用,包括其基本概念、配置选项、事件处理以及与后台数据的交互。 1. **Treepanel基础** Ext Tree Panel(简称Tree Panel)是Ext JS中的一个视图组件,用于展示层次化的数据结构,...
### TreePanel到Panel的拖拽操作详解 #### 一、背景与目的 在现代Web应用开发中,拖放(Drag and Drop)功能是一项常见的交互设计,它可以极大地提升用户体验。本文档将详细介绍如何实现从TreePanel到Panel的拖拽...