Java 在vaadin中单击表的行后，需要显示类似于表单或内联可编辑的

我对瓦丁很陌生。我从JSON文件中获取数据，并以表格形式显示数据。如果我想编辑ant值，在点击一行之后，我应该得到包含该行值的表单。我怎样才能在瓦丁做到这一点

这是我的密码

public class MainView extends TabSheet implements View{

public static final String TITLE_ID = "proposals-title";

private Label titleLabel;

private Window window;

private Table grid;

private static final String ACTIVE = "active";
private static final String CONVERTED = "converted";
private static final String CANCELLED = "cancelled";
private final VerticalLayout root;
private CatalogDataProvider proposalDataProvider = new    
CatalogDataProvider(new FileDataProviderUtil());
private Object sortContainerPropertyId;

public MainView() {
    addStyleName(ValoTheme.TABSHEET_PADDED_TABBAR);
    root = new VerticalLayout();
    /*root.setSizeFull();*/
    root.setMargin(true);
    root.setCaption("All Proposals");


    addTab(root);

    Responsive.makeResponsive(root);
    root.addComponent(buildHeader());
    root.setSpacing(true);


    grid = new Table();

   grid.addItemClickListener(new ItemClickEvent.ItemClickListener() {
        @Override
        public void itemClick(ItemClickEvent itemClickEvent) {
            final String title = "Details";

            final ProposalDetailsView proposalDetailsView = new 
     ProposalDetailsView("128", title);
            updateTable(proposalDetailsView);
            proposalDetailsView.getTextField_1();
            System.out.println(proposalDetailsView + 
          proposalDetailsView.getTextField_1().getValue().toString());
            addTab(proposalDetailsView).setClosable(true);
            setSelectedTab(getComponentCount() - 1);
            getTab(proposalDetailsView).setCaption(title);

        }

        private void updateTable(ProposalDetailsView 
           proposalDetailsView) {
            // TODO Auto-generated method stub

        }


    });

    updateTable(ACTIVE);

    grid.addItemClickListener(new ItemClickEvent.ItemClickListener() {
        @Override
        public void itemClick(ItemClickEvent itemClickEvent) {
            Notification.show("Clicked");
        }
    });

    //root.setSpacing(true);
    root.addComponent(grid);


    // All the open sub-windows should be closed whenever the root layout
    // gets clicked.
    root.addLayoutClickListener(new LayoutClickListener() {
        @Override
        public void layoutClick(final LayoutClickEvent event) {
       }
      });

     }


    public Component buildHeader() {
    HorizontalLayout header = new HorizontalLayout();
    header.setSpacing(true);

    titleLabel = new Label("Proposals");
    titleLabel.setId(TITLE_ID);
    titleLabel.setSizeUndefined();
    titleLabel.addStyleName(ValoTheme.LABEL_H1);
    titleLabel.addStyleName(ValoTheme.LABEL_NO_MARGIN);
    header.addComponent(titleLabel);

    JSONArray proposal_classes = 
        proposalDataProvider.getCatalogClasses();
    HorizontalLayout tools = new HorizontalLayout();

    for(int i=0;i<proposal_classes.length();i++)
    {
        try {
            JSONObject jsonObject = proposal_classes.getJSONObject(i);
            int id = jsonObject.getInt("count");
            String name=jsonObject.getString("class");

            Button status_button=new Button(name+" ("+id+")");

      status_button.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);

            tools.addComponent(status_button);

        } catch (JSONException e) {
            e.printStackTrace();
        }
    }

    tools.setSpacing(true);

    tools.addStyleName("toolbar");
    header.addComponent(tools);

    return header;
    }

   public void updateTable(String catalogClass) {
    try {
        // Use the factory method of JsonContainer to instantiate the
        // data source for the table.

        JSONArray proposals = 
    proposalDataProvider.getCatalogs(catalogClass);

        JsonContainer dataSource = 
      JsonContainer.Factory.newInstance(proposals.toString());
        grid.setContainerDataSource(dataSource);

        grid.setColumnReorderingAllowed(true);
        grid.setVisibleColumns("productId", "name", "defaultPrice", 
    "dimension", "designer", "subcategory", "categoryId", 
      "subcategoryId", "defaultMaterial");
        grid.setColumnHeaders("Product ID #", "Name", "Status", 
      "Description","Dimension", "Designer", "subcategory", 
       "categoryId", "subcategoryId", "Def_material");
        grid.setWidth("98%");
    } catch (IllegalArgumentException ignored) {

    }
    }
   @Override
   public void enter(ViewChangeEvent viewChangeEvent) {
   }
   public Object getSortContainerPropertyId() {
    return sortContainerPropertyId;
    }
    }

---

千万吨的感谢。请建议我如何实现这一点。

对于内联表编辑，请尝试以下链接，谢谢，但如何将其集成到我的代码@HaseebAnser ji中。你能帮我一下吗？我建议你使用电子瓦丁网格组件而不是表bcz。这将更容易参考：我现在才使用网格。但是，在表中，它只显示了JSON中的第1行数据，即列标题，但没有这些Columns@HaseeBanSer的数据。那么，解析JSON数据的步骤中肯定有一些错误

    public class ProposalDetailsView extends  EditCompositeView {
    private String proposalId;
    private String title;
    VerticalLayout layout = new VerticalLayout();
    public ProposalDetailsView(String proposalId, String title) {

    this.proposalId = proposalId;
    this.title = title;
   layout.setSizeFull();
   layout.addStyleName(ValoTheme.PANEL_SCROLL_INDICATOR);
    layout.addComponent(buildHeader());
    }

    private Component buildHeader() {
    HorizontalLayout header = new HorizontalLayout();
    header.addStyleName("viewheader");
    header.setSpacing(true);
    Label titleLabel = new Label(this.title);
    titleLabel.addStyleName(ValoTheme.LABEL_H1);
    titleLabel.addStyleName(ValoTheme.LABEL_NO_MARGIN);
    header.addComponent(titleLabel);
    VerticalLayout layout = new VerticalLayout();
    MainView min = new MainView();
    getTextField_1().setValue(proposalId);
    getTextField_2().setValue(proposalId);

    return header;
    }

    }