ExtJs之TreePanel篇

最新推荐文章于 2023-03-20 16:52:51 发布

KenshinCui

最新推荐文章于 2023-03-20 16:52:51 发布

阅读量9.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript ExtJS进阶学习文章标签： extjs stylesheet string function border html

本文链接：https://blog.youkuaiyun.com/kenshincui/article/details/5972683

Javascript 同时被 2 个专栏收录

16 篇文章

订阅专栏

ExtJS进阶学习

13 篇文章

订阅专栏

本文详细介绍了ExtJS框架中的树组件TreePanel的使用方法，包括静态树和动态树的创建过程，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ExtJs系列的东西好久没有写了（最初想一气呵成的，可是中间有些工作，就给耽误了），今天我们继续看Ext中的TreePanel。有人说即使为了"树"也要学习Ext，足见"树"在Ext中是何等的重要。事实上也确实如此，在Ext中使用"树"可以像在WinFrom中一样操作树形结构。

静态树

现在我们先看看Ext中最简单的静态树。

<html> <head> <link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script> <mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="divTreePanel"></div> <div id="divTreePanelContent" style="display:none" mce_style="display:none"> ExtJs学习，欢迎大家多多交流，共同进步！cmj studio！ </div> </body> </html>

看一下效果。

上面我基本上对每个配置属性进行了说明，值得注意的就是loader配置属性，它的功能就是加载数据，虽然从上面还看不到它的作用（因为我们的是静态树，数据直接写在了root中），不过后面我们就会看到它的作用。接着就是AsyncTreeNode，从字面可以看出它是一个异步节点，也就是说它的数据是通过异步加载的（注意这里的异步指的是Ajax方式加载，是树级别的。后面的章节中我们会说节点级别的异步加载，可以点击某个节点就只加载它下面的节点其它节点不加载）。最后我觉得要注意的就是节点的结构，我们虽然这里是静态构造的，后面我们的动态树在构造的时候也是这样的结构。

动态树

静态树简单但是却不太实用，实际开发过程中更多的还是动态树，下面我们就一块看一下动态树的使用，这里再明确说明一下，我这里不仅仅"树"的数据是动态从后台获取的，而且还可以根据条件显示不同的"树"结构，这也是很多朋友经常遇到的情况，所以直接在这个例子里给出。注意这里传参的方式，我注释的很清楚，很多朋友之所以不会做不是因为别的就是因为不会传参。

前台代码

<html> <head> <link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script> <mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .mnAddProduct { background-image:url(ext/resources/images/default/tree/folder.gif) !important; } </style> </head> <body> <div id="divTreePanel"></div> <div id="divTreePanelContent" style="display:none" mce_style="display:none"> ExtJs学习，欢迎大家多多交流，共同进步！cmj studio！ </div> </body> </html>

后台代码

using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Collections.Generic; using System.Web.Script.Serialization; using Cmj.MyData; namespace TreePanel { public partial class _Default : System.Web.UI.Page { DBHelper dbHelper = new DBHelper();//自定义数据库操作类，负责数据库基本操作 protected void Page_Load(object sender, EventArgs e) { string type = ""; if (!string.IsNullOrEmpty(Request["type"])) { type = Request["type"]; } if (type == "dynamicLoadTreePanel") { string supplierName=""; supplierName=Request["supplierName"]; Response.Write(GetProductBySupplier(supplierName)); } Response.Flush(); Response.End(); } /// <summary> /// 按供货商名称构造树形结构 /// </summary> /// <param name="supplierId"></param> /// <returns></returns> private string GetProductBySupplier(string supplierName) { List<Node> nodes = new List<Node>();//定义所有节点集合 string sqlCategory = "SELECT DISTINCT dbo.Categories.CategoryID,CategoryName FROM dbo.Products INNER JOIN dbo.Categories ON dbo.Products.CategoryID = dbo.Categories.CategoryID INNER JOIN dbo.Suppliers ON dbo.Products.SupplierID=dbo.Suppliers.SupplierID WHERE dbo.Suppliers.CompanyName LIKE '%"+supplierName+"%' "; DataTable dtCategory = dbHelper.GetDataTable(CommandType.Text, sqlCategory); string sqlProduct = ""; DataTable dtPorduct = null; Node nodesOne = null;//定义一级节点，显示商品种类 Node nodesTwo = null;//定义二级节点，显示商品名称 foreach (DataRow dr in dtCategory.Rows) { nodesOne = new Node(); nodesOne.id = "Category_" + dr["CategoryID"].ToString();//注意id不能够重复，否则造成折叠和展开出问题 nodesOne.text = dr["CategoryName"].ToString(); nodesOne.leaf = false;//不是叶子节点 sqlProduct = "SELECT dbo.Products.ProductID,dbo.Products.ProductName FROM dbo.Products INNER JOIN dbo.Suppliers ON dbo.Products.SupplierID = dbo.Suppliers.SupplierID WHERE dbo.Products.CategoryID='" + dr["CategoryID"].ToString() + "' AND dbo.Suppliers.CompanyName LIKE '%" + supplierName + "%'"; dtPorduct = dbHelper.GetDataTable(CommandType.Text, sqlProduct); foreach (DataRow drProduct in dtPorduct.Rows) { nodesTwo = new Node(); nodesTwo.id = "Product_" + drProduct["ProductID"].ToString(); nodesTwo.text = drProduct["ProductName"].ToString(); nodesTwo.leaf = true; nodesOne.children.Add(nodesTwo); } nodes.Add(nodesOne); } JavaScriptSerializer jsSerialier = new JavaScriptSerializer();//序列化对象 return jsSerialier.Serialize(nodes); } } }

using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Collections.Generic; namespace TreePanel { public class Node { public string id; public string text; public bool leaf; public List<Node> children = new List<Node>(); } }

默认显示

输入条件搜索（根据供货商的公司名称，搜索出说有相关的产品）。

这里给大家提供一种构造树的简单的方法，我们知道对于树结构来说有时候父子关系不太好循环，而且要构造json，这里我们定义了一个Node类，作为一个节点它除了有id、text、leaf属性外还有children属性，而children属性是一个节点集合，这样一来我们只需要构造Node对象然后利用.Net提供的JavaScriptSerializer类进行序列化就可以了（从这也可以看出面向对象的优点）。

今天就到这里，后面我们还会继续跟大家一块学习更多关于TreePanel的东西。