问题
I want to implement this example of celllist with one modification. I want to make each row to a grey color once its clicked by someone. It should persist there, and not change as the user clicks on another row. It's okay if its gone once a new server call is made. I'm doing this to mark it as a 'read message' for the user. Any clues?
I overrided (updated) the css style of cellList as below but when I inspect I dont see the 'myCss' style being applied .
CellListStyles.css
@external .dataView-cellListWidget;
@external .dataView-cellListEvenItem;
@external .dataView-cellListOddItem;
@external .dataView-cellListKeyboardSelectedItem;
@external .dataView-cellListSelectedItem;
.dataView-cellListWidget{}
.dataView-cellListEvenItem{}
.dataView-cellListOddItem{}
.dataView-cellListKeyboardSelectedItem{}
.dataView-cellListSelectedItem{}
.dataView-cellListWidget {
}
@external .dataView-cellListEvenItem .myCss{
background-color: aqua;
}
@external .dataView-cellListOddItem .myCss{
background-color: aqua;
}
.dataView-cellListEvenItem,.dataView-cellListOddItem {
cursor: pointer;
padding: 2px 5px;
zoom: 1;
}
@external .dataView-cellListKeyboardSelectedItem .myCss{
background-color: red;
}
.dataView-cellListKeyboardSelectedItem {
background: #ffc;
}
.dataView-cellListSelectedItem {
background-color: #FFCBC1;
color: #121212;
height: auto;
overflow: visible;
}
回答1:
You mean something like this:
Did you use a MultiselectionModel
?
private final MultiSelectionModel<MyDTO> serlectionModel = new MultiSelectionModel<MyDTO>(keyProvider);
cellList.setSelectionModel(selectionModel, DefaultSelectionEventManager
.<MyDTO>createDefaultManager());
回答2:
One way to do it will be add a class to the selected object and apply css. you might have to override cellList resource css. to override cellList resource css have a look here.
selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
public void onSelectionChange(SelectionChangeEvent event) {
contactForm.setContact(selectionModel.getSelectedObject());
/** for setting it selected**/
add a class to the selected object here instead of setting background. And set background as grey using css.
}
});
Edit :
A tried my own suggestion and it works. you need to override the resource.
Some sample code.
Apply resources to celllist :
i have created 2 interfaces in 2 separate classes
public interface DataViewCellListResources extends CellList.Resources
{
@Import(value = {DataViewCellListStyles.class})
@Source("sortListStyle.css")
DataViewCellListStyles cellListStyle();
}
@ImportedWithPrefix("dataView")
public interface DataViewCellListStyles extends CellList.Style
{
}
final CellList<Contact> cellList = new CellList<Contact>(new ContactCell(),
(Resources) GWT.create(DataViewCellListResources.class), keyProvider);
use this in sortListStyle.css
@external .dataView-cellListWidget;
@external .dataView-cellListEvenItem;
@external .dataView-cellListOddItem;
@external .dataView-cellListKeyboardSelectedItem;
@external .dataView-cellListSelectedItem;
.dataView-cellListWidget{}
.dataView-cellListEvenItem{}
.dataView-cellListOddItem{}
.dataView-cellListKeyboardSelectedItem{}
.dataView-cellListSelectedItem{}
declare above css in your application css files P.S. added 2 new classes for showing visited
.dataView-cellListWidget {
}
.dataView-cellListEvenItem.myCss{
background-color: aqua;
}
.dataView-cellListOddItem.myCss{
background-color: aqua;
}
.dataView-cellListEvenItem,.dataView-cellListOddItem {
cursor: pointer;
padding: 2px 5px;
zoom: 1;
}
.dataView-cellListKeyboardSelectedItem .myClass{
background-color: red;
}
.dataView-cellListKeyboardSelectedItem {
background: #ffc;
}
.dataView-cellListSelectedItem {
background-color: #FFCBC1;
color: #121212;
height: auto;
overflow: visible;
}
Render a hidden field to indicate selected
private static class ContactCell extends AbstractCell<Contact>
{
@Override
public void render(com.google.gwt.cell.client.Cell.Context context, final Contact value, SafeHtmlBuilder sb)
{
if (value != null)
{
sb.appendEscaped(value.name);
sb.append(new SafeHtml()
{
@Override
public String asString()
{
return "<input type=\"hidden\" id=\"" + value.isSlected + "\"/>";
}
});
}
}
}
Selection Model :
selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler()
{
@Override
public void onSelectionChange(SelectionChangeEvent event)
{
Contact selectedObject = selectionModel.getSelectedObject();
selectedObject.isSlected = true;
Element element = cellList.getElement();
NodeList<com.google.gwt.dom.client.Element> elementsByTagName = element.getElementsByTagName("input");
for (int i = 0; i < elementsByTagName.getLength(); i++)
{
com.google.gwt.dom.client.Element item = elementsByTagName.getItem(i);
if (item.getId().equals("true")) item.getParentElement().addClassName("myCss");
}
}
});
来源:https://stackoverflow.com/questions/20509894/want-to-implement-mark-as-read-feature-in-gwt-cell-list