Question

我正在使用具有虚拟化功能的Kendo UI TreeView（ASP.net MVC）;它帮助我最初加载顶级＆amp;根据需要加载更多级别。

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

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

谢谢 -NM

Answer 1

我遇到了类似的问题并设法通过实现两个Controller方法来修复它

Controller.LoadNodes（int？parentId）
Controller.SearchNodes（string searchTerm）

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

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

在搜索按钮单击事件中获得该设置后，将换出树视图的数据源。请注意，您必须使用setDataSource方法设置数据源，该方法基于Telerik论坛中标题为＆＃34的帖子;尝试在树视图上更改数据源时出错＃34;。

＆＃13;

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();
});

＆＃13;

使用虚拟化进行Kendo UI TreeView搜索

1 个答案: