我正在使用 KendoUI 的 TreeView ,并希望为用户提供过滤它的可能性。 甚至还有一个演示可以满足我的要求 (http://demos.kendoui.com/web/treeview/api.html)
问题是过滤器仅应用于 TreeView 的第一个层次结构,因此如果过滤器文本存在于子项中而不是父项中,则不会显示子项。
例子:
- 项目 1
- 项目 2
- 项目 xzy
- 项目abc
如果搜索文本是“abc”,则不会显示任何项目。相反,我希望得到以下结果:
- 项目 2
- 项目abc
有人知道怎么做吗?这是我正在使用的代码:
var tree_view_data = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "getall/items",
dataType: "json"
}
},
schema: {
model: {
children: "ChildItems"
}
}
});
//init tree view itself
var $treeview = $("#div-treeview").kendoTreeView({
dataSource: tree_view_data,
dataTextField: [ "Text", "ChildrenText" ]
});
//allow filter of navigation tree
var refreshTree = function () {
tree_view_data.filter({
field: "Text", //if I would use "ChildrenText" here nothing be displayed at all if filtertext is set
operator: "contains",
value: $("#tree-text-search").val()
});
};
$("#tree-text-search").change(refreshTree).keyup(refreshTree);
最佳答案
我找到了一种方法来实现这一点,只需使用 jQuery 选择器来隐藏和显示必要的子节点。
首先是在创建 TreeView 时,将此参数添加到您的选项中:
loadOnDemand: 假
这样,树将在被请求之前呈现出所有子节点的 HTML,从而允许您使用 jQuery 进行导航。
这是我使用的 jQuery 代码,它过滤掉不匹配的节点,打开匹配的节点组,并显示它们。
$("#searchTextInputField").keyup(function () {
var filterText = $("#searchTextInputField").val();
if(filterText !== "") {
$("#myTree .k-group .k-group .k-in").closest("li").hide();
$("#myTree .k-group .k-group .k-in:contains(" + filterText + ")").each(function() {
$(this).closest("ul").show();
$(this).closest("li").show();
});
} else {
$("#myTree .k-group").find("ul").hide();
$("#myTree .k-group").find("li").show();
}
});
关于javascript - KendoUI 过滤器 TreeView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12303235/