GWT(Cell Widgets):在CellList中带有标签的CheckBoxes

时间:2011-07-19 11:39:29

标签: gwt widget

我想构建一个像...一样的CheckBox列表

|===========| 
| x label0  | 
| x label1  | 
| x label2  | 
|===========| 

...使用CellList,我完成了以下工作:

final List<Boolean> checks = Arrays.asList(true, false, true,  true, false); 

final CheckboxCell checkboxCell = new CheckboxCell(); 
final CellList<Boolean> checkBoxCellList = new CellList<Boolean(checkboxCell); 
checkBoxCellList.setRowData(checks); 

...所以我得到了:

|=======| 
| x     | 
| x     | 
| x     | 
|=======| 

但是我怎样才能提供CheckBox(布尔值)的值以及它的值

这样的标签
CheckBox#setText("label0")

CheckBox#setValue(true)

4 个答案:

答案 0 :(得分:3)

我为CellTable做了类似的事情。所以也许这样的 SOMETHING 会起作用。您需要提供自己的render()方法。所以在下面的render()方法中,你可以添加你想要的任何内容。

Column<MyJSONObject, String> selectCheckBoxColumn =
                new Column<MyJSONObject, String>(new MyCheckBoxCell()) {

                   @Override
                   public String getValue(MyJSONObject object) {
                      return object.getInternalId() + SEPERATOR +  "true";
                   }
                };
             MyCellTable.addColumn(selectCheckBoxColumn, "Display title");

    .....
    .....
    .....

       private class MyCheckBoxCell extends AbstractCell<String> {

          @Override
          public void render(Context context, String value, SafeHtmlBuilder sb) {


             // ##############################################
             String[] values = value.split(SEPERATOR);        
             // NOW values[0] contains the string value
             // AND values[1] contains the boolean value
             // ##############################################

             sb.appendHtmlConstant("<input type='checkbox' name='" + htmlDOMId1 + "'" +
                                   " id='" + htmlDOMId1 + "'" +
                                   " value='" + value + "'" +
                                   "></input>");

          }
       }

答案 1 :(得分:3)

我知道这个问题已经过时了,但我刚刚做了这个,所以我想我会提供一个答案。

CellList只能包含单个单元格类型的垂直列表。如果你想在那里有一个Checkbox,还有其他一些数据,你需要构建一个自定义单元格并扩展CompositeCell,它将组合并渲染单个单元格内的多个单元格。 You can see this in action here in the GWT ShowcaseCellTree中最内层的单元格)。

所以你的代码应该是这样的:

        // first make a list of HasCell type - MyClass is the type of object being displayed in the CellList (could be String for simple labels)
        List<HasCell<MyClass, ?>> hasCells = new ArrayList<HasCell<MyClass, ?>>();

        // then add your checkbox cell to it
        hasCells.add(new HasCell<MyClass, Boolean>()
        {
            private CheckboxCell cell = new CheckboxCell(true, false);

            public Cell<Boolean> getCell()
            {
                return cell;
            }
            public FieldUpdater<MyClass, Boolean> getFieldUpdater()
            {
                return null;
            }
            @Override
            public Boolean getValue(MyClass object)
            {
                return selectionModel.isSelected(object);
            }
        });

        // then add your TextCell
        hasCells.add(new HasCell<MyClass, MyClass>()
        {
            private TextCell cell = new TextCell(myString);

            @Override
            public Cell<MyClass> getCell()
            {
                return cell;
            }
            public FieldUpdater<MyClass, MyClass> getFieldUpdater()
            {
                return null;
            }
            public MyClass getValue(MyClass object)
            {
                return object;
            }
        });

        // now construct the actual composite cell using the list (hasCells)
        Cell<MyClass> myClassCell = new CompositeCell<MyClass>(hasCells)
        {
            @Override
            public void render(Context context, MyClass value, SafeHtmlBuilder sb)
            {
                sb.appendHtmlConstant("<table><tbody><tr>");
                super.render(context, value, sb);
                sb.appendHtmlConstant("</tr></tbody></table>");
            }
            @Override
            protected Element getContainerElement(Element parent)
            {
                // Return the first TR element in the table.
                return parent.getFirstChildElement().getFirstChildElement().getFirstChildElement();
            }
            @Override
            protected <X> void render(Context context, MyClass value, SafeHtmlBuilder sb, HasCell<MyClass, X> hasCell)
            {
                // this renders each of the cells inside the composite cell in a new table cell
                Cell<X> cell = hasCell.getCell();
                sb.appendHtmlConstant("<td>");
                cell.render(context, hasCell.getValue(value), sb);
                sb.appendHtmlConstant("</td>");
            }
        };

        // then make the actual cellList, passing the composite cell
        myList = new CellList<MyClass>(myClassCell);
        // add selectionModel, making sure to pass in a checkBoxManager as a second parameter, or the selectionModel will not work
        myList.setSelectionModel(selectionModel, DefaultSelectionEventManager.<MyClass> createCheckboxManager());

        // construct a dataProvider for dynamic editing of the list (alternative to list.setRowData())
        dataProvider = new ListDataProvider<MyClass>(data);
        // associate the dataProvider with the CellList
        dataProvider.addDataDisplay(myList);

答案 2 :(得分:2)

最简单的方法是使用CellTable并且不添加列标题(因此它看起来像CellList)

为复选框添加一列(使用CheckBoxCell),并为您的其他数据添加一列。 这是最干净的方式。不要使用自己的自定义单元格,并在其中使用html复选框。

这也适用于在单元格表上使用MultiSelectionModel来获取复选框的值。

答案 3 :(得分:0)

我正在阅读的GWT书中有一个例子,除了作者在面板中使用带复选框的垂直面板。使用一点造型,你有一个列表框外观