天天看点

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

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

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

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

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

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

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

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

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

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

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

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

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

事件的处理方法如下:

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

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

这个示例的效果图如下:

TreeGrid的效果如下图:

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

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

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

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

2021年9月 北京、西安两地,高薪诚聘 .NET工程师,请私信联系!

如果认为此文对您有帮助,别忘了支持一下哦!

声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。转载时请在文章页面明显位置给出原文链接。