设计/图形架构师 CSS XML Ajax HTML 中级开发 Javascript .NET Visual Basic C#

高级 TreeView v1.6

NavnathKale

4.94/5 (67投票s)

2010年3月8日

CPOL

6分钟阅读

183559

8945

简单但功能丰富的 TreeView 控件。

下载源代码 - 434.79 KB

引言

本文介绍了JavaScript开发的TreeView控件的使用。正如大家可能都熟悉.NET Framework提供的ASP.NET TreeView控件一样，该控件实际上试图在编码风格上模仿它。因此，那些使用过ASP.NET TreeView控件的开发人员会发现它很容易实现。

实际上，有很多此类控件可以免费使用，但我总是觉得使用我自己开发的控件更方便、更顺手。

特点
语法简单易懂易于配置不依赖于其他库交互式属性和操作事件线条显示/隐藏选项多种线条样式可供选择使用箭头键导航（效果极佳！！！）^1.2 内部维护表格结构^1.5 内置AJAX请求支持 ^1.6	主题支持有用的属性跨浏览器支持节点更新指示支持（最适合AJAX实现）支持HTML（扁平化UL，LI）和JSON数据源^1.5 可编辑节点文本^1.5 支持转换为JSON^1.5 支持转换为XML^1.6

使用控件

使用此控件就像使用.NET TreeView控件一样简单。该控件包含两个对象：TreeView和TreeNode。
以下示例代码说明了简单的用法

var TreeView1 = new TreeView();
TreeView1.SetContainer('divTreeView');
TreeView1.PathSeparator = '\\'; 
         
var nodeFevorites = TreeView1.Nodes.Add1('IE Fevorites', 'IE Fevorites');
         
var nodeCodeProject = new TreeNode('Code Project');
nodeCodeProject.SetNavigationURL('https://codeproject.org.cn/Members/Navnath-R-Kale');
nodeCodeProject.SetImageURL('images/codeproject.JPG');
         
nodeFevorites.ChildNodes.Add(nodeCodeProject);
nodeFevorites.ChildNodes.Add(new TreeNode
	('Google','Google','http://www.google.co.in','_target'));
         
TreeView1.BeforeExpand = function(sender, e){
    if(e.ChildNodes.length == 1 && e.ChildNodes[0].Value == '#'){
        e.BeginUpdate();
        e.ChildNodes.Clear(); 
        //Node processing.... 
    };
            
    return true;
};
         
TreeView1.SelectedNodeChanging = function(sender, e){
    //Some checking on node sent 'e' as parameter.
    //Return true to process node selection else false to stop selection node
    return true;
};

TreeView 成员

构造函数

名称	描述
`树视图`	初始化`TreeView`对象的新的实例

方法

名称	描述
`CSSName`^{已更改 1.5}	获取或设置用于树视图控件的CSS类名称（默认为`treeview`）。将其用作主题功能
`SelectedValuePath`	返回当前选中节点的路径值
`ExpandAll`	展开所有树节点
`CollapseAll`	折叠所有树节点
`FindNode`	从提供的路径值返回节点
`ShowLines`	获取或设置一个值，该值指示是否在`treeview`控件的树节点之间绘制线条
`LineStyle`	获取或设置`treeview`控件的线条样式
`Visible`	获取或设置一个值，该值指示控件及其所有子控件是否可见
`SetContainer`^{新增 1.2}	设置包含`treeview`控件的对象
`Container`^{已更改 1.2}	获取包含`treeview`控件的对象
`ToJSON`^{新增 1.5}	获取整个`treeview`的JSON对象
`ToXML`^{新增 1.6}	获取整个`treeview`的XML格式字符串
`BeginRequest`^{新增 1.6}	启动`TreeView`控件的异步请求

属性

