从零开始学习JavaFX(15) 控件篇之TableView(2)

上一章中,我们学习了如何创建TableView,修改TableView的列,以及填充数据。这一章中我们将会看看如何动态添加数据,以及对TableView的列进行编辑。

动态添加数据

由于我们在使用中,常常是需要动态添加数据的,下面我们来看看如何动态添加数据。

首先,我们在之前的UI下面,增加一个HBox,将输入框和提交按钮添加进去:

       int tfWidth = 80;
        HBox box = new HBox(10);
        TextField mNameTF = new TextField();
        mNameTF.setPromptText("输入名称");
        mNameTF.setPrefWidth(tfWidth);
        TextField mAddressTF = new TextField();
        mAddressTF.setPromptText("输入地址");
        mAddressTF.setPrefWidth(tfWidth);
        TextField mPhone1TF = new TextField();
        mPhone1TF.setPromptText("输入座机号");
        mPhone1TF.setPrefWidth(tfWidth);
        TextField mPhone2TF = new TextField();
        mPhone2TF.setPromptText("输入手机号");
        mPhone2TF.setPrefWidth(tfWidth);

        Button mSubmitBtn = new Button("提交");
        box.getChildren().addAll(mNameTF,mAddressTF,mPhone1TF,mPhone2TF,mSubmitBtn);
        box.setLayoutY(table.getPrefHeight() + 5);
        ((Group) scene.getRoot()).getChildren().addAll(table,box);

这里的代码就很简单了,纯粹的UI创建。

然后我们增加Button的点击事件,来增加数据:

        mSubmitBtn.setOnAction(event -> {
             dataList.add(new PersonData(mNameTF.getText(),mAddressTF.getText(),mPhone1TF.getText(),mPhone2TF.getText()));
        });

大家可以看到,我们只需要通过dataList的add方法添加数据,就能更新TableView的数据了。

运行效果如下:

我们通过输入内容,并点击提交,就能将数据提交到TableView上了。

另外,当我们点击TableViewColumn时,可以进行按列的升降序进行排序,这个是内置的排序功能。

编辑TableViewColumn

有时候,我们需要对TableView中的某一项进行编辑。那么我们来看看如何编辑Item吧。

首先,需要设置TabelView为可编辑状态:

table.setEditable(true);

接着我们定义CellFactory,并对编辑事件进行处理:

       nameCol.setCellFactory(TextFieldTableCell.forTableColumn());
        nameCol.setOnEditCommit(event -> {
            TableColumn.CellEditEvent editEvent = (TableColumn.CellEditEvent<PersonData,String>)event;
            PersonData personData = (PersonData) editEvent.getTableView().getItems().get(editEvent.getTablePosition().getRow());
            personData.setName((String)editEvent.getNewValue());
        });

在这里,我们实现OnEditCommit的目的是,虽然我们在Item上修改了值,但是本质上它的值并没有应用到我们创建的ObservableList中,所以我们需要通过TableView.getItems获取到我们的ObservableList,再进行修改。

运行效果如下:

到这里,这一节就结束了,由于TableView属于较为复杂的控件,所以下一节还会继续讲解TableView的用法,感谢大家的支持。

One thought on “从零开始学习JavaFX(15) 控件篇之TableView(2)”

发表评论

电子邮件地址不会被公开。