Ext.Net学习笔记22:Ext.Net Tree 用法详解-阿里云开发者社区

开发者社区> 老朱教授> 正文

Ext.Net学习笔记22:Ext.Net Tree 用法详解

简介:
+关注继续查看

image

上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下:

<ext:TreePanel runat="server">
    <Root>
        <ext:Node Text="根节点" Expanded="true">
            <Children>
                <ext:Node Text="节点1" Expanded="true">
                    <Children>
                        <ext:Node Text="节点11" Leaf="true"></ext:Node>
                        <ext:Node Text="节点12" Leaf="true"></ext:Node>
                    </Children>
                </ext:Node>
                <ext:Node Text="节点2" Leaf="true"></ext:Node>
                <ext:Node Text="节点3" Leaf="true"></ext:Node>
                <ext:Node Text="节点4" Leaf="true"></ext:Node>
            </Children>
        </ext:Node>
    </Root>
</ext:TreePanel>

这是一个使用标记来创建的树,我们还可以使用服务器端代码来创建,代码如下:

private void createTree()
{
    TreePanel tree = new TreePanel();
    tree.Root.Add(new Node() { Text = "根节点", Expanded = true });
    tree.Root[0].Children.Add(new Node() { Text = "节点1", Expanded = true });
    tree.Root[0].Children[0].Children.Add(new Node() { Text = "节点11", Leaf = true });
    tree.Root[0].Children[0].Children.Add(new Node() { Text = "节点12", Leaf = true });
    tree.Root[0].Children.Add(new Node() { Text = "节点2", Leaf = true });
    tree.Root[0].Children.Add(new Node() { Text = "节点3", Leaf = true });
    tree.Root[0].Children.Add(new Node() { Text = "节点4", Leaf = true });

    winTreeContainer.Add(tree);
}

异步加载树节点

在上面的代码中,我们都是一次性加载了所有节点,虽然在开发过程中比较方便,但与异步加载来说更加的耗资源,尤其是当树节点比较多的时候。

接下来让我们来构建一个异步加载的树。

<ext:TreePanel runat="server">
    <Root>
        <ext:Node Text="根节点" NodeID="root" Expanded="false">
        </ext:Node>
    </Root>
    <Store>
        <ext:TreeStore runat="server">
            <Proxy>
                <ext:AjaxProxy Url="tree-handler.ashx"></ext:AjaxProxy>
            </Proxy>
        </ext:TreeStore>
    </Store>
</ext:TreePanel>

在树的定义中南,我们为根节点添加了NodeID,然后为Tree添加了TreeStore,TreeStore通过ajax代理获取数据,获取数据的url为tree-handler.ashx处理程序,我们的处理程序代码为:

public void ProcessRequest(HttpContext context)
{
    //得到node id
    string nodeId = context.Request["node"];
    
    //根据node id 进行处理
    NodeCollection nodes = new NodeCollection();
    nodes.Add(new Node() { Text = "节点1" });
    nodes.Add(new Node() { Text = "节点2" });
    nodes.Add(new Node() { Text = "节点3" });
    nodes.Add(new Node() { Text = "节点4" });

    string responseString = nodes.ToJson();
    context.Response.Write(responseString);
    context.Response.End();
}

在处理方法中,最主要的是第一句,从请求中得到node id,拿到node id之后,我们可以根据node id进行子节点的获取操作,我们的代码中是为了进行演示,所以并没有获取相应子节点的操作。

如果是在MVC中,我们可以使用StoreResult来作为Action的数据返回类型。

树节点的自定义属性

通常情况下,树节点所包含的的信息并不是我们完整的数据,我们需要添加一些自定义的属性,Ext.Net为我们提供这种功能:

第一步,我们需要在TreeStore中添加一个Model,这个Model中的字段就是我们自定义的属性。

<Store>
    <ext:TreeStore runat="server">
        <Model>
            <ext:Model runat="server">
                <Fields>
                    <ext:ModelField Name="CreateUser" Type="String"></ext:ModelField>
                </Fields>
            </ext:Model>
        </Model>
        <Proxy>
            <ext:AjaxProxy Url="tree-handler.ashx"></ext:AjaxProxy>
        </Proxy>
    </ext:TreeStore>
</Store>

第二步,在生成节点的时候为我们自定义属性赋值。

public void ProcessRequest(HttpContext context)
{
    //得到node id
    string nodeId = context.Request["node"];

    //根据node id 进行处理
    NodeCollection nodes = new NodeCollection();
    var node = new Node() { Text = "节点1" };
    node.CustomAttributes.Add(new ConfigItem("CreateUser", "qeefee"));

    nodes.Add(node);

    string responseString = nodes.ToJson();
    context.Response.Write(responseString);
    context.Response.End();
}

第三步,在前台代码中使用自定义属性

我们在树的底部添加一个panel,用来显示自定义的星系,然后添加一个事件,在节点选中的时候来更新panel的显示

<DockedItems>
    <ext:Panel runat="server" Dock="Bottom" Height="30">
        <Tpl>
            <Html>
                <p>创建人:{CreateUser}</p>
            </Html>
        </Tpl>
    </ext:Panel>
</DockedItems>
<Listeners>
    <ItemClick Handler="MyApp.showDetail.call(#{treeDynamic}, record)"></ItemClick>
</Listeners>

事件的处理方法如下:

var MyApp = {
    showDetail: function (record) {
        var panel = this.getDockedItems("panel[dock=bottom]")[0];
        panel.update(record.data);
    }
};

在跟踪事件处理过程中,我们可以看到自定义属性的值:

image

它是和树节点的其他属性一起保存的,所以我们在使用record的时候,还可以方便的使用树节点的其他属性。

这个示例的效果图如下:

image

多列树(TreeGrid)

TreeGrid的效果如下图:

image

类似于GridPanel,有标题、多列的样式等。

又不同于GridPanel,因为它可以像树一样显示一个展开、折叠图标。

我们来看一下这个例子的代码:

<ext:TreePanel runat="server" ID="treeGrid">
    <Store>
        <ext:TreeStore ID="TreeStore1" runat="server">
            <Model>
                <ext:Model ID="Model1" runat="server">
                    <Fields>
                        <ext:ModelField Name="CreateUser" Type="String"></ext:ModelField>
                    </Fields>
                </ext:Model>
            </Model>
            <Proxy>
                <ext:AjaxProxy Url="tree-handler.ashx"></ext:AjaxProxy>
            </Proxy>
        </ext:TreeStore>
    </Store>
    <ColumnModel>
        <Columns>
            <ext:TreeColumn runat="server" Text="名称" DataIndex="text"></ext:TreeColumn>
            <ext:Column runat="server" Text="创建人" DataIndex="CreateUser"></ext:Column>
        </Columns>
    </ColumnModel>
    <Root>
        <ext:Node Text="根节点" NodeID="root" Expanded="false">
        </ext:Node>
    </Root>
</ext:TreePanel>

TreePanel的Store与之前例子相同,Root的配置也与之前的例子相同,唯一不同的是TreePanel中多了一个ColumnModel节点,这里面的配置和GridPanel的ColumnModel相同,TreeColumn列用来显示树的列,用起来很方便。

本文由起飞网原创首发,转载请注明出处。点击访问更多Ext.Net教程

原文链接:Ext.Net学习笔记22:Ext.Net Tree 用法详解




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/p/3568377.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java多线程高并发学习笔记(二)——深入理解ReentrantLock与Condition
锁的概念 从jdk发行1.5版本之后,在原来synchronize的基础上,增加了重入锁ReentrantLock。 本文就不介绍synchronize了,有兴趣的同学可以去了解一下,本文重点介绍ReentrantLock。
1073 0
[重构 Swift 中单例的用法](Refactoring singleton usage in Swift)
本文讲的是[重构 Swift 中单例的用法](Refactoring singleton usage in Swift),在软件开发中,单例模式有足够的原因被广泛的不推荐和不赞成。它们难以测试或者说是不可能测试,当它们在其他类中隐式调用时会使你的代码库混乱,让代码难以复用。
1010 0
regsvr32 注册.dll的用法
在cmd窗口或者开始→运行中输入下面两个命令:Regsvr32 C:\Program Files (x86)\Environment.dll 或 Regsvr32 C:\\Program Files (x86)\\Environment.dll均提示下面的错误:RegSvr32 [Content] 模块“C:\ProgramFiles(x86)\Environment.dll”加载失败。
1008 0
Renascence使用方法
Renascence使用方法 下层库的适配 类型 下层库所有向Renascence架构提供的函数,其输入输出都必须给一个对应的继承于IStatusType的类,用于读取、保存、映射、释放该类型。 /*Basic API*/ class IStatusType { public: IStatusType(const std::string name)
915 0
Spring.Net Aop 学习
浅析Spring.net 中的Aop使用 Spring.NET 中的 AOP .NET中AOP的几种实现方案 Spring.NET学习笔记12——面向切面编程(基础篇) Level 300
480 0
+关注
3546
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载