Question

我想通过一次修改来实现this example of celllist。一旦被某人点击，我想让每一行变为灰色。它应该保留在那里，并且不会随着用户点击另一行而改变。如果一旦新的服务器调用它就消失了，那没关系。我这样做是为了将其标记为用户的“阅读消息”。有线索吗？

我覆盖（更新）了cellList的css样式，如下所示，但是当我检查时，我没有看到正在应用'myCss'样式。

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;
}

Answer 1

一种方法是在所选对象中添加一个类并应用css。您可能必须覆盖cellList资源css。覆盖cellList资源css看看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. 
  }
});

编辑：

尝试了我自己的建议并且它有效。你需要覆盖资源。

一些示例代码。

将资源应用于celllist：

我在2个不同的类中创建了2个接口

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);

在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{}

在你的应用程序css文件中声明上面的css 附：添加了2个新类来显示访问过的

.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;
}

渲染隐藏字段以指示所选

    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 + "\"/>";
                }
            });
        }
    }
}

选择模型：

        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");
            }
        }
    });

Answer 2

你的意思是这样的：

enter image description here

您使用的是MultiselectionModel吗？

private final MultiSelectionModel<MyDTO> serlectionModel = new MultiSelectionModel<MyDTO>(keyProvider);
cellList.setSelectionModel(selectionModel, DefaultSelectionEventManager
                .<MyDTO>createDefaultManager());

想要在GWT单元列表中实现“标记为已读”功能

2 个答案: