想要实现';标记为已读';GWT单元列表中的功能
我想实现一个修改。我想让每一行在被人点击后变成灰色。它应该保持在那里,并且不会随着用户单击另一行而改变。只要有新的服务器调用,它就消失了。我这样做是为了将它标记为用户的“阅读消息”。有什么线索吗 我覆盖(更新)了cellList的css样式,如下所示,但当我检查时,我看不到应用了“myCss”样式 CellListStyles.css想要实现';标记为已读';GWT单元列表中的功能,gwt,uibinder,gwt2,Gwt,Uibinder,Gwt2,我想实现一个修改。我想让每一行在被人点击后变成灰色。它应该保持在那里,并且不会随着用户单击另一行而改变。只要有新的服务器调用,它就消失了。我这样做是为了将它标记为用户的“阅读消息”。有什么线索吗 我覆盖(更新)了cellList的css样式,如下所示,但当我检查时,我看不到应用了“myCss”样式 CellListStyles.css @external .dataView-cellListWidget; @external .dataView-cellListEvenItem; @extern
@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;
}
一种方法是向所选对象添加一个类并应用css。您可能必须覆盖cellList资源css。要覆盖cellList资源,请查看css 编辑: A尝试了我自己的建议,效果很好。您需要覆盖资源 一些示例代码 将资源应用于celllist: 我在两个单独的类中创建了两个接口
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);
在应用程序css文件中声明上述css
P.S.增加了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 + "\"/>";
}
});
}
}
}
私有静态类ContactCell扩展AbstractCell
{
@凌驾
public void render(com.google.gwt.cell.client.cell.Context上下文,最终联系人值,安全HTMLBuilder sb)
{
if(值!=null)
{
某人(价值、姓名);
sb.append(新的SafeHtml()
{
@凌驾
公共字符串asString()
{
返回“”;
}
});
}
}
}
选择模型:
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");
}
}
});
selectionModel.addSelectionChangeHandler(新的SelectionChangeEvent.Handler()
{
@凌驾
选择更改时公共无效(选择更改事件)
{
联系selectedObject=selectionModel.getSelectedObject();
selectedObject.isselected=true;
Element=cellList.getElement();
NodeList elementsByTagName=element.getElementsByTagName(“输入”);
for(int i=0;i
你的意思是这样的:
您是否使用了多选模型
private final MultiSelectionModel<MyDTO> serlectionModel = new MultiSelectionModel<MyDTO>(keyProvider);
cellList.setSelectionModel(selectionModel, DefaultSelectionEventManager
.<MyDTO>createDefaultManager());
private final MultiSelectionModel serselectionmodel=新的MultiSelectionModel(keyProvider);
cellList.setSelectionModel(selectionModel,DefaultSelectionEventManager
.createDefaultManager());
selectionModel.addSelectionChangeHandler(..)试图获取所选元素并更改背景样式。这只在第一次选中元素时起作用,它不会在单击时动态更改列表。到目前为止,您尝试了什么?您能编辑您的问题并添加一些代码吗?@nanoPeck上面的此处链接指的是CellTable资源,但您也可以对CellListint keyboardSelectedRow=cellList.getKeyboardSelectedRow()执行类似操作;cellList.getRowElement(keyboardSelectedRow).addClassName(“greyClass”);我试过上面两行,但都不行。它仅适用于单个值,而不是keyboardSelectedRow。动态更改值会使外观或样式发生变化。@nanospeck是的,我也尝试过,但不起作用,您可能想尝试覆盖在其资源中定义的celllist的css,并通过定义选定类和奇偶类以及greyClass来尝试。我的看法是,一旦选择被更改,它可能会覆盖css类,这可能会使我们的SetClassName无效,这对您非常有帮助。我正在尝试,但出现了一个错误,以下未模糊的类出现在一个严格的CssResource中:myClass,myCss。我会更深入地研究它,同时你能看看给出的答案是否完整并且你没有错过分享任何代码的机会吗。@nanospec myClass是打字错误,对此很抱歉。。出现该错误是因为您必须尝试在sortListStyle.css中声明这些类。您应该完全按照描述声明css文件,并将myCss添加到应用程序css文件中。。
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");
}
}
});
private final MultiSelectionModel<MyDTO> serlectionModel = new MultiSelectionModel<MyDTO>(keyProvider);
cellList.setSelectionModel(selectionModel, DefaultSelectionEventManager
.<MyDTO>createDefaultManager());