如何使用DatePickerCell将DatePicker添加到Tableview

时间:2013-11-08 11:01:39

标签: datepicker javafx-2 javafx tableview

我使用以下类将DatePicker添加到TableView:https://code.google.com/p/javafx-filterable-table-columns/source/browse/src/main/java/thirdparty/eu/schudt/javafx/controls/calendar/DatePicker.java?r=db47db237b3342712aafb693f392d403455d5299

我使用DatePickerCell类来使用TableCell。 DatePicker在TableView中很好地显示。但是updateItem方法不能很好地工作,它不会更新ObservableList。

我在这里缺少什么?谁能遇到同样的问题?

这是我的代码:

import java.text.SimpleDateFormat;  
import java.util.Locale;  
import javafx.beans.value.ObservableValue;  
import javafx.geometry.Pos;  
import javafx.scene.control.TableCell;  
import thirdparty.eu.schudt.javafx.controls.calendar.DatePicker;  

public class DatePickerCell<S, T> extends TableCell<S, T> {  

    private final DatePicker datePicker;  
    private ObservableValue<T> ov;  
    public DatePickerCell() {  
        // Initialize the DatePicker for birthday  
        this.datePicker = new DatePicker(Locale.ENGLISH);  
        this.datePicker.setDateFormat(new SimpleDateFormat("dd/MM/yyyy"));  
        this.datePicker.getCalendarView().todayButtonTextProperty().set("Today");  
        this.datePicker.getCalendarView().setShowWeeks(false);          
        this.datePicker.getStylesheets().add("styles/DatePicker.css");  
        this.setAlignment(Pos.CENTER);  
        this.setGraphic(this.datePicker);  
    }  
    @Override  
    public void updateItem(T item, boolean empty) {  
        super.updateItem(item, empty);  
        setGraphic(this.datePicker);  
    }  
}

FXController代码中的cellFactory部分:

@FXML  
private TableColumn revueDateCol;  

this.revueDateCol.setCellFactory(new Callback<TableColumn<Revue, Date>, TableCell<Revue, Date>>() {  
        @Override  
        public TableCell<Revue, Date> call(TableColumn<Revue, Date> arg0) {  
            return new DatePickerCell<>();  
        }  
   });

感谢您的帮助。


我试图以这种方式实现但是当我滚动时,单元格返回原始值。 有什么想法吗?

public class DatePickerCell<S, T> extends TableCell<Revue, Date> {

    private DatePicker datePicker;

    public DatePickerCell() {
        if (datePicker == null) {
            createDatePicker();
        }        
        setGraphic(datePicker);
        setContentDisplay(ContentDisplay.GRAPHIC_ONLY);

        Platform.runLater(new Runnable() {
            @Override
            public void run() {
                datePicker.requestFocus();
            }
        });
    }

    @Override
    public void updateItem(Date item, boolean empty) {
        super.updateItem(item, empty);

        if (empty) {
            setText(null);
            setGraphic(null);
        } else {
        if (datePicker != null) {
               datePicker.setSelectedDate(getDate());
        }

            setGraphic(this.datePicker);
            setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
        }
    }

    private void createDatePicker() {
        datePicker = new DatePicker(Locale.FRENCH);
        DateFormat formatter = new SimpleDateFormat("dd/MM/yyyy");
        datePicker.setDateFormat(formatter);
        datePicker.setPromptText("jj/mm/aaaa");
        datePicker.getCalendarView().todayButtonTextProperty().set("Aujourd'hui");
        datePicker.getCalendarView().setShowWeeks(false);
        datePicker.getStylesheets().add("/styles/datePicker.css");

        datePicker.selectedDateProperty().addListener(
                new ChangeListener<Date>() {
                    @Override
                    public void changed(ObservableValue<? extends Date> observable,
                            Date oldValue, Date newValue) {

                        commitEdit(newValue);
                    }
                });

        setAlignment(Pos.CENTER);
    }

    private Date getDate() {
        return datePicker.getSelectedDate() != null ? datePicker.getSelectedDate() : getItem();
    }

    @Override
    public void startEdit() {
        super.startEdit();
    }

    @Override
    public void cancelEdit() {
        super.cancelEdit();
        setContentDisplay(ContentDisplay.TEXT_ONLY);
    }

}

此致

2 个答案:

