Kendo UI TreeView 搜索与虚拟化

Question

我正在使用具有虚拟化功能的 Kendo UI TreeView (ASP.net MVC)；它可以帮助我最初加载顶层并按需加载更多级别。

现在需要在 TreeView 中包含“搜索”功能来搜索节点。

不幸的是，我没有在我的 TreeView 中预加载所有节点来执行搜索；您能否建议是否有任何替代方法可以在 TreeView 中动态执行搜索。

谢谢 -nm

Answer 1

我遇到了类似的问题，并设法通过实现两个控制器方法来解决它

• Controller.LoadNodes(int?parentId)
• Controller.SearchNodes(string searchTerm)

LoadNodes 将返回直接子级的平面列表。而 SearchNodes 将返回匹配的搜索词及其父项的嵌套列表。

我的示例使用 SQL Server 备份并遵循Hierachyid Data Type tutorial。

一旦您在搜索按钮单击事件中进行了该设置，就可以将数据源换出为您的树形视图。请注意，您必须根据 Telerik 论坛中标题为“尝试更改树视图上的数据源时出错”的帖子使用 setDataSource 方法设置数据源。

function ExpandNodes(nodes) {
  return $.map(nodes, function (x) {
    x.expanded = x.children.length > 0;
    if (x.expanded)
      ExpandNodes(x.children);
    return x;
  });
};

$("#search-btn").click(function(){
  var searchText = $("#SearchText").val();
  var treeview = $("#TreeView").data("kendoTreeView");
  if(searchText.trim() != "")
  {
    url = "Controller/SearchNodes?searchText=" + searchText;
    data.setDataSource(new kendo.data.HierarchicalDataSource({
      transport: {
        read: {
          url: url,
          dataType: "json",
          type: "POST",
          contentType: "application/json; charset=utf-8"                        
        },
        parameterMap: function (options) {
          return JSON.stringify(options);
        }
      },

      schema: {
        parse: function (response) {
          return ExpandNode(response);
        },
        model: {
          id: "node_id",
          children: "children",    
          expanded: true
        }
      }
    }));
  }
  else
  {
    url = "Controller/LoadNodes";
    data.setDataSource(new kendo.data.HierarchicalDataSource({
      transport: {
        read: {
          url: url,
          dataType: "json",
          type: "POST",
          contentType: "application/json; charset=utf-8"                        
        },
        parameterMap: function (options) {
          return JSON.stringify(options);
        }
      },

      model: {
        id: "node_id",
      }
    }
                                                             }));     
  }
  data.dataSource.read();
});