asp.net-mvc - Kendo UI TreeView 搜索与虚拟化

Question

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

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

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

谢谢
-nm

Answer 1

我遇到了类似的问题，并通过实现两个 Controller 方法设法解决了这个问题

Controller.LoadNodes(int?parentId)

Controller.SearchNodes(string searchTerm)

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

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

在搜索按钮单击事件中完成设置后，请换出 Treeview 的数据源。请注意，您必须根据 Telerik 论坛中标题为“尝试更改 Treeview 上的数据源时出错”的帖子使用 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();
});