Polymer 对于同一视图中的两个或多个实体，在Vaadin中执行UI的方法有哪些？

我有下面的excel表格打印在纸上，代表一个月的出勤名单，我应该把它带到网上

第一列是所有参与者的姓名。 其他列将检查该人员当天是否在场，如果不在场则为空。 As列标题将是当月的第几天

后端使用Spring数据/JPA制作

有哪些选项可以在Vaadin中实现UI？

对我来说，第一个冲动是瓦丁网格，但如果你仔细看，这是不可能的，因为在网格中，每个网格只能有一个实体

第二种可能是聚合物3和模板模型

你有没有其他办法来做这件事

---

非常感谢。

您只需创建一个person/user类型的

网格

，并为每个事件添加列，示例代码如下。你的课程可能不同，但希望你能理解。请注意，实际创建网格的代码只有8行

您还可以按照Simon Martinelli的建议，将所有数据封装在视图模式类中，例如

EventGridModel

，其中包含与会者、事件、人员，可能还有一些实用函数

@Route
public class MainView extends VerticalLayout {

    public MainView() {
        Person[] persons = new Person[]{
                new Person(0, "Foo", "Bar"),
                new Person(1, "John", "Doe"),
                new Person(2, "Scala", "JVM"),
                new Person(3, "Jeht-Phuel", "Steelbeam"),
                new Person(4, "Ilike", "Turtles")
        };
        Event[] events = new Event[] {
                new Event(0, Arrays.asList(persons[0], persons[1], persons[2], persons[4]), LocalDate.of(2019, 9, 5)),
                new Event(0, Arrays.asList(persons[0], persons[1], persons[2], persons[3]), LocalDate.of(2019, 9, 5)),
                new Event(0, Arrays.asList(persons[1], persons[2], persons[3]), LocalDate.of(2019, 9, 5)),
                new Event(0, Arrays.asList(persons[0], persons[2], persons[3]), LocalDate.of(2019, 9, 5)),
                new Event(0, Arrays.asList(persons[1], persons[2], persons[3], persons[4]), LocalDate.of(2019, 9, 5)),
        };

        Grid<Person> grid = new Grid<>();
        grid.addColumn(person -> person.getFirstName() + " " + person.getLastName()).setHeader("Name");
        for (Event event: events) {
            grid.addColumn(person -> event.getAttendees().contains(person) ? "X" : "")
                    .setHeader(event.getDate().toString());
        }
        grid.setItems(persons);
        add(grid);
    }

    class Person {
        private final Integer id;
        private final String firstName;
        private final String lastName;

        Person(Integer id, String firstName, String lastName)  {
            this.id = id;
            this.firstName = firstName;
            this.lastName = lastName;
        }

        public Integer getId() {
            return id;
        }

        public String getFirstName() {
            return firstName;
        }

        public String getLastName() {
            return lastName;
        }

        @Override
        public boolean equals(Object other) {
            return other instanceof Person && Objects.equals(((Person) other).getId(), id);
        }
    }

    class Event {
        private final Integer id;
        private final List<Person> attendees;
        private final LocalDate date;

        Event(Integer id, List<Person> attendees, LocalDate date) {
            this.id = id;
            this.attendees = attendees;
            this.date = date;
        }

        public Integer getId() {
            return id;
        }

        public List<Person> getAttendees() {
            return attendees;
        }

        public LocalDate getDate() {
            return date;
        }

        @Override
        public boolean equals(Object other) {
            return other instanceof Event && Objects.equals(((Event) other).getId(), id);
        }
    }
}

@路由
公共类主视图扩展了垂直布局{
公共主视图（）{
人员[]人员=新人员[]{
新人（0，“Foo”，“Bar”），
新人（1，“约翰”、“Doe”），
新人（2，“Scala”、“JVM”），
新人（3名，“杰特·普埃尔”、“钢梁”），
新人（4个“我喜欢”、“海龟”）
};
事件[]事件=新事件[]{
新事件（0，Arrays.asList（persons[0]，persons[1]，persons[2]，persons[4]），LocalDate.of（2019,9,5）），
新事件（0，Arrays.asList（persons[0]，persons[1]，persons[2]，persons[3]），LocalDate.of（2019,9,5）），
新事件（0，Arrays.asList（persons[1]，persons[2]，persons[3]），LocalDate.of（2019,9,5）），
新事件（0，Arrays.asList（persons[0]，persons[2]，persons[3]），LocalDate.of（2019,9,5）），
新事件（0，Arrays.asList（persons[1]，persons[2]，persons[3]，persons[4]），LocalDate.of（2019,9,5）），
};
网格=新网格（）；
grid.addColumn（person->person.getFirstName（）+“”+person.getLastName（））.setHeader（“名称”）；
对于（事件：事件）{
grid.addColumn（person->event.getAttendees（）。包含（person）？“X”：“”）
.setHeader（event.getDate（）.toString（））；
}
网格。设置项目（人）；
添加（网格）；
}
班主任{
私有最终整数id；
私有最终字符串名；
私有最终字符串lastName；
Person（整数id、字符串名、字符串名）{
this.id=id；
this.firstName=firstName；
this.lastName=lastName；
}
公共整数getId（）{
返回id；
}
公共字符串getFirstName（）{
返回名字；
}
公共字符串getLastName（）{
返回姓氏；
}
@凌驾
公共布尔等于（对象其他）{
返回Person&&Objects.equals（（（Person）other.getId（），id）的其他实例；
}
}
班级活动{
私有最终整数id；
私人最终名单与会者；
私有最终本地日期；
事件（整数id、与会者列表、LocalDate）{
this.id=id；
this.attendes=与会者；
this.date=日期；
}
公共整数getId（）{
返回id；
}
公共列表GetAttendes（）{
返回与会者；
}
公共LocalDate getDate（）{
返回日期；
}
@凌驾
公共布尔等于（对象其他）{
返回事件和对象的其他实例.equals（（（事件）other.getId（），id）；
}
}
}

您可以创建视图模型类，并将其绑定到Vaadin中的可编辑网格。感谢您的完美建议！非常感谢Tazavoo的帮助和出色的描述！我会采纳你的建议，然后带着结果回来