答案 0 :(得分:2)

这是一个有效的解决方案。它在Java 8中使用DatePicker和TableView控件。 该博客文章可用here

import java.text.SimpleDateFormat;
import java.time.LocalDate;
import java.util.Calendar;
import java.util.Date;
import javafx.application.Platform;
import javafx.collections.ObservableList;
import javafx.event.Event;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.DatePicker;
import javafx.scene.control.TableCell;

public class DatePickerCell<S, T> extends TableCell<BirthdayEvent, Date> {

    private DatePicker datePicker;
    private ObservableList<BirthdayEvent> birthdayData;

    public DatePickerCell(ObservableList<BirthdayEvent> listBirthdays) {

        super();

        this.birthdayData = listBirthdays;

        if (datePicker == null) {
            createDatePicker();
        }
        setGraphic(datePicker);
        setContentDisplay(ContentDisplay.GRAPHIC_ONLY);

        Platform.runLater(new Runnable() {
            @Override
            public void run() {
                datePicker.requestFocus();
            }
        });
    }

    @Override
    public void updateItem(Date item, boolean empty) {

        super.updateItem(item, empty);

        SimpleDateFormat smp = new SimpleDateFormat("dd/MM/yyyy");

        if (null == this.datePicker) {
            System.out.println("datePicker is NULL");
        }

        if (empty) {
            setText(null);
            setGraphic(null);
        } else {

            if (isEditing()) {
                setContentDisplay(ContentDisplay.TEXT_ONLY);

            } else {
                setDatepikerDate(smp.format(item));
                setText(smp.format(item));
                setGraphic(this.datePicker);
                setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
            }
        }
    }

    private void setDatepikerDate(String dateAsStr) {

        LocalDate ld = null;
        int jour, mois, annee;

        jour = mois = annee = 0;
        try {
            jour = Integer.parseInt(dateAsStr.substring(0, 2));
            mois = Integer.parseInt(dateAsStr.substring(3, 5));
            annee = Integer.parseInt(dateAsStr.substring(6, dateAsStr.length()));
        } catch (NumberFormatException e) {
            System.out.println("setDatepikerDate / unexpected error " + e);
        }

        ld = LocalDate.of(annee, mois, jour);
        datePicker.setValue(ld);
    }

    private void createDatePicker() {
        this.datePicker = new DatePicker();
        datePicker.setPromptText("jj/mm/aaaa");
        datePicker.setEditable(true);

        datePicker.setOnAction(new EventHandler() {
            public void handle(Event t) {
                LocalDate date = datePicker.getValue();
                int index = getIndex();

                SimpleDateFormat smp = new SimpleDateFormat("dd/MM/yyyy");
                Calendar cal = Calendar.getInstance();
                cal.set(Calendar.DAY_OF_MONTH, date.getDayOfMonth());
                cal.set(Calendar.MONTH, date.getMonthValue() - 1);
                cal.set(Calendar.YEAR, date.getYear());

                setText(smp.format(cal.getTime()));
                commitEdit(cal.getTime());

                if (null != getBirthdayData()) {
                    getBirthdayData().get(index).setDate(cal.getTime());
                }
            }
        });

        setAlignment(Pos.CENTER);
    }

    @Override
    public void startEdit() {
        super.startEdit();
    }

    @Override
    public void cancelEdit() {
        super.cancelEdit();
        setContentDisplay(ContentDisplay.TEXT_ONLY);
    }

    public ObservableList<BirthdayEvent> getBirthdayData() {
        return birthdayData;
    }

    public void setBirthdayData(ObservableList<BirthdayEvent> birthdayData) {
        this.birthdayData = birthdayData;
    }

    public DatePicker getDatePicker() {
        return datePicker;
    }

    public void setDatePicker(DatePicker datePicker) {
        this.datePicker = datePicker;
    }

}

答案 1 :(得分:0)

要使tableView可编辑,您需要
tableView.setEditable(true)
覆盖startEdit()的{​​{1}},cancelEdit()方法 设置相关TableCell的{​​{1}} 编辑完成后调用revueDateCol.setOnEditCommit()

工作示例为official tutorial for Table View,例12-11:细胞编辑的替代解决方案 除了您将使用DatePicker而不是TextField之外,上面的前三个步骤几乎相同 最后一步可以是:

TableColumn