`
literary_fly
  • 浏览: 92551 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

EXTJS学习系列提高篇:第七篇(转载)作者殷良胜,制作树形菜单之一

阅读更多
制作树形菜单的原理是:首先连接数据库,将数据按照树的结构形式返回,在客户端遍历数据时,将每条记录生成一个treepanel,然后在每个treepanel都包含在一个Panel组件里面,最后在将每个Panel组件都添加到一个上级Panel组件里面,最后在将这个上级Panel添加到Viewport里面.这里用到三个Ext组件,分别是:Viewport ; Panel ; TreePanel.

这里先简单介绍下这三个组件:

1,Panel 是Ext控件的基础,它可以用来创建非常漂亮的界面,是一个功能强大,使用却非常简单的容器组件.像面板的展开与关闭功能就非常不错.

2,TreePanel,看名字就知道树的组件就是继承自Panel 组件,在以前如果要在客户端实现一个树是很麻烦的,要处理样式,写很多的脚本,并且还要考虑Ajax.但是现在就方便多了,你要做的就是设置几个属性而已,唯一要注意的是,在显示一棵树时,必须为它指定一个根节点,不过,这更简单.

3,Viewport 代表整个浏览器的显示区域,并会随着显示区域的大小而自动改变,一个页面有且只能够有一个Viewport .

下面在将代码复制出来之前,先看看效果图,因为效果图很精美,能够增加你的胃口:

按顺序将效果图依次展开,包括面板关闭,面板展开,树菜单展开,树菜单依次展开等

1,将整个页面完整复制过来,你就会发现,Ext仅仅几行代码就能够实现非常强大的应用

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="Example_TreeAutoLoad_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>测试树形菜单</title>
    <link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
    <link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-purple.css" />
    <link rel="Stylesheet" type="text/css" />
    <script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ExtJS/ext-all.js"></script>
    <script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>
    <style type="text/css">
    .panel_icon { background-image:url(images/first.gif)}
    .center_icon { background-image:url(images/center.png)}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>  
    <script type="text/javascript">
    //以下是关键代码 因为是提高篇,所以假想你已经对Ext很熟悉了,
    //即使不熟悉也没有关系,我会继续把未完的基础篇尽快完成
    function makeTreeMenu()
    {
        var panel_west = new Ext.Panel
        ({
            id:'panWestMenu',
            region:'center',
            title:'销售管理系统',
            split:true,
            width: 200,
            collapsible: true,
            margins:'0 0 0 0',
            layout:'accordion',
            layoutConfig:{animate:true}
        });
        var viewport = new Ext.Viewport
        ({
            id:'vpMain',
            layout:'border',
            items:
            [
                panel_west
            ]
        });       
        var CreateMenuPanel = function(title,TypeID)
        {
              return new Ext.Panel
              ({
                  title:title,layout:'fit',border: false,frame:true,                    
                  items:
                  [{
                      xtype:'treepanel',singleExpand:true,animate:true,autoScroll:true,containerScroll: true,
                      border: false,
                      width:200,height:370,enableDD:false,dropConfig: {appendOnly:true},                         
                      loader: new Ext.tree.TreeLoader({dataUrl:"json.aspx?Param=1"}),                         
                      root:new Ext.tree.AsyncTreeNode
                      ({
                          id:TypeID,
                          text: title,
                          draggable:false,
                          expanded:true
                         
                      })
                  }]
             });
        };     
        //加载左面的数据
        var loadPanelWest = function()
        {
             Ext.Ajax.request
             ({
                    url: 'json.aspx?Param=0',
                    success: function(response, options)
                    {
                        try
                        {
                            var panWestMenu = Ext.getCmp("panWestMenu");
                            if(panWestMenu)
                            {
                                var children = panWestMenu.findByType('panel');
                                if(children)
                                {
                                    for(var i=0, len = children.length; i<len; i++)
                                    {
                                        panWestMenu.remove(children[i],true);
                                    }
                                }
                            }
                            var menusArray = Ext.util.JSON.decode(response.responseText);
                           
                            for(var i=0; i<menusArray.length; i++)
                            {
                                var mp = CreateMenuPanel(menusArray[i].TypeTitle,menusArray[i].TypeID);
                                panWestMenu.add(mp);                               
                            }
                           
                            panWestMenu.doLayout();
                        }
                        catch(e)
                        {
                           
                        }
                    }
                });
            };
            loadPanelWest(); 
    }
    </script>
   
    <script type="text/javascript">
    function ready()
    {
        makeTreeMenu();       
    }
    Ext.onReady(ready);
    </script>
    </div>
    </form>
</body>
</html>
2,显示完整后台cs代码json.aspx.cs

using Ext;
using System.Collections.Generic;
using Newtonsoft.Json;

public partial class Example_TreeAutoLoad_json : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string param = Request["Param"];
        if (param == "0")
        {
            List<Ext.TreeNode> nodes = new List<Ext.TreeNode>();
            string res = "";
            try
            {
                DataSet ds = DataBusiness.GetMoreRow(Convert.ToString(param));
                if (ds != null && ds.Tables[0].Rows.Count > 0)
                {
                    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                    {
                        DataRow row = ds.Tables[0].Rows[i] as DataRow;
                        Ext.TreeNode node = new Ext.TreeNode();
                        node.id = Convert.ToString(row["ID"]);
                        node.parentNodeId = param;
                        node.IsRoot = false;
                        node.leaf = false;
                        node.draggable = true;
                        node.text = Convert.ToString(row["TypeCName"]);
                        node.TypeID = Convert.ToString(row["ID"]);
                        node.PID = Convert.ToString(param);
                        node.TypeTitle = Convert.ToString(row["TypeCName"]);
                        node.TypeEName = Convert.ToString(row["TypeCName"]);
                        node.DelFlag = Convert.ToBoolean(row["DelFlag"]);
                        nodes.Add(node);
                    }
                }
                res = JavaScriptConvert.SerializeObject(nodes);
            }
            catch (Exception ee)
            {
                string error = ee.Message;
            }

            Response.Write(res);
        }
        else
        {
            if (Request["node"] == null || Convert.ToString(Request["node"]) == "")
                return;
            List<Ext.TreeNode> nodes = new List<Ext.TreeNode>();
            string res2 = "";
            try
            {
                DataSet ds = DataBusiness.GetMoreRow(Convert.ToString(Request["node"]));
                if (ds != null && ds.Tables[0].Rows.Count > 0)
                {
                    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                    {
                        DataRow row = ds.Tables[0].Rows[i] as DataRow;
                        Ext.TreeNode node = new Ext.TreeNode();
                        node.id = Convert.ToString(row["ID"]);
                        node.parentNodeId = Convert.ToString(Request["node"]);
                        node.IsRoot = false;
                        node.leaf = (DataBusiness.HasChildNode(node.id));
                        node.draggable = true;
                        node.text = Convert.ToString(row["TypeCName"]);
                        node.TypeID = Convert.ToString(row["ID"]);
                        node.PID = Convert.ToString(Request["node"]);
                        node.TypeTitle = Convert.ToString(row["TypeCName"]);
                        node.TypeEName = Convert.ToString(row["TypeCName"]);
                        node.DelFlag = Convert.ToBoolean(row["DelFlag"]);
                        nodes.Add(node);
                    }
                }
                res2 = JavaScriptConvert.SerializeObject(nodes);
            }
            catch (Exception ee)
            {
                string error = ee.Message;
            }

            Response.Write(res2);
        }
    }
}
3,将涉及的实体类代码完整复制




namespace Ext
{
    // 摘要:
    //     Class that represents an ExtJs TreeNode
    [Serializable]
    public class TreeNode
    {
        // 摘要:
        //     Initializes a new instance of the TreeNode class.
        public TreeNode()
        {
        }

        // 摘要:
        //     Css class to render a different icon to a node
        private string _cls;
        public string cls
        {
            get { return _cls; }
            set { _cls = value; }
        }
        //
        // 摘要:
        //     If the node is draggabe
        private bool _draggable;
        public bool draggable
        {
            get { return _draggable; }
            set { _draggable = value; }
        }
        //
        // 摘要:
        //     URL of the link used for the node (defaults to #)
        private string _href;
        public string href
        {
            get { return _href; }
            set { _href = value; }
        }
        //
        // 摘要:
        //     target frame for the link
        private string _hrefTarget;
        public string hrefTarget
        {
            get { return _hrefTarget; }
            set { _hrefTarget = value; }
        }
        //
        // 摘要:
        //     The path to an icon for the node. The preferred way to do this is to use
        //     the cls or iconCls attributes and add the icon via a CSS background image.
        private string _icon;
        public string icon
        {
            get { return _icon; }
            set { _icon = value; }
        }
        //
        // 摘要:
        //     Node id
        private string _id;
        public string id
        {
            get { return _id; }
            set { _id = value; }
        }
        //
        // 摘要:
        //     If a node is checked (only if tree is checkbox tree)
        private bool _IsChecked;
        public bool IsChecked
        {
            get { return _IsChecked; }
            set { _IsChecked = value; }
        }
        //
        // 摘要:
        //     If this is the root node
        private bool _IsRoot;
        public bool IsRoot
        {
            get { return _IsRoot; }
            set { _IsRoot = value; }
        }
        //
        // 摘要:
        //     If it has children then leaf=false
        private bool _leaf;
        public bool leaf
        {
            get { return _leaf; }
            set { _leaf = value; }
        }
        //
        // 摘要:
        //     Gets or sets the type of the node.
        private string _NodeType;
        public string NodeType
        {
            get { return _NodeType; }
            set { _NodeType = value; }
        }
        //
        // 摘要:
        //     Id of the parent node
        private string _parentNodeId;
        public string parentNodeId
        {
            get { return _parentNodeId; }
            set { _parentNodeId = value; }
        }
        //
        // 摘要:
        //     Text of the node
        private string _text;
        public string text
        {
            get { return _text; }
            set { _text = value; }
        }
        private string typeID;

        public string TypeID
        {
            get { return typeID; }
            set { typeID = value; }
        }
        private string pID;

        public string PID
        {
            get { return pID; }
            set { pID = value; }
        }
        private string typeEName;

        public string TypeEName
        {
            get { return typeEName; }
            set { typeEName = value; }
        }

        private string description;

        public string Description
        {
            get { return description; }
            set { description = value; }
        }
        private string typeTitle;

        public string TypeTitle
        {
            get { return typeTitle; }
            set { typeTitle = value; }
        }

        private DateTime addDate;

        public DateTime AddDate
        {
            get { return addDate; }
            set { addDate = value; }
        }
        private bool delFlag;

        public bool DelFlag
        {
            get { return delFlag; }
            set { delFlag = value; }
        }
    }
}


4,因业务逻辑仅仅涉及2个查询较为简单,这里不再列出,仅将数据表的生成脚本完整显示

CREATE TABLE [dbo].[TypeTable](
[ID] [int] IDENTITY(1,1) NOT NULL,
[PID] [int] NULL,
[TypeEName] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,
[TypeCName] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,
[DelFlag] [bit] NULL CONSTRAINT [DF_TypeTable_DelFlag]  DEFAULT ((0)),
[AddDate] [datetime] NULL CONSTRAINT [DF_TypeTable_AddDate]  DEFAULT (getdate()),
CONSTRAINT [PK_TypeTable] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
  • 大小: 21 KB
  • 大小: 24.1 KB
  • 大小: 27.6 KB
分享到:
评论

相关推荐

    ExtJS5树形菜单

    在本篇文章中,我们将深入探讨ExtJS5树形菜单的使用方法、配置选项以及如何通过继承来优化代码复用。 1. **树形菜单的基本结构** 树形菜单由`Ext.tree.Panel`类创建,它是一个包含树节点的面板。每个节点都是一个`...

    使用ExtJs构建树形菜单功能

    ### 使用ExtJs构建树形菜单功能详解 #### 一、引言 在现代Web应用程序开发中,树形菜单是一项常用且重要的功能。它能够帮助用户更直观地理解数据层次关系,尤其是在展示组织架构、文件系统或者任何有层级结构的...

    ExtJS与.NET结合开发实例-殷良胜

    - **11CheckBoxTree.rar**:这是一个包含复选框功能的树形控件示例,展示了如何在ExtJS中实现树节点的多选操作,并与.NET后台进行数据同步。 - **16GridPanel2.rar**:展示了一个增强的网格面板,可能包括了行编辑...

    ExtJS5.0 树形菜单实例

    下面我们将深入探讨如何利用ExtJS 5.0 创建一个树形菜单实例。 1. **TreePanel 基础** TreePanel 是ExtJS 中用于展示树状数据的组件,它允许用户展开和折叠节点,进行选择和编辑操作。创建一个TreePanel 需要定义...

    extjs实现动态树加载菜单

    动态树加载菜单是 ExtJS 中一种常见且实用的功能,它允许用户在需要时按需加载树节点,从而提高应用性能,减少初次加载时的数据量。 动态树加载,也称为懒加载或按需加载,是指在用户滚动、展开节点或执行其他操作...

    Extjs 无限树菜单 后台拼接json

    "Extjs 无限树菜单 后台拼接json"这个主题涉及到如何在后端生成无限级别的树形菜单数据,并通过JSON格式传输到前端进行渲染。 首先,我们要理解树形菜单的基本概念。树形菜单是一种以节点和层级关系展示数据的控件...

    extjs开发的权限系统(树形菜单复选框可级联选择)

    使用extjs+ibatis+spring+struts开发的权限系统 数据库mysql 数据库文件在开发文档目录下 动态树形菜单的加载 ,用户角色权限菜单的维护 jar文件删了一些,需要用的自己加包

    Extjs应用教程 提高篇

    在“ExtJS应用教程 提高篇”中,我们看到一系列教程,涵盖了从基础到高级的EXTJS使用技巧,特别是针对EXTJS 2.2版本。教程内容包括了如何使用EXTJS组件,如GridPanel和ComboBox,以及如何动态生成数据。 在提高篇的...

    ExtJs2.0学习系列

    ExtJS是一种基于JavaScript的开源富客户端框架,特别适用于构建企业级的Web应用程序。在ExtJS 2.0版本中,这个框架提供了丰富的组件库、强大的数据管理以及灵活的布局管理,使得开发者能够创建功能强大、界面友好的...

    Ext树形菜单(我自己做的)

    在给定的标题“Ext树形菜单(我自己做的)”中,我们可以推断出这个压缩包包含了一个由开发者自定义的ExtJS树形菜单组件。树形菜单是用户界面中常用的一种元素,它用于展示层次结构的数据,比如文件系统、组织结构或...

    EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单等

    这个压缩包文件的内容看起来是一个完整的EXTJS项目,包含了数据库交互、动态树结构和菜单功能,并且集成了SpringMVC后端框架以及JDBC数据访问层。 1. **EXTJS动态树**: EXTJS的动态树(TreePanel)组件允许开发者...

    ExtJs3下拉树

    ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...

    tree 动态树 extjs ajax

    在IT行业中,ExtJS是一个广泛使用的JavaScript框架,用于构建富客户端Web应用程序。它提供了一整套组件库,包括数据管理、用户界面元素以及强大的图表和表格功能。在给定的标题和描述中,主要涉及了ExtJS中的动态树...

    extJs 2.1学习笔记

    20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25....

    extjs树形下拉框treeField

    extjs 树形下拉列表框,可以进行数据选择,数据回显。

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

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

    extJs树形框架(一个例子)

    总的来说,这个“ExtJS树形框架”实例提供了一个实际的应用场景,帮助开发者学习如何将ExtJS的交互性与传统的Web开发框架(如Oracle、iBATIS和Struts)相结合,构建出复杂的前端应用。通过研究这个项目,我们可以...

    EXTJS 动态生成下来树形框

    动态生成下拉树形框是EXTJS中一个常见的需求,它允许用户在一个下拉菜单中展示层次化的数据结构,比如组织架构或者文件系统。这篇博客(&lt;https://chinadeng.iteye.com/blog/794209&gt;)可能会详细讲解如何实现这个功能...

    Extjs学习一线资料

    EXTJS是一个用于创建桌面级Web应用的前端框架,它提供了丰富的组件库,如表格、树形视图、菜单、窗口、表单等。EXTJS以其强大的数据绑定、布局管理和可自定义的组件而闻名,使得开发者能够构建出高效且用户友好的...

Global site tag (gtag.js) - Google Analytics