jmix表格是否能够合并单元格？

Jmix
#1

Jmix是否能做出这样的表格？
image

#2

我们在项目中遇到这种都是自己画的，示例：

页面 XML：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://jmix.io/schema/ui/window"
        caption="msg://pickProduct.caption">
    <layout >
        <vbox id="mainBox" width="100%" expand="sec1" spacing="true" stylename="has-border">
            <hbox id="headerBox" width="100%" spacing="true" stylename="has-border">
                <label box.expandRatio="1" value="所属分类" align="MIDDLE_CENTER"/>
                <label box.expandRatio="1" value="类型" align="MIDDLE_CENTER"/>
                <label box.expandRatio="4" value="名称" align="MIDDLE_CENTER"/>
                <label box.expandRatio="1" value="数量" align="MIDDLE_CENTER"/>
                <label box.expandRatio="3" value="操作" align="MIDDLE_CENTER"/>
            </hbox>
            <hbox id="sec1" width="100%" spacing="true" stylename="has-border">
                <comboBox id="sec1Combo" box.expandRatio="1" width="100px" align="MIDDLE_CENTER"/>
                <comboBox id="sec1Combo2" box.expandRatio="1" width="100px" align="MIDDLE_CENTER"/>
                <vbox id="sec1Products" box.expandRatio="8" spacing="true"/>
            </hbox>
        </vbox>
    </layout>
</window>

Java 控制器:

@UiController("leot_PickProduct")
@UiDescriptor("pick-product.xml")
public class PickProduct extends Screen {
    @Autowired
    private Metadata metadata;
    @Autowired
    private UiComponents uiComponents;
    @Autowired
    private VBoxLayout sec1Products;


    @Subscribe
    public void onAfterShow(final AfterShowEvent event) {
        sec1Products.add(addProductRow(0));
    }

    private HBoxLayout addProductRow(int order){

        var hbox = uiComponents.create(HBoxLayout.class);
        hbox.setId("hbox_" + order);
        hbox.setSpacing(true);
        hbox.setWidth("100%");

        var namefield = uiComponents.create(TextField.TYPE_STRING);
        namefield.setId("name_" + order);
        namefield.setWidth("100%");

        var countField = uiComponents.create(TextField.TYPE_INTEGER);
        countField.setId("count_" + order);
        countField.setWidth("100%");
        var addBtn = uiComponents.create(LinkButton.class);
        addBtn.setId("add_" + order);
        addBtn.addClickListener(this::addButtonClicked);
        addBtn.setCaption("添加");

        var delBtn = uiComponents.create(LinkButton.class);
        delBtn.setId("del_" + order);
        delBtn.addClickListener(this::delButtonClicked);
        delBtn.setCaption("删除");

        var btnBox = uiComponents.create(HBoxLayout.class);
        btnBox.setSpacing(true);
        btnBox.add(addBtn,delBtn);
        btnBox.setStyleName("btn-box");

        hbox.add(namefield,countField,btnBox);
        hbox.setExpandRatio(namefield,0.5f);
        hbox.setExpandRatio(countField, 0.125f);
        hbox.setExpandRatio(btnBox, 0.325f);

        return hbox;
    }

    private void addButtonClicked(Button.ClickEvent event) {
        var btn = event.getSource();
        int addOrder = Integer.parseInt(btn.getId().split("_")[1]);
        var p = metadata.create(Product.class);
        sec1Products.add(addProductRow(addOrder + 1));
    }

    private void delButtonClicked(Button.ClickEvent event) {

    }
}

样式：

  .has-border{
    border: 1px solid aliceblue;
  }

  .btn-box{
    padding-top:7px;
  }

效果：

pick

1 个赞
#3

这样也是可以的，我想用html了，发现还要写css和js，太麻烦了。