当前位置：首页 > news >正文

NHibernate3.2+Asp.net MVC3+Extjs 4.0.2项目实践(五):Extjs树形导航菜单

news 来源：原创 2024/5/17 19:44:43

　　前一节中介绍了ViewPort，APPMenuTree定位在west region，继承自Ext.tree.Panel，需要实现的功能是从数据库System_Purview表中获取menu数据生成tree，并实现tree node的单击，在MainPanel中动态加载Tab。关键在于如何生成tree所需的Json数据，而tree的Json数据格式是这样的：

[
{id:'01',text:'01',children:[
{id:'01-01',text:'01-01',leaf:true},
{id:'01-02',text:'01-02',children:[
{id:'01-02-01',text:'01-02-01',leaf:true},
{id:'01-02-02',text:'01-02-02',leaf:true}
]},
{id:'01-03',text:'01-03',leaf:true}
]},
{id:'02',text:'02',leaf:true}
]

首先tree我分为三级，root为静态构建，不用管它，第2级对应数据表的父级，第3级对应子级，这样我就定义了3个Model，System_Purview(Mindscape设计器自动生成)，JSystem_Purview_Parent与JSystem_Purview_Child，来看一下代码。

System.cs

```
namespace TESZ.Data.Model
```
```
{
```

    public partial class JSystem_Purview_Child

```
    {
```

        public virtual string id { get; set; }

        public virtual string text { get; set; }

        public virtual bool expanded { get; set; }

        public virtual bool leaf { get; set; }

```
    }
```

    public partial class JSystem_Purview_Parent

```
    {
```

        public virtual string id { get; set; }

        public virtual string text { get; set; }

        public virtual bool expanded { get; set; }

        public virtual bool leaf { get; set; }

        public IList<JSystem_Purview_Child> children { get; set; }

```
    }
```

  [System.CodeDom.Compiler.GeneratedCode("NHibernateModelGenerator", "1.0.0.0")]

```
  public partial class System_Purview
```
```
  {
```

    public virtual int PurviewId { get; set; }

    public virtual int ParentPurviewId { get; set; }

    public virtual string PurviewKey { get; set; }

    public virtual string NavigationUrl { get; set; }

    public virtual string ImageUrl { get; set; }

    public virtual string PurviewName { get; set; }

    static partial void CustomizeMappingDocument(System.Xml.Linq.XDocument mappingDocument);

    public static System.Xml.Linq.XDocument MappingXml

