所以，我有一個名為“eventGrid”的網格。我添加了一個帶有向下箭頭圖示的組件列。當用戶單擊一行時，會顯示該行的附加資訊。我想將所選行的向下箭頭更改為向上箭頭。我怎樣才能做到這一點？
eventGrid.addColumn(Person::getFirst).setHeader("First Name");
eventGrid.addColumn(Person::getLast).setHeader("Last Name");
eventGrid.addColumn(Person::getNumber).setHeader("Phone Number");
eventGrid.addComponentColumn(item -> {
Icon icon = new Icon("lumo", "angle-down");
return icon;
}).setWidth("6em").setFlexGrow(0);
uj5u.com熱心網友回復：
解決方案有兩個步驟。首先，您需要使渲染器對所選專案做出不同的反應，其次，您需要使網格重新渲染所選狀態更改的行。
第一部分可以在組件渲染器中處理：
eventGrid.addComponentColumn(item -> {
String name = eventGrid.getSelectedItems().contains(item) ? "angle-down" : "angle-up";
Icon icon = new Icon("lumo", name);
return icon;
}).setWidth("6em").setFlexGrow(0);
第二部分是一個偵聽器，用于DataProvider::refreshItem觸發重新呈現特定行。這是通過asSingeSelect獲取包含舊值和新值的事件來實作的。
eventGrid.asSingleSelect().addValueChangeListener(event -> {
String newValue = event.getValue();
String oldValue = event.getOldValue();
if (newValue != null) {
eventGrid.getDataProvider().refreshItem(newValue);
}
if (oldValue != null) {
eventGrid.getDataProvider().refreshItem(oldValue);
}
});
uj5u.com熱心網友回復：
假設您有一個記憶體中的 DataProvider：
Grid<Person> eventGrid = new Grid<Person>();
eventGrid.addColumn(Person::getFirst).setHeader("First Name");
eventGrid.addColumn(Person::getLast).setHeader("Last Name");
eventGrid.addColumn(Person::getNumber).setHeader("Phone Number");
eventGrid.addComponentColumn(item -> {
Icon icon = new Icon("lumo", "angle-down");
if (item.equals(eventGrid.asSingleSelect().getValue())) {
icon = new Icon("lumo", "angle-up");
}
return icon;
}).setWidth("6em").setFlexGrow(0);
eventGrid.addSelectionListener(e -> {
eventGrid.getListDataView().refreshAll();
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/529600.html