Ext.Net学习笔记22:Ext.Net Tree 用法详解
上面的图片是一个简单的树,使用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); } };
在跟踪事件处理过程中,我们可以看到自定义属性的值:
它是和树节点的其他属性一起保存的,所以我们在使用record的时候,还可以方便的使用树节点的其他属性。
这个示例的效果图如下:
多列树(TreeGrid)
TreeGrid的效果如下图:
类似于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列用来显示树的列,用起来很方便。
本文由起飞网原创首发,转载请注明出处。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。