```
    {
```
```
      get
```
```
      {
```

        var mappingDocument = System.Xml.Linq.XDocument.Parse(@"<?xml version='1.0' encoding='utf-8' ?>

<hibernate-mapping xmlns='urn:nhibernate-mapping-2.2'

                   assembly='" + typeof(System_Purview).Assembly.GetName().Name + @"'

                   namespace='TESZ.Data.Model'

```
                   >
```
```
  <class name='System_Purview'
```
```
         table='`System_Purview`'
```
```
         >
```
```
    <id name='PurviewId'
```
```
        column='`PurviewId`'
```
```
        >
```
```
      <generator class='identity'>
```
```
      </generator>
```
```
    </id>
```
```
    <property name='ParentPurviewId'
```

              column='`ParentPurviewId`'

```
              />
```
```
    <property name='PurviewKey'
```
```
              column='`PurviewKey`'
```
```
              />
```
```
    <property name='NavigationUrl'
```
```
              column='`NavigationUrl`'
```
```
              />
```
```
    <property name='ImageUrl'
```
```
              column='`ImageUrl`'
```
```
              />
```
```
    <property name='PurviewName'
```
```
              column='`PurviewName`'
```
```
              />
```
```
  </class>
```
```
</hibernate-mapping>");
```

        CustomizeMappingDocument(mappingDocument);

```
        return mappingDocument;
```
```
      }
```
```
    }
```
```
  }
```
```
}
```

数据访问层ISystem_PurviewRepository，System_PurviewRepository就不列出来了，和第二节中的Location_Country同理，接着是Service：

ISystem_PurviewService.cs

```
namespace TESZ.Services
```
```
{
```

    public interface ISystem_PurviewService

```
    {
```

        IList<System_Purview> GetSystem_Purviews();

        bool CreateSystem_Purview(System_Purview system_Purview);

        IList<System_Purview> GetSystem_PurviewsParent();

        IList<System_Purview> GetSystem_PurviewsChild(int parentPurviewId);

```
    }
```
```
}
```

System_PurviewService.cs

```
namespace TESZ.Services
```
```
{
```

    public class System_PurviewService : ISystem_PurviewService

```
    {
```

        private TESZ.Data.DataAccess.ISystem_PurviewRepository _iSystem_PurviewRepository;

        public System_PurviewService(TESZ.Data.DataAccess.ISystem_PurviewRepository iSystem_PurviewRepository)

```
        {
```

            _iSystem_PurviewRepository = iSystem_PurviewRepository;

```
        }
```

        public IList<TESZ.Data.Model.System_Purview> GetSystem_Purviews()

```
        {
```

            return _iSystem_PurviewRepository.FindAll();

```
        }
```

        public IList<TESZ.Data.Model.System_Purview> GetSystem_PurviewsParent()

```
        {
```

            return _iSystem_PurviewRepository.FindAll().Where(o => o.ParentPurviewId == 0).ToList();

```
        }
```

        public IList<TESZ.Data.Model.System_Purview> GetSystem_PurviewsChild(int parentPurviewId)

```
        {
```

            return _iSystem_PurviewRepository.FindAll().Where(o => o.ParentPurviewId == parentPurviewId).ToList();

```
        }        
```

        public bool CreateSystem_Purview(TESZ.Data.Model.System_Purview system_Purview)

```
        {
```

            return _iSystem_PurviewRepository.Create(system_Purview);

```
        }
```
```
    }
```
```
}
```

然后就是Controller控制器提供Json数据了。

SystemPurviewController.cs

public partial class AppCenterController : Controller

```
    {
```
```
        //
```
```
        // GET: /SystemPurview/
```

        private IList<JSystem_Purview_Child> GetChildren(int parent)

```
        {
```

            var result = _iSystem_PurviewService.GetSystem_PurviewsChild(parent);

            if (result != null && result.Count > 0)

```
            {
```

                var ts = from t in result.AsQueryable()

                         select new JSystem_Purview_Child()

```
                         {
```

                             id = t.PurviewKey.Trim(),

                             text = t.PurviewName.Trim(),

                             expanded = false,

                             leaf = true

```
                         };
```
```
                return ts.ToList();
```
```
            }
```
```
            return null;
```
```
        }
```
```
        [AcceptVerbs(HttpVerbs.Get)]
```

        public JsonResult JGetParentPurviews()

```
        {
```

            var result = _iSystem_PurviewService.GetSystem_PurviewsParent();

            var data = from t in result.AsQueryable()

                       select new JSystem_Purview_Parent()

```
                       {
```

                           id = t.PurviewKey.Trim(),

                           text = t.PurviewName.Trim(),

                           expanded = true,

                           leaf = false,

                           children = GetChildren(t.PurviewId)

```
                       };
```

            return Json(data, JsonRequestBehavior.AllowGet);

```
        }
```
```
    }
```

最后是定义TreeStore，Tree以及Tree的单击事件。

ACMenuTreeStore.js

Ext.define('Tesz.App.Stores.ACMenuTreeStore', {

```
    extend: 'Ext.data.TreeStore',
```
```
    alias: 'widget.acmenutreestore',
```
```
    proxy: {
```
```
        type: 'ajax',
```
```
        url: 'JGetParentPurviews'
```
```
    },
```
```
    sorters: {
```
```
            property: 'text',
```
```
            direction: 'ASC'
```
```
        }
```
```
});
```

ACMenuTreeStore继承自Ext.data.TreeStore，可以看出这里没有定义TreeStore的Model属性，因为只要获取符合TreeStore数据格式的Json字符串就可以了，而无需定义Fields。

AppMenuTree.js

Ext.require('Tesz.App.Stores.ACMenuTreeStore');

```
Ext.define('Tesz.App.AppMenuTree', {
```
```
    extend: 'Ext.tree.Panel',
```
```
    alias: 'widget.appmenutree',
```
```
    id: 'MAINMENU',
```
```
    region: 'west',
```
```
    autoScroll: true,
```
```
    useArrows: true,
```
```
    width: 220,
```
```
    border: 0,
```

    store: Ext.create('Tesz.App.Stores.ACMenuTreeStore'),

```
    rootVisible: false,
```
```
    root: {
```
```
        id: 'root_node',
```
```
        nodeType: 'async',
```
```
        text: 'All Menus'
```
```
    },
```
```
    listeners: {
```

        'itemclick': function (view, record) {

            var leaf = record.get('leaf');

```
            if (leaf) {
```

                var id = record.get('id');

                var text = record.get('text');

                var tabPanel = Ext.getCmp('MAINPANEL');

                var tab = tabPanel.getComponent(id);

```
                if (!tab) {
```

                    tabPanel.add(Ext.create('Tesz.App.Panels.' + id)).show();

```
                }
```

                tabPanel.setActiveTab(tab);

```
            }
```
```
            else {
```

                var expand = record.get('expanded')

```
                if (expand) {
```

                    view.collapse(record);

```
                }
```
```
                else {
```

                    view.expand(record);

```
                }
```
```
            }
```
```
        }
```
```
    },
```
```
    dockedItems: [{
```
```
        xtype: 'toolbar',
```
```
        items: [{
```
```
            iconCls: 'x-expand-all',
```

            tooltip: 'expand all nodes',

```
            handler: function () {
```

                Ext.getCmp('MAINMENU').expandAll();

```
            }
```
```
        }, {
```
```
            iconCls: 'x-collapse-all',
```

            tooltip: 'collapse all nodes',

```
            handler: function () {
```

                Ext.getCmp('MAINMENU').collapseAll();

```
            }
```
```
        }]
```
```
    }]
```
```
});
```

AppMenuTree继承自Ext.tree.Panel，第1级node默认属性rootVisible: false设置为隐藏；通过Tree的"itemclick”事件来动态加载ACMainPanel的Tab，先判断node的"leaf”属性，如果为true则执行加载，如果为false则执行expand或collapse；所有的Tab的自定义组件都在Components/Panels文件夹，加载实现方法为tabPanel.add(Ext.create('Tesz.App.Panels.' + id)).show()；如何来做到正确对应呢，可以参考事先定义的3个Model类，JSystem_Purview_Parent与JSystem_Purview_Child的"id”，也就是tree的nodeId，对应System_Purview表的PurviewKey字段，而所需加载的Tab，js组件文件名称与id都都定义为PurviewKey，这样就做到了一一对应；

CTRY.js

```
Ext.define('Tesz.App.Panels.CTRY', {
```
```
    alias: 'widget.ctry',
```
```
    extend: 'Ext.Panel',
```
```
    id: 'CTRY',
```
```
    title: 'Country',
```
```
    closable: true,
```
```
    autoLoad: {
```
```
        url: 'CountryPage',
```
```
        scripts: true
```
```
    },
```
```
    listeners: {
```
```
        resize: function () {
```

            var main = Ext.getCmp('MAINPANEL');

            var grid = Ext.getCmp('COUNTRYGRID');

```
            if (grid)
```

                grid.setWidth(main.getWidth()-5);

```
        }
```
```
    }
```
```
});
```

至此，主界面部分就基本完成了。费了好大的劲，研究调试好久才取得这样的结果，希望能和同僚们分享一下经验。

转载于:https://www.cnblogs.com/leowuang/archive/2011/11/01/2231485.html

利用指针间隔的输出字符串中的字符

Java中Httpsession是如何实现的?

《SpringMVC从入门到放肆》十二、SpringMVC自定义类型转换器

洛谷 P1616 疯狂的采药

【BW系列】SAP 讲讲BW/4 HANA和BW on HANA的区别

Shell的一些基本概念

剑指Offer——二叉搜索树的第K个节点

python 排序桶排序

ubuntu之路——day7.2 regularization

查看mysql数据库大小

Java程序员编程性能优化必备的34个小技巧

HTTP/1.1-HTTP/2.0-HTTP/3.0-HTTPS

DP总结

全网最详细python3包管理工具教程-pip

nginx 配置简单的静态页面

[笔记] php常见简单功能及函数

Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？

flutter的key在widget list的作用以及必要性

Golang-长连接-状态推送

go语言学习初探（一）

HTTP那些事

HTTP--网络协议分层，http历史(二)

iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码...

Protobuf3语言指南

Solarized Scheme

从零开始的webpack生活-0x009：FilesLoader装载文件

基于游标的分页接口实现

浅谈web中前端模板引擎的使用

通过npm或yarn自动生成vue组件

通信类

说说我为什么看好Spring Cloud Alibaba

#我与Java虚拟机的故事#连载05：Java虚拟机的修炼之道

（16）Reactor的测试——响应式Spring的道法术器

(2022 CVPR) Unbiased Teacher v2

（5）STL算法之复制

（三）Hyperledger Fabric 1.1安装部署-chaincode测试

（学习日记）2024.03.12：UCOSIII第十四节：时基列表

(原創) 博客園正式支援VHDL語法著色功能 (SOC) (VHDL)

（转）机器学习的数学基础（1）--Dirichlet分布

(转载)CentOS查看系统信息|CentOS查看命令

（总结）Linux下的暴力密码在线破解工具Hydra详解

.net core 6 redis操作类

.NET Core SkiaSharp 替代 System.Drawing.Common 的一些用法

.NET 实现 NTFS 文件系统的硬链接 mklink /J（Junction）

.NET使用HttpClient以multipart/form-data形式post上传文件及其相关参数

:如何用SQL脚本保存存储过程返回的结果集

[AIGC] 开源流程引擎哪个好，如何选型？

[C#] 基于 yield 语句的迭代器逻辑懒执行

[c#基础]值类型和引用类型的Equals，==的区别

[IE技巧] IE8中HTTP连接数目的变化

[LeetBook]【学习日记】数组内乘积

[leetcode]_Symmetric Tree

[NOIP2014] 提高组洛谷P1941 飞扬的小鸟

[Python] 输入与输出

[Python进阶] 获取计算机相关信息：Psutil

相关文章：