使用texfield搜索/过滤树视图 [英] Use a texfield to search/filter an treeview

问题描述

我一直试图找到答案，但这看起来很复杂。

i have been trying to find an answer to this but it seems like hell of a complicated to do.

我想做的是我有一个树视图并且我希望能够搜索文本字段，以便只搜索树视图中与文本字段显示的匹配的树状项。

What i want to do is that i have a treeview and with an textfield i want to be able to search so only the treeitems in the treeview that matches whats on the textfield shows.

例如，如果有人在文本字段中写lat，树视图会显示延迟拉脱维亚等文件夹。

for example if someone writes "lat" in the textfield the treeview shows folders like "latency" "latvia" and so on.

树视图填充代码是这样的

the treeview fill code is as this

@FXML
private void fillTreeView() {
    // The tree needs a root, and it needs to be a DocumentObject
    // so we create an empty folder and hide it
    TreeItem<DocumentObject<?>> treeRoot = new TreeItem<>(new Folder());

    for (Folder folder : logic.getFolderList()) {
        TreeItem<DocumentObject<?>> folderNode = new TreeItem<>(folder);

        for (FileReference file : folder.getFileList()) {
            TreeItem<DocumentObject<?>> fileNode = new TreeItem<>(file);
            folderNode.getChildren().add(fileNode);
        }

        treeRoot.getChildren().add(folderNode);
        treeRoot.setExpanded(true);
    }

    treeNav.setRoot(treeRoot);
    treeNav.setShowRoot(false);
}

然后我希望Textfield搜索两个treeitems并显示用户搜索的内容for

and then i want the Textfield to seach both treeitems and display what the user searched for

推荐答案

如果您只是过滤根节点的直接子节点，那么它非常简单。只需将顶级节点保存在单独的 ObservableList 中，在其周围包装 FilteredList ，然后使用 Bindings.bindContent（）以确保根节点的子节点列表包含与 FilteredList 相同的元素。

If you are only filtering the direct children of the root node, it's fairly straightforward. Just keep the top level nodes in a separate ObservableList, wrap a FilteredList around it, and then use Bindings.bindContent() to make sure the child node list of the root node contains the same elements as the FilteredList.

假设您的 DocumentObject 有一个方法，比如 getName（）返回您要应用过滤器的文本，并且您有 TextField 名为 textField 其中用户键入过滤器文本，这看起来像：

Assuming your DocumentObject has a method, say getName() that returns the text against which you want to apply the filter, and you have a TextField called textField where the user types the filter text, this would look something like:

@FXML
private void fillTreeView() {
    // The tree needs a root, and it needs to be a DocumentObject
    // so we create an empty folder and hide it
    TreeItem<DocumentObject<?>> treeRoot = new TreeItem<>(new Folder());

    ObservableList<TreeItem<DocumentObject<?>>> firstLevel = FXCollections.observableArrayList();

    for (Folder folder : logic.getFolderList()) {
        TreeItem<DocumentObject<?>> folderNode = new TreeItem<>(folder);

        for (FileReference file : folder.getFileList()) {
            TreeItem<DocumentObject<?>> fileNode = new TreeItem<>(file);
            folderNode.getChildren().add(fileNode);
        }

        firstLevel.add(folderNode);
    }

    treeRoot.setExpanded(true);


    FilteredList<TreeItem<DocumentObject<?>>> filteredList = new FilteredList<>(firstLevel, item -> true);

    filteredList.predicateProperty().bind(Bindings.createObjectBinding(() -> {
        String filter = textField.getText();
        if (filter.isEmpty()) return item -> true ;
        return item -> item.getValue().getName().startsWith(filter) ; // your implementation may vary...
    }, textField.textProperty());

    Bindings.bindContent(treeRoot.getChildren(), filteredList);

    treeNav.setRoot(treeRoot);
    treeNav.setShowRoot(false);
}

如果你想过滤整个树，那你需要做每个级别相同....

If you want to filter the entire tree, then you need to do the same at each level....

这篇关于使用texfield搜索/过滤树视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！