如何实现Telerik TreeView控件的多层展开，默认选中，双击事件等功能_weixin_34249678的博客

相关文章推荐

逃跑的墨镜 · java 匿名函数知识点有哪些？ - 知乎· 1 年前 ·

坏坏的丝瓜 · 揭秘反射真的很耗时吗，射10万次用时多久 - 掘金· 1 年前 ·

文武双全的板栗 · 【资源】DeepSORT原理及代码讲解电子书 ...· 1 年前 ·

直爽的领结 · Qt网络编程：QWebSocket发送文件_ ...· 1 年前 ·

近段时间，我所接手的一个项目是.Net MVC架构，控件大部分是使用Telerik的。由于项目中有很多数据是需要树形结构来展示的，之前项目是通过jstree控件来实现。jstree虽然扩展性很好，很多树的操作功能都可以实现，但是，要实现起来的代码比较多，也有些复杂。于是我就决定尝试采用Telerik的treeView来代替。

Telerik Extensions for ASP.NET MVC Demo : http://demos.telerik.com/aspnet-mvc/

看了Demo和相关帮助文档，觉得Telerik的TreeView的实现方便多了，写几行代码就可以完成一棵Tree，不过做着做着，才发现，TreeView虽然有展开(Expand(node))节点的方法，但并没有发现选中方法和双击事件。

View Code

The available client-side methods are:
treeview.expand(node) - expands a treeview node.
treeview.collapse(node) - collapses a treeview node.
treeview.enable(node) - enables a treeview node.
treeview.disable(node) - disables a treeview node.
treeview.getItemText(node) - gets the text of a treeview node.
treeview.getItemValue(node) - gets the value of a treeview node. If the value is not set, returns the node text.
treeview.nodeCheck(node, isChecked) - checks/unchecks a treeview node that has a checkbox, depending on the value of isChecked.
treeview.append(node, referenceNode) - appends a new node or moves an existing one to referenceNode.
treeview.insertBefore(node, referenceNode) - inserts a new node or moves an existing one before referenceNode.
treeview.insertAfter(node, referenceNode) - inserts a new node or moves an existing one after referenceNode.

至论坛上找也找不到，难道这就是Telerik控件的一些局限，百思不得其解。不过，后来我想了想，既然树都出来了，其他的事件或方法应该可以通过jquery来实现吧，毕竟Telerik的客户端也是通过Jquery集成的。于是一步步尝试，终于将这些问题解决了。

以下是实现的方法，望各位多指教！

普通的展开很简单，如果你想展开现有树中的某个节点，只需要Expand(node); node为树中的Li（Jquery elements）,也可以直接是jQuery selector，如：

var item = $("#OrgTlrTreeView").find(".t-input[name='itemValue'][value^='" + InputValue + "']").closest("li");
                treeview.expand(item);
var treeview = $('#ProductsTreeView').data('tTreeView');
treeview.expand("li:first");

但是，一般的树都有默认打开多层级的节点功能，这个实现就有些难度。需要用到一层层展开，就要利用TreeView自身的OnDataBound事件，同时也要结合后台，将要展开的那级ID的所有父级ID也一并查出来，输出到页面。以下我将以一个组织树来做例子。

