`

treePanel

阅读更多
之前在考勤系统中使用到了菜单树的实现,由于使用了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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GetMenu.aspx.cs" Inherits="WEBForm_GetMenu" %>
<%= Jsons%>

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
//
using VCSOA;
using System.Text;
using System.Data;

public partial class WEBForm_GetMenu : System.Web.UI.Page
{
    public string Jsons = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        GetDTreeJSON();
    }
    public void GetDTreeJSON()
    {
        string staffid = "";
        HttpCookie cookie = Request.Cookies["StaffID"];
        if (cookie != null)
        {
            staffid = cookie.Values["StaffID"].ToString();
            Jsons = CreateExtTreeJSON(staffid);
        }
        else
        {
            Response.Redirect("../Default.aspx");
        }
    }
    //获取json
    public string CreateExtTreeJSON(string staffid)
    {
        StringBuilder sb = new StringBuilder();
        AddNode(sb, staffid);
        string s = sb.ToString();
        return s.Replace("}{", "},{");
    }
    //获取节点
    public void AddNode(StringBuilder sb, string staffid)
    {
        MenuBAL menuService = new MenuBAL();
        DataTable dt = menuService.GetMenu(staffid);

        DataView dv = new DataView(dt);
        //循环显示父节点,并显示子节点
        dv.RowFilter = "parentid = ''";
        sb.Append("[");
        foreach (DataRowView dr in dv)
        {
            sb.Append("{");
            sb.Append("text:'" + dr["title"].ToString() + "',");
            sb.Append("id:'node" + dr["id"].ToString() + "'");
            //获取子节点
            AddChildNode(dt, sb, dr["id"].ToString());
            sb.Append("}");
        }
        sb.Append("]");
    }
    //递归获取子节点
    public void AddChildNode(DataTable dt, StringBuilder sb, string id)
    {
        DataView dv = new DataView(dt);//建立dt的表视图
        dv.RowFilter = "parentid = '" + id + "'"; //过滤
        if(dv.Count>0)
        {
            sb.Append(",leaf:false,children:[");
            foreach (DataRowView dr in dv)
            {
                sb.Append("{");
                sb.Append("text:'" + dr["title"].ToString() + "',");
                sb.Append("id:'node" + dr["id"].ToString() + "',");
                sb.Append("href:'" + dr["url"].ToString() + "',");
                sb.Append("hrefTarget:'main'");
                AddChildNode(dt, sb, dr["id"].ToString());//递归
                sb.Append("}");
            }
            sb.Append("]");
        }
        else
        {
            sb.Append(",leaf:true");
        }
    }

}

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 完整

    在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...

    treePanel与gridPanel技术实现页面的增删改查

    在本文中,我们将深入探讨`treePanel`和`gridPanel`技术在页面上实现数据的增删改查功能。这两个组件是Ext JS框架中的核心组件,广泛用于构建数据驱动的用户界面。`treePanel`主要用于展示层级结构的数据,如文件...

    Ext TreePanel Checked Ext复选框树

    在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...

    获取Extjs中的TreePanel中所有的被checked的叶子节点的id

    在本篇文章中,我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中(checked)的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...

    TreePanel 带复选框的树

    TreePanel 是一种在Web开发中常用的组件,尤其在Ext JS框架中,它被用来展示具有层级结构的数据。这个"带复选框的树"是指在TreePanel中每个节点都带有可选中的复选框,用户可以通过这些复选框来选择或操作树形结构中...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    用coolite布局,数据库绑定Treepanel,用Tabpanel显示

    在本文中,我们将深入探讨如何使用Coolite布局技术,结合数据库数据绑定到TreePanel,并利用TabPanel进行动态展示。Coolite是一种强大的前端开发框架,它提供了丰富的组件和灵活的布局方式,使得创建复杂的Web应用...

    Extjs做的treepanel+tab切换页

    在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...

    Ext.net TreePanel的Checkbox操作及父子联动

    在EXT.NET框架中,TreePanel是一个非常重要的组件,它用于展示层次结构的数据,通常用于构建树形目录或层级关系的界面。在这个特定的场景中,我们关注的是TreePanel中的Checkbox功能以及父子节点间的联动效果。 ...

    Extjs入门教程(treePanel和GridPanel)

    它提供了丰富的组件库,包括TreePanel和GridPanel,这两个组件在数据展示和管理中扮演着重要角色。 TreePanel是ExtJS中的一个树形控件,它允许你展示层级结构的数据。在教程中,你可能会学到如何创建和配置...

    ExtJS 3.4关于TreePanel的一些实例

    学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...

    ext.net Menu + TreePanel

    它是一个强大的工具集,提供了多种组件,包括Menu(菜单)和TreePanel(树形面板),这两个组件在Web应用中广泛用于导航和数据组织。 Menu组件在Ext.NET中扮演着重要的角色,它为用户提供了一种易于操作的下拉菜单...

    Extjs4 treePanel节点刷新JS函数

    完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.

    Extjs开发之对于TreePanel的MultiSelectionModel重置不起作用

    在EXTJS开发中,TreePanel是用于展示层级结构数据的组件,它经常被用来构建文件系统或者组织结构等。在处理TreePanel时,我们可能会遇到一个常见问题:当尝试使用MultiSelectionModel(多选模型)重置选中的节点时,...

    无废话ExtJs 系列教程十五[树:TreePanel]

    《无废话ExtJs系列教程十五:树:TreePanel》 ExtJs是一个强大的JavaScript库,用于构建富客户端Web应用。在本教程中,我们将深入探讨一个重要的组件——TreePanel,它是ExtJs用来展示层次结构数据的工具,常用于...

    Ext TreePanel

    【Ext TreePanel】是Ext JS库中的一个组件,主要用于展示层次结构的数据,比如文件系统、组织结构等。TreePanel提供了一种交互式的树形视图,用户可以通过展开、折叠节点来查看和操作数据。 在Ext JS中,TreePanel...

    extjs TreePanel

    EXTJS中的TreePanel是用于展示层级数据的组件,它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法,使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明: 1. **主要...

    ExtJS4 treepanel与girdpanel简单案例(包括MVC模式与非MVC模式)

    用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友

    treepanel实例

    本文将深入讲解`Treepanel`的使用,包括其基本概念、配置选项、事件处理以及与后台数据的交互。 1. **Treepanel基础** Ext Tree Panel(简称Tree Panel)是Ext JS中的一个视图组件,用于展示层次化的数据结构,...

    treePanel到panel的拖拽 等等操作详细,及步骤

    ### TreePanel到Panel的拖拽操作详解 #### 一、背景与目的 在现代Web应用开发中,拖放(Drag and Drop)功能是一项常见的交互设计,它可以极大地提升用户体验。本文档将详细介绍如何实现从TreePanel到Panel的拖拽...

Global site tag (gtag.js) - Google Analytics