我正在使用KendoUI的树视图,并希望为用户提供过滤它的可能性。 甚至有一个演示可以做我想要的(http://demos.kendoui.com/web/treeview/api.html)
问题是过滤器仅应用于TreeView的第一层次结构,因此如果过滤器文本存在于子节点而不存在于父节点中,则子节点将不会显示。
示例:
如果搜索文本为“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);
答案 0 :(得分:11)
我找到了一种方法,只需使用jQuery选择器来隐藏和显示必要的子节点,就可以实现这一点。
首先,当您创建树视图时,请将此参数添加到您的选项中:
loadOnDemand:false
这样,在请求之前,树将呈现出子节点的所有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();
}
});
答案 1 :(得分:7)
更新2016-01-13 :现在有一个显示how to perform TreeView filtering based on a user string的帮助主题。
您需要手动过滤子DataSource,以便只显示必要的节点。对于不同级别使用不同的dataTextField
会使其更难掌握,因此此代码仅使用text
字段。此外,由于此过滤是在客户端执行的,因此它假定您已加载所有节点。
var treeview = $("#treeview").data("kendoTreeView"),
item = treeview.findByText("Item 1.3"), // find the node that will be shown
dataItem = treeview.dataItem(item),
nodeText = dataItem.text;
// loop through the parents of the given node, filtering them to only one item
while (dataItem.parentNode()) {
dataItem = dataItem.parentNode();
dataItem.children.filter({ field: "text", operator: "contains", value: nodeText });
nodeText = dataItem.text;
}
treeview.dataSource.filter({ field: "text", operator: "contains", value: nodeText });
答案 2 :(得分:5)
超过4个级别遍历UL和LI类型的所有父级并调用show()。
$("#filterText").keyup(function (e) {
var filterText = $(this).val();
if (filterText !== "") {
$("#treeview-standards .k-group .k-group .k-in").closest("li").hide();
$("#treeview-standards .k-group .k-group .k-in:contains(" + filterText + ")").each(function () {
$(this).parents("ul, li").each(function () {
$(this).show();
});
});
} else {
$("#treeview-standards .k-group").find("ul").hide();
$("#treeview-standards .k-group").find("li").show();
}
});
答案 3 :(得分:0)
首先。与来自ASP.NET http://www.telerik.com/help/aspnet-ajax/dropdowntree-overview.html的Teleriks RadDropDownTree相比,KendoTreeView是非常低级别的控件(我的意思是js!) 应该把它带到jquery / kendo ......它需要改进这个过滤器,所以 如果你更喜欢在dataitem而不是" findByText"上进行适当的过滤,那么这样做:
.1)找到所有数据项 .2)检查你的条件(这里小写包含值/文本) .3)标志项,标志父母 .4)清理,删除父母留在树上的节点
that.nodeFilter = { logic: "or", filters: [] };
that.nodeFilter.filters.push({ field: "hidden", operator: "eq", value: false });
tree.element.find(".k-in").each(function () {
var dItem = tree.dataItem($(this).closest("li"));
dItem.hidden = false;
if (dItem[that.options.dataValueField].toLowerCase().indexOf(searchTerm) != -1 ||
dItem[that.options.dataTextField].toLowerCase().indexOf(searchTerm) != -1) {
that.nodeFilter.filters.push({ field: that.options.dataValueField, operator: "eq", value: dItem[that.options.dataValueField] })
while (dItem.parentNode()) {
dItem = dItem.parentNode();
dItem.hidden = false;
that.nodeFilter.filters.push({ field: that.options.dataValueField, operator: "eq", value: dItem[that.options.dataValueField] })
}
} else {
dItem.hidden = true;
}
});
tree.dataSource.filter(that.nodeFilter);
tree.element.find(".k-in").each(function () {
var node = $(this).closest("li");
var dataItem = tree.dataItem(node);
if (dataItem.hidden) {
tree.remove(node);
}
});
答案 4 :(得分:0)
此版本搜索整个树,不区分大小写,并隐藏不包含搜索查询的节点(jQuery 1.8 +)。
$("#search").keyup(function (e) {
var query = $(this).val();
if (query !== "") {
$("#tree-view .k-in").closest("li").hide();
$("#tree-view .k-item .k-in:Contains(" + query + ")").each(function () {
$(this).parents("ul, li").each(function () {
$(this).show();
});
});
} else {
$("#tree-view .k-group").find("ul").hide();
$("#tree-view .k-group").find("li").show();
}
});
jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function (arg) {
return function (elem) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
答案 5 :(得分:0)
如果我很好地阅读了这个问题,那就是过滤视图中的数据,而不是树视图本身。它可以通过递归来完成。
有效的递归示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
<div class="demo-section k-content">
<div id="treeview1"></div>
<div id="showit"></div>
<div id="treeview2"></div>
</div>
<script>
//
// Define hierarchical data source
//
var mydata = new kendo.data.HierarchicalDataSource({
name: "Food", items: [
{ name: "Meat", items:
[
{ name: "Pork" },
{ name: "Beef" }
]
},
{ name: "Vegetables", items:
[
{ name: "Pepper" }
]
}
]
});
//
// When debugging
//
var debug=false;
//
// Find and return Item when found.
//
function FindByName(items, myName)
{
//Query definition
var query = kendo.data.Query.process(items, {
filter: {
logic: "or",
filters: [{
field: "name",
value: myName,
operator: "eq"
}]
}
});
if (debug) $("#showit").html($("#showit").html()+" found:" + JSON.stringify(query.data));
//
// return Item when found.
//
if (query.data != "")
return query.data; //ready
else
{
//
// if sub-items, search further
//
for (let i=0; i<items.length; i++)
{
if (debug) $("#showit").html($("#showit").html()+" test:" + JSON.stringify(items[i]));
if (items[i].items!=null)
{
if (debug) $("#showit").html($("#showit").html()+" search sub....");
var r = FindByName(items[i].items, myName);
if (r!=null) return r; //ready, else continue searching further
};
}
}
if (debug) $("#showit").html($("#showit").html()+" not found.");
return null; //nothing found.
}
//
// print the input
//
$("#showit").html($("#showit").html()+" Food:" + JSON.stringify(mydata.options.items));
//
// print the result
//
var ret=FindByName(mydata.options.items,"Beef");
$("#showit").html($("#showit").html()+"<p> Beef:" + JSON.stringify(ret));
$("#treeview1").kendoTreeView({
dataSource: mydata.options.items,
dataTextField: ["name"]
});
ret=FindByName(mydata.options.items,"Meat");
$("#showit").html($("#showit").html()+"<p> Meat:" + JSON.stringify(ret));
ret=FindByName(mydata.options.items,"Pepper");
$("#showit").html($("#showit").html()+"<p> Pepper:" + JSON.stringify(ret));
ret=FindByName(mydata.options.items,"Vegetables");
$("#showit").html($("#showit").html()+"<p> Vegetables:" + JSON.stringify(ret));
//
// Example: bind return value [ret] to treeview.
//
$("#treeview2").kendoTreeView({
dataSource: ret,
dataTextField: ["name"]
});
</script>
</body>
</html>
&#13;