在 jQuery Tree 中,可以使用 filter
插件来处理节点的过滤搜索。以下是如何使用 filter
插件进行节点过滤搜索的步骤:
- 首先,确保已经在项目中引入了 jQuery 和 jQuery Tree 相关的库文件。可以通过以下方式引入:
- 创建一个 HTML 元素,用于承载树形结构:
- 初始化树形结构,并添加节点数据:
$(document).ready(function () { $("#tree").tree({ data: [ { label: "Node 1", children: [ { label: "Node 1.1" }, { label: "Node 1.2" }, ], }, { label: "Node 2", children: [ { label: "Node 2.1" }, { label: "Node 2.2" }, ], }, ], }); });
- 使用
filter
插件进行节点过滤搜索:
$("#search").on("input", function () { var searchText = $(this).val().toLowerCase(); $("#tree").tree("filter", searchText); });
在 HTML 中添加一个搜索框元素:
现在,当用户在搜索框中输入文本时,jQuery Tree 会根据输入的文本过滤节点。只有与搜索文本匹配的节点才会显示在树形结构中。