Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- GIT
- Spring
- plugin
- Express
- table
- Android
- MSSQL
- IntelliJ
- mapreduce
- Kotlin
- SSL
- SPC
- 보조정렬
- mybatis
- vaadin
- tomcat
- es6
- Python
- Eclipse
- 공정능력
- hadoop
- Sqoop
- JavaScript
- react
- xPlatform
- Java
- NPM
- R
- SQL
- window
Archives
- Today
- Total
DBILITY
vaadin flow - grid 본문
반응형
공식 사이트 문서를 참조하여 작성하였다.
익히 알다시피 Grid는 row와 column으로 구성된 표형태의 데이터를 표시하고, 편집할 수 있게 한다. 상단에 머리글(header), 하단에 바닥글(footer)이 표시되며, 일반 텍스트 외에도 HTML, Component를 포함할 수 있다. 머리글(header)에 포함되는 Component들은 필터링을 쉽게 구현할 수 있고, column header를 클릭하여 정렬할 수 있다. multiSort설정 시 shift를 누른 상태에서 클릭할 경우 정렬이 추가된다.
Grid의 데이터 표시 영역은 가로, 세로 스크롤막대를 표시할 수 있고, column.setFrozen 메서드를 사용하여 고정(좌측부터)할 수 있으며, 스크롤되지 않는다.
데이터의 적재시 첫 번째 방식으로 Grid.setItems메서드를 사용 하여 List를 적재하는 것이다.
@PageTitle("setItems를 이용한 Grid Data Bindig")
@Route(value="grid/setitems")
public class GridView extends Div {
public GridView() {
getElement().setProperty("style", "margin:20px 20px");
Div gridLayout = new Div();
gridLayout.setWidth("380px");
List<Person> list = Arrays.asList(
new Person("aid","aname",1,Sex.Male),
new Person("bid","bname",2,Sex.Female),
new Person("cid","cname",3,Sex.Female),
new Person("did","dname",1,Sex.Male),
new Person("eid","ename",3,Sex.Male),
new Person("fid","fname",1,Sex.Female),
new Person("gid","gname",2,Sex.Male),
new Person("hid","hname",3,Sex.Female));
Grid<Person> grid = new Grid<>();
grid.setItems(list);
grid.setMultiSort(true);
grid.addColumn(Person::getId).setHeader("ID").setFrozen(true);
grid.addColumn(Person::getName).setHeader("NAME");
grid.addColumn(Person::getAge).setHeader("AGE");
//grid.addColumn(e-> e.getSex() == Sex.Male ? "남자" : "여자").setHeader("SEX");
grid.addColumn(new ValueProvider<Person, String>() {
@Override
public String apply(Person source) {
return source.getSex() == Sex.Male ? "남자" : "여자";
}
}).setHeader("SEX");
for (Column<Person> column : grid.getColumns()) {
column.setSortable(true);
}
gridLayout.add(grid);
add(gridLayout);
}
}
두 번째는 DataProvider를 사용하는 방법이 있으며, Lazy Loading(데이터 영역에 표시되는 부분만 적재, DataProvider.fromCallbacks메서드 사용)을 지원하고 이 smart lazy loading기능은 모바일 장치 등 낮은 네트워크 대역폭 환경에서도 우수한 사용자 경험(UX)을 제공한다. Grid생성자에 bean Type을 argument로 사용하면 bean의 모든 property를 자동으로 Column에 추가한다.
@PageTitle("DataProvider를 사용한 Grid Data Binding")
@Route(value="grid/dataprovider")
public class GridView extends VerticalLayout {
public GridView() {
List<Person> list = new ArrayList<Person>();
list.add(new Person("aid","aname",1,Sex.Male));
list.add(new Person("bid","bname",2,Sex.Female));
list.add(new Person("cid","cname",3,Sex.Female));
list.add(new Person("did","dname",1,Sex.Male));
list.add(new Person("eid","ename",3,Sex.Male));
list.add(new Person("fid","fname",1,Sex.Female));
list.add(new Person("gid","gname",2,Sex.Male));
list.add(new Person("hid","hname",3,Sex.Female));
//ListDataProvider<Person> ldp = new ListDataProvider<>(list);
ListDataProvider<Person> ldp = DataProvider.ofCollection(list);
Grid<Person> grid = new Grid<>(Person.class);
//Grid<Person> grid = new Grid<>();
grid.setColumns("id","name","age","sex");
grid.getColumns().get(0).setHeader("ID").setFrozen(true);
grid.getColumns().get(1).setHeader("NAME").setFrozen(true);
grid.getColumns().get(2).setHeader("AGE");
grid.getColumns().get(3).setHeader("SEX");
grid.setMultiSort(true);
grid.setColumnReorderingAllowed(true);
grid.setWidth("380px");
//grid.setHeight("200px");
//grid.getColumns().get(0).setFrozen(true);
//grid.getColumns().get(1).setFrozen(true);
grid.setDataProvider(ldp);
add(grid);
}
}
반응형
'front-end & ui > vaadin flow' 카테고리의 다른 글
vaadin flow - using vaadin components (0) | 2018.09.11 |
---|---|
vaadin flow updating page title on navigation (0) | 2018.09.11 |
vaadin flow getting registered routes (0) | 2018.09.11 |
vaadin flow router exception handling (0) | 2018.09.10 |
vaadin flow navigating between routes (0) | 2018.09.10 |
Comments