2014-02-16 2 views
0

Я хочу, чтобы один столбец был заполнен кнопками [моя собственная настраиваемая кнопка], и вы хотите, чтобы на этой кнопке были кнопки кликов для этой кнопки? Как создать код?Как добавить настраиваемую кнопку в GWT dataGrid?

Благодаря


клеток клетки = новый AbstractCell() {

@Override 
    public void render(com.google.gwt.cell.client.Cell.Context context, String value, SafeHtmlBuilder sb) 
    { 
     FlowPanel fp = new FlowPanel(); 
     custombutton tb = new custombutton ("click"); 
     tb.setText(value); 
     fp.add(tb); 
     sb.appendHtmlConstant(fp.getElement().getString()); 
    } 
}; 
// Address. 
Column<ContactInfo, String> addressColumn = new Column<ContactInfo, String>(cell) 
{ 
    @Override 
    public String getValue(ContactInfo object) 
    { 
     return object.getAddress(); 
    } 

Это мой код, если ContactInfo.getid() верно только я должен создать кнопку для этого но теперь его создание создается для всех столбцов? предложите какую-нибудь идею ?,

+0

как насчет кнопок. http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCellSampler –

+0

Я хочу добавить настраиваемую кнопку? – user3192996

ответ

0

Вы можете использовать ActionCell, а затем применить к нему CSS, чтобы он выглядел так, как вам нравится.

Посмотрите на GWT Витрина для примера того, как это сделать: http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCellSampler

+0

Я хочу добавить в свою колонку только для определенных условий. поэтому, как проверить условие перед добавлением ячейки в столбец. более того, я хочу использовать закругленную кнопку, поэтому у меня есть таможня, как я могу использовать свою настраиваемую кнопку и написать для нее обработчик кликов? – user3192996

+0

1. В GWT вы никогда не добавляете обработчики к кнопкам внутри столбца - вы просто переопределяете execute() в ActionCell. Посмотрите на код в примере Витрины, который я предоставил. 2. Вы можете добавить или скрыть столбец, и вы можете показать или скрыть кнопку внутри каждой отдельной ячейки на основе любых условий, которые вам нравятся. 3. Как я уже сказал, используйте CSS, чтобы ваша кнопка выглядела так, как вам нравится, - округленная, с градиентом, что угодно. –

+0

PLS предоставить подробный one.especially, как получить объект и проверить условие перед добавлением в столбец – user3192996

0

Я реализовал подобную функциональность, создавая новую пользовательскую ячейку, которая принимает список объектов пользовательских действий.

Action{ 
String id; 
boolean clicked; 
ClickHandler handler; 
} 

CustomCell extends AbstractCell<List<Action>>{ 
} 

В методе визуализации я создал элемент кнопки, имеющий значение «id» для каждого объекта действия в списке действий.

@Template("<button id=\"{0}\"></button>") 
SafeHtml buttonHtml(String id); 

public void render(Context context, List<Action> rowActions, SafeHtmlBuilder sb) { 
    for(Action action: rowActions){ 
    sb.append(buttonHtml(action.getId())); 
    } 
} 

В onBrowserEvent, когда щелчок происходит, если это происходит в элементе диапазона, мы могли бы получить идентификатор этого диапазона элемента, и установить соответствующий объект действия в щелкнул состояния.

@Override 
public void onBrowserEvent(Context context, Element parent, List<Action> value, NativeEvent event, 
    ValueUpdater<List<Action>> valueUpdater) { 
    // Let AbstractCell handle the keydown event. 
    super.onBrowserEvent(context, parent, value, event, valueUpdater); 

    // Handle the click event. 
    if ("click".equals(event.getType())) { 
    // Ignore clicks that occur outside of the outermost element. 
    EventTarget eventTarget = event.getEventTarget(); 

    if (parent.isOrHasChild(Element.as(eventTarget))) { 
     // if (parent.getFirstChildElement().isOrHasChild(
     // Element.as(eventTarget))) { 

     // use this to get the selected element!! 
     Element el = Element.as(eventTarget); 

     // check if we really click on the image 
     if (el.getTagName().equalsIgnoreCase("button")) { 
      for(Action action:value){ 
       if(el.getAttribute("id").equals(action.getId())){ 
        action.setClicked(true); 
       } 
      } 
      doAction(value, 
        valueUpdater); 
     } 
    } 
    } 
} 

Внутри средства обновления значения, в зависимости от состояния щелчка, вызывается метод обработки объектов объектов действий.

+0

Я создал actioncell, и он отлично работает. Но если я применяю CSS, он применяется ко всей ячейке, а не к кнопке button.pls – user3192996

0
public static Column<VolunteerTO, VolunteerTO> createReissueButtonColumn(String columnName) { 

    ActionCell<VolunteerTO> reListCell = new ActionCell<VolunteerTO>("Reissue", new ActionCell.Delegate<VolunteerTO>() { 
       @Override 
       public void execute(VolunteerTO object) { 
        // code to be executed 
       } 
      }) 
     { 
      @Override 
      public void render(Cell.Context context,VolunteerTO value,SafeHtmlBuilder sb) { 
       if(null != value.getVolunteerStatus() && !"".equalsIgnoreCase(value.getVolunteerStatus())) { 
        super.render(context,value,sb); 
       } 

      } 


     }; 

     Column<VolunteerTO, VolunteerTO> reListColumn = new Column<VolunteerTO, VolunteerTO>(reListCell) { 
       @Override 
       public VolunteerTO getValue(VolunteerTO object) { 
       return object; 
       } 
       public String getCellStyleNames(Cell.Context context, VolunteerTO object) { 

       if(object.getVolunteerStatus().equalsIgnoreCase(GatesClientConstants.ISSUED)|| object.getVolunteerStatus().equalsIgnoreCase(GatesClientConstants.PROTECTED)){ 
        return "myButtonStyle"; 
       }else if(object.getVolunteerStatus().equalsIgnoreCase(GatesClientConstants.ACCEPTED)|| object.getVolunteerStatus().equalsIgnoreCase(GatesClientConstants.RELEASED)){ 
        return "btn_disable"; 
       } 
       return "leftalign"; 

      } 

     }; 
     reListColumn.setDataStoreName(columnName); 
     reListColumn.setSortable(false); 
    return reListColumn; 

} 
+0

CSS применяется для всей ячейки не к Button? – user3192996

+0

.myButtonStyle; .myButtonStyle { background-color: red; } .myButtonStyle TD button { background: # 002A50; цвет: белый; Размер шрифта: 5pt; !важный; text-align: center; cursor: указатель; font-weight: normal; ширина: 15px; !важный; высота: 15px; !важный; } @external .btn_disable; .btn_disable { background: # 002A50; цвет: серый; Размер шрифта: 5pt;! Important; text-align: center; cursor: default; font-weight: normal; ширина: 15px;! Important; высота: 15px;! Important; } – user3192996

Смежные вопросы