JavaFx：如何比较 GridPane 中动态创建的 TextFields 的值？

Question

我正在使用 JavaFx 开发一个应用程序，在其中我在 GridPane 中创建动态 TextFields，并且有一个最初被禁用的按钮，如下所示：

所以我想要的是，如果第 1 列 TextFields 值小于第 3 列 TextFields 值，按钮应该像这样启用：

但是如果第 3 列的任何一个 TextField 值变得小于同一行的第 1 列 TextField 值，它应该禁用按钮并以红色显示特定的 TextField 边框，并且当鼠标悬停在该字段上时应该显示一些警告:

我正在这样创建 TextField：

public static GridPane table(int rows){
            GridPane table = new GridPane();

            for(int i=0; i<rows; i++){
            TextField textField1 = new JFXTextField();
            textField1.setAlignment(Pos.CENTER);
            TextField textField2 = new JFXTextField();
            textField2.setAlignment(Pos.CENTER);
            TextField textField3 = new JFXTextField();
            textField3.setAlignment(Pos.CENTER);

            //add them to the GridPane
            table.add(textField1, 0, i+1);
            table.add(textField2, 1, i+1);
            table.add(textField3, 2, i+1);
         }
        return table;
    }

之后，我在特定的行和列创建了另一个方法 return 从 table 组件，如下所示：

public static Node getComponent (int row, int column, GridPane table) {
         for (Node component : table.getChildren()) { // loop through every node in the table
             if(GridPane.getRowIndex(component) == row && 
                             GridPane.getColumnIndex(component) == column) {
                 return component;
             }
         }

         return null;
     }

我尝试这样做，但它不起作用（这里我将值转换为字符串并进行比较只是为了检查）：

private boolean isTextEqual(GridPane table, Button button){

        for(Node node : table.getChildren()){ 
            if(node instanceof TextField){
                for(int i=1 ; i<=ComboBox().getValue(); i++){
                    String str = ((TextField)DynamicGridpanes.getComponent (i, 0, table)).getText();
                    ((TextField)DynamicGridpanes.getComponent (i, 2, table)).textProperty().addListener((obs, old, newV)->{ 
                    if(newV.toString()==str){
                        button.setDisable(false);
                    }
                    else{
                        button.setDisable(true);
                    }
                 });
                    }
                }
            }

        return true;
    }

Answer 1

您可以在创建文本字段时创建执行验证的绑定。这将避免需要在网格窗格的子节点中导航，这看起来不是很健壮。

声明一组布尔值绑定（每一行都有一个）：

private BooleanBinding[] rowValidationBindings ;

那你可以做

public static GridPane table(int rows){
    GridPane table = new GridPane();

    rowValidationBindings = new BooleanBinding[rows];

    for(int i=0; i<rows; i++){
        TextField textField1 = new JFXTextField();
        textField1.setAlignment(Pos.CENTER);
        TextField textField2 = new JFXTextField();
        textField2.setAlignment(Pos.CENTER);
        TextField textField3 = new JFXTextField();
        textField3.setAlignment(Pos.CENTER);

        rowValidationBindings[i] = Bindings.createBooleanBinding(
            () -> {
                if (textField1.getText().matches("\d+") &&
                    textField3.getText().matches("\d+")) {
                    int value1 = Integer.parseInt(textField1.getText());
                    int value3 = Integer.parseInt(textFIeld3.getText());
                    return value3 > value1 ;
                } else {
                    return false ;
                }
            }, textField1.textProperty(), textField2.textProperty()
        );

        //add them to the GridPane
        table.add(textField1, 0, i+1);
        table.add(textField2, 1, i+1);
        table.add(textField3, 2, i+1);
    }

    button.disableProperty().bind(Bindings.createBooleanBinding(
        () -> ! Stream.of(rowValidationBindings).allMatch(BooleanBinding::get),
        rowValidationBindings
    ));

    return table;
}

您还可以直接在 for 循环中将样式添加到文本字段：

textField3.styleProperty().bind(Bindings
    .when(rowValidationBindings[i])
    .then("")
    .otherwise("-fx-border-color: red")); // or whatever you are using for style

以及工具提示：

Tooltip tooltip = new Tooltip();
tooltip.textProperty().bind(Bindings.concat("Value must be greater than ",textField1.textProperty()));
textField3.tooltipProperty().bind(Bindings
    .when(rowValidationBindings[i])
    .then((Tooltip)null)
    .otherwise(tooltip));

Answer 2

其实做你想做的事情并不容易，因为你的代码需要重构（代码不是为了做这么高级的要求，但它可以满足你的基本要求)。但是，您可以这样做：

首先，定义一个全局变量，用无效TextField的last row index更新（从这里您应该得出结论，这将一次更改一个无效 TextField 的边框颜色 ):

public static int textFieldIndex = -1;

现在借助您已有的方法 getComponent (int row, int column, GridPane table)，创建另一个静态方法来检查 ALL TextFields 是否有一次有效值：

/**
* This method to check at run time with every change in any TextField 
* if the corresponding TextField has a valid value(i.e contains number and
* the first TextField value is less than the second)
* @param table
* @param numRows
*/
private static boolean hasValidValue(GridPane table, int numRows){
   // cycle through every row in the table
   // and compare every two TextFields
   for(int i=0; i<numRows; i++){
      try{ // try because user may enters a non-number input (to avoid crash)
         // the first TextField is always at column index 0 , the second at column index 3
         if(Integer.parseInt(((TextField)(getComponent (i, 0, table))).getText())>
            Integer.parseInt(((TextField)(getComponent (i, 3, table))).getText())){
            // before returning false
            textFieldIndex = i; // update at which row the TextField is less
            return false;
          }
       }catch(NumberFormatException e){ // if it contains invalid input(non-digit)
            return false;
       }
   }
   return true; 
}

现在需要在validateTable()方法中使用上面的方法，做一些调整：

// pass the comboBox.getValue() to the third parameter
private void validateTable(GridPane table, Button button, int numRows) {

   for(Node textField : table.getChildren()){ 
      if(textField instanceof TextField){
         ((TextField)textField).textProperty().addListener((obs, old, newV)->{
           // first of all remove the red border from the invalid TextField (if any)
          // we know that via textFieldIndex which should be -1 if there is no lesser
          // actually it's a pain 
          if(textFieldIndex!=-1){
            ((TextField) getComponent(textFieldIndex, 3, table)).setStyle("");
          }
          if(isAllFilled(table)){ // if all filled ( you already have this method)
             if(hasValidValue(table,numRows)){ // check for validity
                button.setDisable(false); // then make the button active again
             }
             else{// if it's not a valid value
                  // re-style the TextField which has lesser value
                 ((TextField) getComponent(textFieldIndex, 3, table)).
                                        setStyle("-fx-border-color: red;");
                  button.setDisable(true); 
             }
          }
          else{
               button.setDisable(true);
          }
       });
     }  
   }
}

现在在您的 tabPane ChangeListener 中将第三段添加到方法中（因为您已经有了它，您只需添加 ComboBox: 的值

tabPane.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<Tab>(){
   ....
   ....
   ....
   // I think you have here anchorPane not containerB in the original code
   validateTable((GridPane) containerB.getChildren().get(0), test, comboBox.getValue());
}

测试

JavaFx：如何比较 GridPane 中动态创建的 TextFields 的值？

JavaFx: How to compare values of dynamically created TextFields inside GridPane?

java

javafx

javafx-2

javafx-8