绑定 Telerik RadTreeView 客户端

Posted 2023-02-22

【中文标题】绑定 Telerik RadTreeView 客户端

【英文标题】：Binding a Telerik RadTreeView client side

【发布时间】：2011-12-09 17:07:31

【问题描述】：

我有一个 javascript 对象数组，我想用它来填充 RadTreeView。 除了为我的对象集合手动编写自己的绑定方法之外，我不知道如何从客户端完成此操作。

我的 javascript 数组中的每个对象都有

身份证 父 ID 价值 文字

有没有办法在客户端从这个 javascript 数据结构中自动填充整个树？ 我必须一一进行吗？通过遍历我的数组并递归地沿着树向下走？

我正在使用 Web 服务来获取包含此数据的 JSON 对象，并且我想完全构建树，而不仅仅是在展开的节点上。

【参考方案1】：

显然，没有办法从客户端绑定整个树。您最多只能绑定一级节点，当用户单击每个节点时，您可以填充子节点以进行另一个 Web 方法调用。

<telerik:RadTreeView OnClientNodeClicking="PopulateChild" DataTextField="Text" 
                            ID="datesTree" runat="server">
                            <WebServiceSettings Path="../AcmeWebService.asmx" Method="GetRootNodes" />
  <Nodes>
    <telerik:RadTreeNode Text="Root Node" ImageUrl="../images/truckicon.png"  ExpandMode="WebService" />
  </Nodes>
</telerik:RadTreeView>

您的 GetRootNodes 方法可能如下所示：

[WebMethod, ScriptMethod]
public RadTreeNodeData[] GetRootNodes(RadTreeNodeData node, object context)

    DataTable productCategories = GetProductCategories(node.Value);
    List<RadTreeNodeData> result = new List<RadTreeNodeData>();
    foreach (DataRow row in productCategories.Rows)
    
        RadTreeNodeData itemData = new RadTreeNodeData(); 
        itemData.Text = row["Title"].ToString(); 
        itemData.Value = row["CategoryId"].ToString();
        if (Convert.ToInt32(row["ChildrenCount"]) > 0) 
         
            itemData.ExpandMode = TreeNodeExpandMode.WebService; 
        
        result.Add(itemData);
    
    return result.ToArray();

PopulateChild 客户端方法可以是：

function PopulateChild(sender, args) 
var treeView = $find('datesTree');

    var nodeText = "";

    $.ajax(
        type: "POST",
        url: "../AcmeWebService.asmx/GetChildNodes",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "'nodeText': '" + nodeText + "','nodeValue': '" + args.get_node().get_value() + "','param2':'" + treeView.get_allNodes()[0].get_value() + "' ",
        success: function(msg) 
            if (treeView != null) 
                treeView.trackChanges();
                var parent = treeView.get_selectedNode() || treeView;
                var count = parent.get_nodes().get_count();
                for (var i = 0; i < msg.d.length; i++) 
                    var node = new Telerik.Web.UI.RadTreeNode();                                                
                    node.set_text(msg.d[i].Text);
                    node.set_value(msg.d[i].ParentID);
                    node.set_expanded(true);
                    parent.get_nodes().add(node);
                
                treeView.commitChanges();
            
        
    );

在网络服务上填充子节点的方法可以是这样的：

[WebMethod, ScriptMethod]
public IEnumerable<YourNode> GetChildNodes(string nodeText, string nodeValue, int param2)

   //call your DAL with any parameter you passed in from above
   IEnumerable<YourNode> nodes = ...
   return nodes;

注意0上面的方法没有返回RadTreeNodeData数组。它可以是您自己的自定义对象的任何集合。 GetRootNodes 也是如此，只是我从 Telerik 的网站上复制了那个；）

注意 1： 我曾经遇到过类似的情况，我使用了这种技术，最初加载第一级节点并在客户端单击时加载其他节点。我在这里发布的一些代码是我原始代码的精简版。

希望对你有帮助。

【讨论】：

另外您可以使用客户端API创建节点（在一级节点之后）：telerik.com/help/aspnet-ajax/treeview-client-basics.html。使用 trackChanges() 和 commitChanges() 您可以在客户端修改 RadTreeView，但它可能比使用上述技术更乏味。

【参考方案2】：

根据文档，客户端 Nodes 属性是只读的：

The RadTreeView client object

【讨论】：

我认为文档是指 ASP.NET 控件，而不是 ASP.NET AJAX 控件。它们是不同的东西。