Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#815][3.0] Grid 기능 추가 #816

Merged
merged 9 commits into from
Jun 1, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ module.exports = {
'request', // for Express requests
'res', // for Express responses
'response', // for Express responses
'cur',
],
}],
indent: 'off',
Expand Down
1 change: 1 addition & 0 deletions docs/assets/images/icon_mongodb.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
78 changes: 78 additions & 0 deletions docs/assets/images/icon_mysql.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions docs/assets/images/icon_oracle.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
58 changes: 58 additions & 0 deletions docs/assets/images/icon_postgresql.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/user_1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/user_3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/user_4.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/user_7.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/user_default.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 16 additions & 8 deletions docs/views/grid/api/grid.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@
@click-row="onClickRow"
@dblclick-row="onDoubleClickRow"
>
<template #{필드명}></template>
<template #toolbar="{ item }"></template>
</ev-grid>
```

- <그리드>는 위와 같이 사용
- `#{필드명}` 지정해서 Cell Render 설정
- `#toolbar` 지정해서 Toolbar 표시

### Props
| 이름 | 타입 | 디폴트 | 설명 | 종류 |
Expand All @@ -38,16 +40,25 @@
| | columnWidth | 40 | 기본 컬럼 너비를 설정한다. | `min-width: 40px` |
| | useFilter | false | 필터 기능 사용 여부, 컨텍스트 메뉴에서 'Filter On' 메뉴를 클릭하여 설정한다. | |
| | useCheckbox | {} | 각 row별 체크박스 사용 여부 및 단일 선택이나 다중 선택을 설정한다. | |
| | | use | 체크박스 사용 여부 | boolean |
| | | use | 체크박스 사용 여부 | Boolean |
| | | mode | 단일 및 다중 선택 설정 | 'multi', 'single' |
| | | headerCheck | 헤더 체크박스 사용 여부 | boolean |
| | | headerCheck | 헤더 체크박스 사용 여부 | Boolean |
| | style | {} | 그리드의 스타일을 설정한다. | |
| | | stripe | row의 배경색을 Stripe 스타일로 설정한다. | boolean |
| | | stripe | row의 배경색을 Stripe 스타일로 설정한다. | Boolean |
| | | border | 그리드의 Border 여부를 설정한다. | 'none', 'rows' |
| | | highlight | 지정한 row에 Highlight 효과를 설정한다. | `rowIndex` |
| | customContextMenu | [] | 우클릭시 보여지는 컨텍스트 메뉴를 설정한다. | |
| | | menuItems | 컨텍스트 메뉴 | |

### Columns
| 이름 | 타입 | 설명 | 종류 | 필수 |
| --- | ---- | ----- | ---- | --- |
| caption | String | 컬럼명 | ex) '인스턴스명' | Y |
| field | String | 필드명 | ex) 'instance_name' | Y |
| type | String | 데이터 타입 | 'string', 'number', 'float', 'boolean' | Y |
| width | Number | 컬럼 넓이 | ex) 150 | N |
| searchable | Boolean | 검색 대상 여부 | `true`, `false` | N |

### Event
| 이름 | 파라미터 | 설명 |
| ---- | ------- | ---- |
Expand All @@ -56,6 +67,3 @@
| click-row | newValue | row가 클릭 되었을 때 호출된다. |
| dblclick-row | newValue | row가 더블 클릭 되었을 때 호출된다. |

>### 참고
- <그리드> 셀 내부에 타 컴포넌트를 Rendering 할 수 있다.
- `ev-button`, `ev-checkbox`, `ev-input-number`, `ev-select` 외 컴포넌트 추가 예정
Loading