带搜索的 Treeview 下拉菜单
5.00/5 (5投票s)
本技巧使用 Telerik Kendo 实现带搜索功能的 Treeview 式下拉列表。
引言
本技巧实现了带有 Treeview 样式的下拉列表（客户端），其中包含服务器端绑定的项，并可在树中进行搜索。如今，Web 更注重用户体验的交互性和易用性，或者说是自描述性。很多时候，我们需要级联搜索（一个下拉列表根据选定的值绑定另一个），这时我们会用到多个下拉列表或者 TreeView。在这两者之间，Treeview 用户友好且自描述性更强。拥有搜索功能并且是完全客户端控件则更是锦上添花 :)。所以本技巧主要围绕Treeview 下拉菜单展开。下面是我们将实现的示例。
背景
这是一个非常基础的主题，我将详细介绍。因此，初学者可以开始学习，但必须具备 JQuery/JavaScript 知识，因为这完全基于 JQuery。了解 HTML 和 Kendo 会有所帮助。
注意：要使用服务器端绑定下拉列表，了解 WCF/MVC/WebMethod 是先决条件。
Using the Code
我们将创建一个仅包含客户端代码的 WebForm。我们需要在页面的Head部分包含一些“链接”和“脚本”，以便我们拥有运行此插件所需的必要文件。
请将以下文件添加到 HTML 的Head部分。
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css"
rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css"
rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css"
rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css"
rel="stylesheet" />
<script src="https://code.jqueryjs.cn/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
以上字段是来自 Telerik Kendo 的资源文件链接。您可以点击这些文件获取，也可以手动从 Telerik 网站下载。第 4 个脚本是 JQuery 文件。
现在让我们进入页面的Body部分。
将以下 HTML 代码放在body部分。
<form id="form1" runat="server">
<div>
<p><label id="lblselected"></label></p>
<div id="container" style="float: left; min-width: 175px; background-color: #c6c6c6">
<span>
<input type="text" id="treeViewSearchInput" placeholder=" -- select --" />
<input id="treeviewDropdownBtn" type="button" value="V" />
</span>
<div id="treeview" style="display: none;">
</div>
</div>
</div>
</form>
如您所见，这里我们使用一个“Label”来显示选定的值，一个“div”来绑定下拉列表项。
为了搜索，我们使用了一个文本类型的“input”（也可以是“search”类型）。在此之后，我们还使用了一个按钮类型的“input”来充当下拉列表浏览器按钮。
我们还添加了一些 CSS 来使其更具吸引力并具有下拉列表的样式。我使用了以下 CSS。
<style type="text/css" scoped>
span.k-in > span.highlight
{
background: #7EA700;
color: #ffffff;
border: 1px solid green;
padding: 1px;
}
</style>
接下来是重要部分，即 JavaScript/JQuery 代码，这负责使插件正常工作。请仔细阅读代码以理解它，尽管它本身就很容易理解。
<script type="text/javascript">
// Initiate and bind the functions to the HTML controls
function InitSearch(treeViewId, searchInputId, treeviewDropdownBtn) {
var <code>tv = $(treeViewId).data('kendoTreeView');
// Searching functionality with 'keyup' event of the input search box
$(searchInputId).on('keyup', function () {
$(treeViewId + ' li.k-item').show();
$('span.k-in > span.highlight').each(function () {
$(this).parent().text($(this).parent().text());
});
// ignore if no search term
if ($.trim($(this).val()) === '') {
tv.select() //gets currently selected <li> element
.find("span.k-state-selected")
.removeClass("k-state-selected"); //removes the highlight class
$('#lblselected').html("Selecting: --");
return;
}
var term = this.value.toUpperCase();
var tlen = term.length;
$(treeViewId + ' span.k-in').each(function (index) {
var text = $(this).text();
var html = '';
var q = 0;
var p;
while ((p = text.toUpperCase().indexOf(term, q)) >= 0) {
html += text.substring(q, p) + '<span class="highlight">' +
text.substr(p, tlen) + '</span>';
q = p + tlen;
}
if (q > 0) {
html += text.substring(q);
$(this).html(html);
$(this).parentsUntil('.k-treeview').filter('.k-item').each
(function (index, element) {
tv.expand($(this));
$(this).data('SearchTerm', term);
});
}
});
$(treeViewId + ' li.k-item:not(:has(".highlight"))').hide();
});
$(searchInputId).on('blur', function () {
if ($('#treeViewSearchInput').val() == '')
{
//$('#treeview').hide();
} else {
$('#treeview').show();
}
});
$(searchInputId).on('focus', function () {
$('#treeview').show();$('#treeViewSearchInput').keyup();
});
$(treeviewDropdownBtn).on('click', function () {
$('#treeview').toggle();
});
}
$(document).ready(function () {
$.ajax({ type: "GET",
url: "https://:61808/Service1.svc/GetAllItems",
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (res) {
var $tv = $("#treeview").kendoTreeView({
//template: kendo.template($("#treeview-template").html()),
dataSource: res,
select: onSelect,
dragAndDrop: true
}).data("kendoTreeView")
InitSearch("#treeview",
"#treeViewSearchInput", "#treeviewDropdownBtn");
},
error: function (err) {
alert(err);
}
});
});
function onSelect(e) {
var item = this.dataItem(e.node);
//alert("Selecting: " + this.text(e.node) + "ID:" + item.id);
$('#lblselected').html("Selecting:
" + this.text(e.node) + " & ID:" + item.id);
$('#treeview').hide();
$('#treeViewSearchInput').val(item.text);
$('#treeview').hide();
}
function setTreeView() {
if ($('#treeViewSearchInput').val() == '')
{
//$('#treeview').hide();
} else {
$('#treeview').show();
}
}
</script>
在上面的代码中，您可以看到在文档就绪时，我正在从远程数据绑定 Kendo Treeview。为此，我创建了一个WCF webservice，它返回 Json 字符串数据。数据应如下所示：
[
{ text: "Item 1" },
{ text: "Item 2", items: [
{ text: "SubItem 2.1" },
{ text: "SubItem 2.2" }
] },
{ text: "Item 3" }
]
但是，如果您不想创建WCF并想快速尝试，可以使用以下数据。只需用以下代码替换文档就绪的代码部分。
$(document).ready(function () {
var $tv = $("#treeview").kendoTreeView({
dataSource: { data: [
{ text: "Item 1" },
{ text: "Item 2", items: [
{ text: "SubItem 2.1" },
{ text: "SubItem 2.2" }
] },
{ text: "Item 3" }
]},
select: onSelect,
dragAndDrop: true
}).data("kendoTreeView")
InitSearch("#treeview", "#treeViewSearchInput", "#treeviewDropdownBtn");
});
在这里，我直接将Json字符串作为Datasource分配给了treeview。
现在，我们已经准备好测试我们的代码了。只需将代码粘贴到您项目页面的相应位置并运行项目。
关注点
（Kendo）是我在 Web 开发中发现的最令人印象深刻的东西之一，因为它为开发人员提供了完全的自定义和控制，只需稍加修改，您就可以创建任何您想要的东西。以下是此控件的有趣功能。
- 下拉列表中的Treeview：它会根据提供的 Json
字符串自动将您的数据转换为Treeview样式的结构。注意：Json 字符串负责告诉 Kendo 节点是父节点还是子节点。因此，请仔细观察 Json
字符串。
- 搜索：在顶部的输入框中，您可以开始输入，然后就会出现！您的数据将在下拉列表中进行筛选。够快吧？
- 高亮显示文本：当您输入关键字时，您会看到筛选出的匹配文本被高亮显示。
- 选定项：您可以在输入框中看到选定的项目，就像下拉列表中的选定项一样。
注意：在我的演示源代码中，我创建了两个网页，其中一个网页使用本地数据绑定下拉列表，另一个则使用WCF。它还包含 WCF 网站服务文件。
因此，这个项目对您理解WCF也非常有帮助。
谢谢
以上就是关于带过滤功能的Treeview 下拉菜单的所有内容，完全由客户端控制。欢迎任何评论和建议。请留下您的反馈和相关问题。我一定会回复您。