问题：
如何在另一个div中分配一个div
关苗宣
各位早上好，我正在创建一个产品销售系统，这个话题会有点长，因为我想好好解释一下。
正在用Vaadin+MySQL+html" target="_blank">springboot+Maven开发的系统
在主屏幕上，我们有一个网格，上面有“新建”、“更改”和“删除”按钮：
当点击new按钮时，将打开一个窗口，开始“销售”产品：
这里的问题是这样的，当我点击“+项”时会出现以下情况：
问题：创建了一个滚动条（在窗口的右边），保存、关闭和+项按钮下移（只在滚动条向下滚动时出现）。每次我尝试添加一个产品(+item)，这个过程都是重复的，按钮都被扔下来了。
理想的解决方案：我希望按钮“冻结或固定”在底部的窗口，并通过添加产品，滚动条甚至可以创建，但不移动按钮向下
我想到了这样的事情：
接收产品的div2在任何情况下都不能侵入divs1和3（上部和下部）
但我承认我无法创造这个…我尝试了很多方法，但都失败了
如果有人能帮助我，我很感激
我的代码：
package br.com.fjsistemas.cadastros.view;
import java.text.NumberFormat;
import java.text.ParseException;
import java.time.LocalDate;
import java.util.HashMap;
import java.util.List;
import java.util.Locale;
import java.util.Map;
import javax.annotation.PostConstruct;
import org.springframework.beans.factory.annotation.Autowired;
import org.vaadin.textfieldformatter.CustomStringBlockFormatter;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.datepicker.DatePicker;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.grid.GridVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.textfield.NumberField;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.data.binder.PropertyId;
import com.vaadin.flow.data.renderer.NumberRenderer;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import br.com.fjsistemas.backend.Cliente;
import br.com.fjsistemas.backend.Produto;
import br.com.fjsistemas.backend.Venda;
import br.com.fjsistemas.main.MainView;
import br.com.fjsistemas.repository.ClienteRepository;
import br.com.fjsistemas.repository.ProdutoRepository;
import br.com.fjsistemas.service.VendaService;
@Route(value = "venda-view", layout = MainView.class)
@PageTitle("Lançamento de Vendas")
public class VendaView extends VerticalLayout {
private static final long serialVersionUID = 1L;
private HorizontalLayout hltVenda = new HorizontalLayout();
Grid<Venda> grdVenda = new Grid<>(Venda.class, false);
private HorizontalLayout hltBarraBotoes = new HorizontalLayout();
Button btnNovo = new Button("Novo");
Button btnAlterar = new Button("Alterar");
Button btnExcluir = new Button("Excluir");
private Dialog dlgJanela = new Dialog();
private FormLayout fltCamposVenda = new FormLayout();
HorizontalLayout primeiraLinhaGuiaVenda = new HorizontalLayout();
HorizontalLayout segundaLinhaGuiaVenda = new HorizontalLayout();
Tab vender = new Tab("Vendas");
Div venderDiv = new Div();
Tab entrega = new Tab("Entregas");
Div entregaDiv = new Div();
Tab financeiro = new Tab("Financeiro");
Div financeiroDiv = new Div();
@PropertyId("data")
private DatePicker txtDataVenda = new DatePicker("Data Venda");
@PropertyId("nome")
private ComboBox<Cliente> txtNomeCliente = new ComboBox<>();
@PropertyId("telefone")
private TextField txtTelefone = new TextField("Telefone");
@PropertyId("celular")
private TextField txtCelular = new TextField("Celular");
@PropertyId("campoSomaValores")
private TextField campoSomaValores = new TextField();
private HorizontalLayout htlDlgBarraBotoes = new HorizontalLayout();
private Button btnSalvar = new Button("Salvar");
private Button btnFechar = new Button("Fechar");
private Button btnAdicionarItem = new Button("+ Item");
@Autowired
VendaService vendaService;
@Autowired
ClienteRepository clienteRepository;
@Autowired
ProdutoRepository produtoRepository;
private List<Venda> listaVendas;
private Venda venda;
Binder<Venda> binderVenda = new Binder<>(Venda.class);
public VendaView() {
}
@PostConstruct
public void init() {
configuraTela();
}
private void configuraTela() {
setMargin(false);
setPadding(false);
configuraHltVenda();
configuraFltBarraBotoes();
configuraDlgJanela();
populaGrdVenda();
configuraBinder();
add(hltVenda, hltBarraBotoes);
}
private void configuraFltBarraBotoes() {
btnNovo.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
btnNovo.addClickListener(e -> {
novoClick();
});
btnAlterar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
btnAlterar.addClickListener(e -> {
alterarClick();
});
btnExcluir.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
btnExcluir.addClickListener(e -> {
excluirClick();
});
hltBarraBotoes.add(btnNovo, btnAlterar, btnExcluir);
}
private void excluirClick() {
if (venda != null) {
listaVendas.remove(venda);
vendaService.delete(venda);
atualizaGrdVenda();
}
}
private void configuraHltVenda() {
hltVenda.setWidthFull();
configuraGrdVenda();
hltVenda.add(grdVenda);
}
private void configuraGrdVenda() {
grdVenda.setHeight("820px");
grdVenda.setWidthFull();
grdVenda.addColumn(Venda::getId).setHeader("ID:").setAutoWidth(true);
grdVenda.addColumn(Venda::getDataVenda).setHeader("Data Venda:").setAutoWidth(true).setKey("dataVenda");
grdVenda.addColumn(Venda::getNomeCliente).setHeader("Nome:").setAutoWidth(true).setKey("nome");
grdVenda.addColumn(new NumberRenderer<>(Venda::getValorTotalVenda, "R$ %(,.2f", Locale.getDefault(), "R$ 0.00"))
.setHeader("Valor Total:").setAutoWidth(true).setKey("valorTotalVenda");
grdVenda.addThemeVariants(GridVariant.LUMO_COMPACT, GridVariant.LUMO_COLUMN_BORDERS);
grdVenda.getColumns().forEach(col -> col.setAutoWidth(true).setSortable(true).setResizable(true));
grdVenda.addItemClickListener(e -> {
venda = e.getItem();
});
}
private void configuraDlgJanela() {
dlgJanela.setHeight("755px");
dlgJanela.setWidth("860px");
//=====================================================================================================================
txtNomeCliente.setWidth("390px");
txtNomeCliente.setLabel("Nome Cliente");
List<Cliente> listaDeClientes = clienteRepository.findAll();
txtNomeCliente.setItemLabelGenerator(Cliente::getNome);
txtNomeCliente.setItems(listaDeClientes);
txtNomeCliente.addValueChangeListener(event -> {
txtTelefone.setValue(event.getValue().getFone());
txtCelular.setValue(event.getValue().getCelular());
});
new CustomStringBlockFormatter.Builder().blocks(0, 2, 4, 4).delimiters("(", ")", "-").numeric().build()
.extend(txtTelefone);
new CustomStringBlockFormatter.Builder().blocks(0, 2, 5, 4).delimiters("(", ")", "-").numeric().build()
.extend(txtCelular);
//=====================================================================================================================
Label text = new Label("Valor Total da Compra");
text.getElement().getStyle().set("fontWeight", "bold");
text.getStyle().set("margin-top", "30em");
text.getStyle().set("margin-left", "5em");
text.getStyle().set("text-align", "center");
campoSomaValores.getStyle().set("margin-top", "30em");
campoSomaValores.setWidth("30em");
//==========================================================================================================================
segundaLinhaGuiaVenda.add(txtNomeCliente, txtTelefone, txtCelular);
fltCamposVenda.add(venderDiv, entregaDiv, financeiroDiv);
venderDiv.setHeight("120px");
venderDiv.add(txtDataVenda, segundaLinhaGuiaVenda);
vender.add(venderDiv);
LocalDate now = LocalDate.now();
txtDataVenda.setValue(now);
Map<Tab, Component> tabsToPages = new HashMap<>();
tabsToPages.put(vender, venderDiv);
tabsToPages.put(entrega, entregaDiv);
tabsToPages.put(financeiro, financeiroDiv);
Tabs tabs = new Tabs(vender, entrega, financeiro);
Div pages = new Div(venderDiv, entregaDiv, financeiroDiv);
tabs.addSelectedChangeListener(event -> {
tabsToPages.values().forEach(page -> page.setVisible(false));
Component selectedPage = tabsToPages.get(tabs.getSelectedTab());
selectedPage.setVisible(true);
});
dlgJanela.add(tabs, pages);
btnSalvar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
btnSalvar.getStyle().set("margin-top", "30em");
btnSalvar.getStyle().set("margin-left", "0em");
btnSalvar.addClickListener(e -> {
salvarClick();
});
btnFechar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
btnFechar.getStyle().set("margin-top", "30em");
btnFechar.addClickListener(e -> {
dlgJanela.close();
});
btnAdicionarItem.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
btnAdicionarItem.getStyle().set("margin-top", "30em");
btnAdicionarItem.addClickListener(e -> {
adicionaProduto();
});
htlDlgBarraBotoes.add(btnSalvar, btnFechar, btnAdicionarItem, text, campoSomaValores);
dlgJanela.add(fltCamposVenda, htlDlgBarraBotoes);
}
private void salvarClick() {
venda = binderVenda.getBean();
boolean adicionarLista = venda.getId() == null ? true : false;
vendaService.create(venda);
if (adicionarLista) {
listaVendas.add(venda);
}
atualizaGrdVenda();
novaVenda();
txtNomeCliente.focus();
binderVenda.setBean(venda);
if (adicionarLista) {
dlgJanela.close();
}
}
private void populaGrdVenda() {
listaVendas = vendaService.read();
atualizaGrdVenda();
}
private void atualizaGrdVenda() {
grdVenda.setItems(listaVendas);
}
private void configuraBinder() {
binderVenda.bindInstanceFields(this);
}
private void novoClick() {
novaVenda();
binderVenda.setBean(venda);
dlgJanela.open();
txtNomeCliente.focus();
}
private void alterarClick() {
if (venda != null) {
binderVenda.setBean(venda);
dlgJanela.open();
}
}
private void adicionaProduto() {
ComboBox<Produto> txtProdutos = new ComboBox<>();
NumberField txtQuantidade = new NumberField("Quantidade");
TextField txtValorUnitario = new TextField("Valor Unitário");
TextField txtValorTotalItem = new TextField("Valor Total Item");
txtProdutos.setWidth("370px");
txtProdutos.setLabel("Produtos");
List<Produto> listaDeProdutos = produtoRepository.findAll();
txtProdutos.setItemLabelGenerator(Produto::getNome);
txtProdutos.setItems(listaDeProdutos);
txtProdutos.addValueChangeListener(event -> {
NumberFormat formatter = NumberFormat.getCurrencyInstance(new Locale("pt", "BR"));
try {
txtValorUnitario.setValue(formatter.format(event.getValue().getValor()));
} catch (Exception e) {
e.printStackTrace();
}
});
//==========================================================================================================================
txtQuantidade.setHasControls(true);
txtQuantidade.setValue(null);
txtQuantidade.setMin(1);
txtQuantidade.addValueChangeListener(event -> {
NumberFormat formatter = NumberFormat.getCurrencyInstance(new Locale("pt", "BR"));
double valorTotal = 0;
try {
valorTotal = formatter.parse(txtValorUnitario.getValue()).doubleValue() * txtQuantidade.getValue();
} catch (ParseException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
txtValorTotalItem.setValue(formatter.format(valorTotal));
campoSomaValores.setValue(formatter.format(valorTotal));
});
HorizontalLayout linhaNova = new HorizontalLayout();
linhaNova.add(txtProdutos, txtQuantidade, txtValorUnitario, txtValorTotalItem);
venderDiv.add(linhaNova);
}
private void novaVenda() {
venda = new Venda();
venda.setNomeCliente(" ");
dlgJanela.close();
}
}
共有1个答案
百里景山
类似资料：
-
问题内容： 我想将居中。但是，事实并非如此。我只想找出原因以及如何使其居中。 问题答案： 您需要设置容器的宽度。（不起作用） MDN的CSS参考说明了这一切。
-
问题内容： 在将一个人叠加到另一个人上时，我需要帮助。 我的代码如下所示： 不幸的是，我不能将或嵌套在第一个内部。 如图所示，它必须是两个单独的，但是我需要知道如何将放置在上方和最右侧，并以的顶部为中心。 问题答案： 我建议使用来了解和子元素。
-
问题内容： 我想在容器div中对齐3个div，如下所示： 容器div的宽度为100％（未设置宽度），调整容器大小后，居中div应保持居中。 所以我设置： 但它变成： 有小费吗？ 问题答案： 使用该CSS，将您的div放置为这样（浮点数优先）： PS 您也可以向右浮动，然后向左浮动，然后居中。重要的是浮子位于“主”中心部分之前。 PPS 您通常希望在此代码片段的最后：该代码片段将垂直延伸以包含两个侧
-
问题内容： 我的HTML代码只是将页面分为两列，分别为65％，35％。 在中 ，我有可变数据；在中 ，我有固定数据。即使两个具有两个不同的数据集，我也需要它们以相同的高度显示，以便背景色看起来好像填充了包含两者的框。当然，问题出在 ，因为其高度取决于当前显示在其中的数据量。 如何确保两列的高度始终相等？ 问题答案： 将其包裹在包含背景色的包含div中，并在“列”之后添加一个清除div。 更新以解决
-
老友记.我有两个DIVS。在一个div中，我有几个列表项“li”。我想做的是，每次我悬停在div 1的li上时，我想改变div 2的背景颜色。为此我需要使用css。谢谢. 你好 null 所以我想要的是，当悬停在id为“red”的li上时，将类为“contents”的div的背景颜色更改为红色。使用CSS。这是我的全部Html文件。
-
问题内容： 我是角度新手:-)我只是想将一个div的尺寸设置为另一个，请给予任何帮助。 在控制器中，我添加了： 返回宽度和高度，但未应用 问题答案： 我已经为您的问题创建了解决方案。首先，我将向您解释我做了什么以及为什么这样做。 Angular中的一项基本准则是，应避免在控制器中处理div等DOM元素，而应在指令中执行与DOM元素有关的大多数操作。 指令允许您将功能绑定到特定的dom元素。在这种情