名称	描述
`PathSeparator`	获取或设置树节点路径使用的分隔符`string`（默认为`\`）
`ToggleOnSelect`	获取或设置启用选中节点时切换展开/折叠的值
`SelectedNode`	获取或设置`treeview`控件中当前选中的树节点
`节点`	获取分配给`treeview`控件的树节点集合。请参阅`TreeNode`数组对象详情。
`UpdateImageURL`	获取或设置用于显示节点更新的图像URL的值
`EnableKeyNavigation`^{新增 1.2}	启用或禁用通过箭头键导航所有节点。此属性可以被单个节点通过其`AllowKeyNavigation`属性覆盖。
`EditLabel`^{新增 1.5}	获取或设置一个值，该值指示树节点的标签文本是否可编辑

事件

名称	描述
`SelectedNodeChanging`	在选中节点之前发生
`SelectedNodeChanged`	在选中节点之后发生
`BeforeCollapse`	在折叠树节点之前发生
`BeforeExpand`	在展开树节点之前发生
`AfterCollapse`	在折叠树节点之后发生
`AfterExpand`	在展开树节点之后发生
`BeforeLabelEdit`^{新增 1.5}	在编辑树节点标签文本之前发生
`AfterLabelEdit`^{新增 1.5}	在编辑树节点标签文本之后发生
`EndRequest`^{新增 1.6}	检索通过`BeginRequest`方法发送的请求的响应

扩展成员

名称	描述
`ParseHTML`^{已更改 1.5}	此方法调用接受UL元素作为数据源，然后将其解析为新的`treeview`对象。
`ParseJSON`^{新增 1.5}	此方法调用接受JSON对象作为数据源，然后将其解析为新的`treeview`对象。
`ParseXML`^{新增 1.6}	此方法调用接受XML字符串或XML DOC对象作为数据源，然后将其解析为新的`TreeView`对象。

TreeNode 成员

构造函数

名称	描述
`TreeNode`	初始化`TreeNode`对象的新的实例

方法

名称	描述
`TreeView`^{新增 1.5}	获取树节点所属的父`treeview`
`IsExpanded`	获取一个值，该值指示树节点是否处于展开状态
`GetNavigationURL`^{已更改 1.5}	获取节点单击时导航到的URL
`GetTarget`^{已更改 1.5}	获取用于显示与节点关联的网页内容的窗口或框架
`SetNavigationURL`	设置节点导航URL和目标，以便在单击时导航到提供的URL
`SetTarget`^{新增 1.5}	设置节点目标，以便在单击时导航到提供的URL
`SetImageURL`	设置节点的图像
`Select`	选择节点
`IsSelected`	获取一个值，该值指示树节点是否处于选中状态
`ValuePath`	获取从根节点到当前节点的路径
`Toggle`	在节点展开和折叠状态之间切换当前状态
`展开后`	展开节点
`Collapsed`	折叠节点
`查找`	从提供的路径值查找节点。可以调用它来查找子节点。
`BeginUpdate`	此方法使用`treeview`控件的`UpdateImageURL`属性指示节点正在更新。请参阅提供的快照中的文件夹2.1.2（使用begin update方法）。
`EndUpdate`	此方法在调用`BeginUpdate()`后显示节点的正常图像
`信号强度`	获取树节点在`TreeView`控件中的零基深度
`Index`^{新增 1.2}	获取节点级别上树节点的零基索引
`BeginEdit`^{新增 1.5}	启动树节点标签的编辑
`CancelEdit`^{新增 1.5}	取消树节点标签的编辑
`EndEdit`^{新增 1.5}	结束树节点标签的编辑
`IsEditing`^{新增 1.5}	如果节点处于编辑模式，则返回`true`
`WordWrap`^{新增 1.5}	获取或设置环绕带空格的长节点文本的值
`SetText`^{新增 1.5}	设置节点文本
`SetValue`^{新增 1.5}	设置节点的值
`ToJSON`^{新增 1.5}	获取包含子节点的整个节点的JSON对象
`ToXML`^{新增 1.6}	获取包含子节点的整个节点的XML格式字符串

属性

名称	描述
`文本`	获取或设置在树节点标签中显示的文本
`值`	获取或设置一个非显示的、用于存储关于节点的任何附加数据的任何值
`ChildNodes`	获取分配给`treeview`控件的树节点集合。请参阅`TreeNode`数组对象详情。
`Parent`	获取当前节点的父节点
`AllowKeyNavigation`^{新增 1.2}	启用或禁用通过箭头键导航节点

扩展成员

名称	描述
`ParseJSON`^{新增 1.5}	此方法调用接受JSON对象作为数据源，然后将其解析为新的treenode对象。
`ParseXML`^{新增 1.6}	此方法调用接受XML格式字符串或XML DOC对象作为数据源，然后将其解析为新的`TreeNode`对象。

TreeNode 数组

Add、Add1、AddAt、AddAt1、Remove和RemoveAt方法允许您从数组中添加和删除单个树节点。Clear方法从数组中删除所有节点。

更新：非常感谢大家的反馈和建议。我重新组织了此控件，并添加了许多可能引起您兴趣的内容。欢迎更多建议。:) 如果您喜欢，请投票并评论。

历史

2010年3月8日 – 版本1.0发布

首次发布

2010年3月14日 – 版本1.2发布

添加了键盘导航支持
添加了更多事件和属性
修复了次要UI问题

2010年4月5日 – 版本1.5发布

代码优化
添加了节点标签编辑功能
添加了更多关于主题的示例
将内部结构从UL、LI更改为table元素
添加了更多事件和属性
修复了次要UI问题

2010年4月9日 – 版本1.6发布

添加了XML数据源支持
添加了内置Ajax请求支持
添加了更多事件和属性