组织树页面代码如下：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%= Html.Telerik().TreeView()
                    .Name("OrgTlrTreeView")
        .DataBinding(
                 dataBinding =>
                     dataBinding.Ajax().Enabled(true).Select("GetOrgTlrTreeViewNodes", "Util");
                ).ClientEvents(events=>{
                    events.OnSelect("SelectOrgTlrTreeViewItem").OnLoad("changeHeigh").OnDataBound("OrgTlrTreeOnDataBound");
<div class='stander-button-div' id='createButtonDiv'>
    <input type="button" value="确定" id="orgSelectSubmitBtn" οnclick="returnOrgTlrTreeValue(this);" />
    <input type="button" value="关闭" οnclick="CloseOrgTlrTreeWindow()" />
<script type="text/javascript">
    var selectOrgTlrTreeNodeIdStr = '<%=ViewData["DefaultExpandNodeIds"] %>';
    var selectOrgTlrTreeNodeArray = selectOrgTlrTreeNodeIdStr.split('@');
    var expandOrgTlrTreeLevel = selectOrgTlrTreeNodeArray.length - 1;
    $(document).ready(function () {
        //类型双击事件
        $("#OrgTlrTreeView .t-in").live("dblclick", function () {
            var ee = new Object();
            ee.item = $(this).closest("li");
            SelectOrgTlrTreeViewItem(ee);
            returnOrgTlrTreeValue(document.getElementById("orgSelectSubmitBtn"));
</script>

其中ViewData["DefaultExpandNodeIds"]是要展开的ID串，格式是“Children ID@Parent Id@Parent ID.....”

expandOrgTlrTreeLevel则是要展开的层级数。此页面中写出了OnDataBound("OrgTlrTreeOnDataBound")，但并未在此页面实现此事件方法的代码，OrgTlrTreeOnDataBound方法在调用页面实现，具体如下：

function OrgTlrTreeOnDataBound() {
            var treeview = $('#OrgTlrTreeView').data('tTreeView');
            if (expandOrgTlrTreeLevel == 0) {
                //Selete Node selectNodeArray[0]
                var tempSelectId = selectOrgTlrTreeNodeArray[0];
                if (tempSelectId != "" && tempSelectId != null) {
                    var selectSpan = $("#OrgTlrTreeView").find(".t-input[name='itemValue'][value^='" + tempSelectId + "']").prevUntil("t-in")[0];
                    $(selectSpan).attr("class", "t-in t-state-selected");
                //Reset Level
                expandOrgTlrTreeLevel = selectOrgTlrTreeNodeArray.length - 1;
            else {
                var item = $("#OrgTlrTreeView").find(".t-input[name='itemValue'][value^='" + selectOrgTlrTreeNodeArray[expandOrgTlrTreeLevel] + "']").closest("li");
                treeview.expand(item);
                expandOrgTlrTreeLevel--;
 if (expandOrgTlrTreeLevel == 0)里是实现选中功能的，下面会讲，先看else部分代码。else里是通过所给的层级ID来查找对应的LI 元素，通过expand(item)方法将其展开，因为展开又会触发TreeView的OnDataBound事件，所以，你所传入的节点值ViewData["DefaultExpandNodeIds"]都会一一展开（当然，你的顺序必须符合树的层级顺序才有用）。这样默认展开多级节点的功能就实现了。 
 　　默认选中这个有些坑爹，其实选中表面上只是样式有所变化而已。你打开一个TreeView，选中某一数据项，就会发现，选中标签中的只是多了一个类名而已（class="t-in t-state-selected"），所以我们只需要在目标节点改变Span的Class值得就可以了。如在上述方法（OrgTlrTreeOnDataBound）图中的if (expandOrgTlrTreeLevel == 0)代码中就是实现这个功能。当然，这只是一个表面上的选中，内在的数据值中，记得也要作相应的改变。如将默认选中节点的值ID，赋给Hidden。 
 　　对于TreeView双击事件，Telerik TreeView中对节点的双击事件默认是实现展开或折叠节点的动作。不过，如果这个树结构是作为一个选择控件，将这个双击事件变成确定选择的操作，会变得更加合适。 
 虽然TreeView不提供双击事件，但可以通过JQuery事件来进行绑定。代码如下： 
  $(document).ready(function () {
        //类型双击事件
        $("#OrgTlrTreeView .t-in").live("dblclick", function () {
            var ee = new Object();
            ee.item = $(this).closest("li");
            SelectOrgTlrTreeViewItem(ee);
            returnOrgTlrTreeValue(document.getElementById("orgSelectSubmitBtn"));
 $("#OrgTlrTreeView .t-in")就是树中各个节点的文字标签Span，将这些Span统统绑定上"dblclick"事件，然后将节点的选择实现代码写入其中就OK了。 
 returnOrgTlrTreeValue（obj）是确定按钮的点击方法，代码在调用页面实现，主要是实现将树中的选择结果赋给Hidden控件。而所传入的Obj为确定按钮的DOM，可以通过这个Dom来找到父元素的ID，其作用是用来区分单页多个相同PartialView(用于复用控件对话框)的引用。

好了，先写这么多。

希望上述能给各位网友带来帮助。望多指教！
 
                    近段时间，我所接手的一个项目是.Net MVC架构，控件大部分是使用Telerik的。由于项目中有很多数据是需要树形结构来展示的，之前项目是通过jstree控件来实现。jstree虽然扩展性很好，很多树的操作功能都可以实现，但是，要实现起来的代码比较多，也有些复杂。于是我就决定尝试采用Telerik的treeView来代替。Telerik Extensions for ASP.NET MVC ...
				特别喜欢Telerik控件，并尝试对Telerik WPF控件进行了自编译：
1、删除了主题选择功能，Telerik集成了十几种主题，而有些主题已经不适应，这里仅保留了Fluent主题，当然保留了颜色盘切换功能，这是在不改变样式的情况下的一种主题颜色切换方式，但个人认为仍旧属于动态资源加载的方式，因此使用这些颜色键值时要特别注意，关乎性能的地方绝对不能使用，这点我在之前对微软的WPF Chart的改造就是使用了动态资源，估计速度降低了5倍以上。
2、删除了UI自动化功能
3、添加了中文本地化字典
4、将微软的基于GPU的动画切换功能扩展到了TransitionControl,也就是在TransitionControl控件中又添加了若干切换动画。
5、添加了自己收集的一些控件和DLL代码，譬如GlassWindows(仅测试了Windows10使用)，放在了GenLibrary.Extended.dll中
最终代码量是原来的3/5,同时由于去掉了主题加载功能，因此启动速度应该有提升，Telerik的WPF控件确实掌握了WPF设计的精髓，很多控件都有很强的可展性，就说那个ChartView控件，简单的代码集成，就让一个图形具备了十几种加载动画(可查看运行示例)，关键是这些加载动画还能在外部自定义(使用附加行为)，Devexpress可能关注大而集成，而Telerik控件则在乎小尺寸，强大的扩展性和执行速度，同一类的Dll，Devexpress的大小估计是Telerik的2倍以上。
      里面有一个Pivot控件的示例，是通过Entity访问SQL Server，可能在其他机器上不能运行，其他示例都是可运行的。
     附件中包含一个WPFHelper.exe和其他主要的DLL，本来也编译了设计时支持的DLL,算了，以后有需要再传吧，并且这个版本是Debug编译，如果是Release编译，应该会有更好的优化。
     仅提供给个人学习和展示使用，如果是公司，建议去购买授权版本，这绝对是一个好控件库。
页面上放歌Radcontrol控件,然后在添加一个ItemTemplate模板.这个模板里面就RadTreeView控件.我们要在选择RadComboBox中选择的RadTreeView
就是如下的效果图
效果还不错的样子.呵呵
可以选择子节点,不可以选择父节点的js如下
				&lt;link rel="stylesheet" href="../jquery.treeview.css" /&gt;
&lt;script src="../lib/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="../lib/jquery.cookie.js&q
				1 <asp:TreeView ID="tv" runat="server" ExpandDepth="2" ShowCheckBoxes="All" 
2         ShowLines="True" ImageSet="Msdn" >
3     </asp:TreeView>
JavaScript部分代码
  2     fun...
				private void MyTree_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            if(e.ClickCount != 2)
                return;
            if(null!=this.MyTree.SelectedItem)
<telerik:RadTreeView runat="server" ID="RadTreeView1">
    <Nodes>
        <telerik:RadTreeNode Text="Node 1" Value="1" />
        <telerik:RadTreeNode Text="Node 2" Value="2" />
        <telerik:RadTreeNode Text="Node 3" Value="3" Selected="true" />
        <telerik:RadTreeNode Text="Node 4" Value="4" />
    </Nodes>
</telerik:RadTreeView>
在上面的示例中，我们将 ID 为 3 的节点的 Selected 属性设置为 true，这样它就会在页面加载时被选中。
				Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
					16736