java - 使用 VBox JavaFX-8 内的过滤器参数过滤 TableView

Question

好吧，我放弃了 GridPane 支持的表实现，转而使用适当的 TableView。

在表格中，左列是 ImageView，右列是带有标签的 VBox。

下面的代码经过修改，不包含我的数据库中的任何数据。

public ObservableList<Users> showUserData() {
    for(int i = 0; i <= 5; i++) {
        Image image = new Image("file:///" + [path to whatever image in your PC]);
        VBox vbox  = new VBox();

        vbox.getChildren().addAll(new Label("Name: " + "a name"), 
            new Label("Username: " + "a username"), 
            new Label("Position: " + "a position"));

        ImageView pic = new ImageView();
        pic.setFitHeight(150);
        pic.setFitWidth(150);
        pic.setImage(image);
        pic.setSmooth(true);
        pic.setPreserveRatio(true);
        users.add(new Users(pic, vbox));

    }

    return users;
}

然后将其传递到初始化方法，在该方法中进行表的实际填充。

顺便说一句，Users 类看起来像这样:

public class Users {
    private ImageView userImage;
    private VBox userDetails;

    public Users() {
        this.userImage = null;
        this.userDetails = null;
    }

    public Users(ImageView userImage, VBox userDetails) {
        this.userImage = userImage;
        this.userDetails = userDetails;
    }

    public ImageView getUserImage() {
        return userImage;
    }

    public void setUserImage(ImageView userImage) {
        this.userImage = userImage;
    }

    public VBox getUserDetails() {
        return userDetails;
    }

    public void setUserDetails(VBox userDetails) {
        this.userDetails = userDetails;
    }
}

程序按预期工作，我可以看到包含图像的表格和包含详细信息的 VBox。

现在我想添加一个用于过滤表格的 TextField，过滤器参数是标签内的文本。

我知道我需要将 ObservableList 放入 FilteredList，然后放入 SortedList。

但是由于过滤器参数放置在 VBox 内而不是单独的列中，因此我在互联网上看到的任何示例都不适用(除非我就是那么愚蠢)。另外，参数位于标签内，而不仅仅是普通字符串。

我一直在遵循本教程进行过滤:http://code.makery.ch/blog/javafx-8-tableview-sorting-filtering/ 。

我认为这几乎是一个特殊情况，但设计要求我坚持它。我需要帮助、提示或任何形式的指导。谢谢。

Answer 1

将数据存储在项目中，而不是显示它们的节点!您可以使用 cellFactory 创建单元格，以您喜欢的方式显示数据:

public class UserDetails {

    private final String name;
    private final String username;
    private final String position;

    public UserDetails(String name, String username, String position) {
        this.name = name;
        this.username = username;
        this.position = position;
    }

    public String getName() {
        return name;
    }

    public String getUsername() {
        return username;
    }

    public String getPosition() {
        return position;
    }

}

public class User {
    private UserDetails userDetails;
    private Image image;

    public User(UserDetails userDetails, Image image) {
        this.userDetails = userDetails;
        this.image = image;
    }

    public UserDetails getUserDetails() {
        return userDetails;
    }

    public Image getImage() {
        return image;
    }

}

public ObservableList<User> showUserData() {
    ObservableList<User> users = FXCollections.observableArrayList();
    for (int i = 0; i <= 5; i++) {
        users.add(new User(
                new UserDetails("a name", "a username", "a position"),
                new Image("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png")));

    }

    return users;
}

@Override
public void start(Stage primaryStage) {
    TableView<User> table = new TableView<>(showUserData());

    TableColumn<User, Image> imageColumn = new TableColumn<>();
    TableColumn<User, UserDetails> userDetailsColumn = new TableColumn<>();
    table.getColumns().addAll(imageColumn, userDetailsColumn);

    imageColumn.setCellValueFactory(new PropertyValueFactory<>("image"));
    userDetailsColumn.setCellValueFactory(new PropertyValueFactory<>("userDetails"));

    imageColumn.setCellFactory(col -> new TableCell<User, Image>() {

        private final ImageView imageView = new ImageView();

        {
            imageView.setFitHeight(150);
            imageView.setFitWidth(150);
            imageView.setSmooth(true);
            imageView.setPreserveRatio(true);
        }

        @Override
        protected void updateItem(Image item, boolean empty) {
            super.updateItem(item, empty);

            if (empty) {
                imageView.setImage(null);
                setGraphic(null);
            } else {
                imageView.setImage(item);
                setGraphic(imageView);
            }
        }

    });

    userDetailsColumn.setCellFactory(col -> new TableCell<User, UserDetails>() {

        private final Label nameLabel = new Label();
        private final Label userNameLabel = new Label();
        private final Label positionLabel = new Label();
        private final VBox vbox = new VBox(nameLabel, userNameLabel, positionLabel);

        @Override
        protected void updateItem(UserDetails item, boolean empty) {
            super.updateItem(item, empty);

            if (empty) {
                setGraphic(null);
            } else {
                nameLabel.setText("Name: "+item.getName());
                userNameLabel.setText("Username: "+item.getUsername());
                positionLabel.setText("Position: "+item.getPosition());
                setGraphic(vbox);
            }
        }

    });

    Scene scene = new Scene(table);

    primaryStage.setScene(scene);
    primaryStage.show();
}

如果创建大量用户，这可以大大减少占用空间，因为它不会为每个项目存储大型Node类，而是重用与每个单元格关联的类。 .

这应该允许您轻松地根据文本创建谓词:

TextField textField = ...
FilteredList<User> filteredList = ...

textField.textProperty().addListener((observable, oldValue, newValue) -> filteredList.setPredicate(newValue.isEmpty()
                      ? null
                      : user -> user.getName().contains(newValue)
                                || user.getUsername().contains(newValue)
                                || user.getPosition().contains(newValue)));