From 6f2e41eb3b4035da4bdf0d806f72e676b8f827c6 Mon Sep 17 00:00:00 2001 From: SuBin Lee <76253952+subin1224@users.noreply.github.com> Date: Tue, 20 Dec 2022 10:30:19 +0900 Subject: [PATCH] =?UTF-8?q?[#1332]TreeGrid=20>=20Tree=20Level=20Depth=20In?= =?UTF-8?q?dex=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=EC=98=B5=EC=85=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20(#1333)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [#1332]TreeGrid > Tree Level Depth Index 커스텀 옵션 추가 #################### - tree grid > option > treeIndex 속성 추가 * [#1332]TreeGrid > Tree Level Depth Index 커스텀 옵션 추가 #################### - tree Index > tree Level Index name 수정 * [#1332]TreeGrid > Tree Level Depth Index 커스텀 옵션 추가 #################### - grid Option에서 수정하는 것이 아니라 column에 option 추가적으로 작성하는 것으로 변경 - expandColumn 추가 * [#1332]TreeGrid > Tree Level Depth Index 커스텀 옵션 추가 #################### - grid Option에서 수정하는 것이 아니라 column에 option 추가적으로 작성하는 것으로 변경 - expandColumn 추가 * [#1332]TreeGrid > Tree Level Depth Index 커스텀 옵션 추가 #################### - 코드 수정 --- docs/views/treeGrid/api/treeGrid.md | 117 ++++++++++++----------- docs/views/treeGrid/example/Default.vue | 47 ++++++--- src/components/treeGrid/TreeGridNode.vue | 11 ++- 3 files changed, 102 insertions(+), 73 deletions(-) diff --git a/docs/views/treeGrid/api/treeGrid.md b/docs/views/treeGrid/api/treeGrid.md index 33ad46f5c..87771c616 100644 --- a/docs/views/treeGrid/api/treeGrid.md +++ b/docs/views/treeGrid/api/treeGrid.md @@ -24,70 +24,71 @@ - `#toolbar` 지정해서 Toolbar 표시 ### Props -| 이름 | 타입 | 디폴트 | 설명 | 종류 | -| --- | ---- | ----- | ---- | --- | -| columns | Array | [] | 컬럼 리스트 | | -| rows | Array | [] | Tree Data 리스트 | | -| width | String, Number | '100%' | 그리드 넓이 | '50%', '50px', 50 | -| height | String, Number | '100%' | 그리드 높이 | '50%', '50px', 50 | -| selected | Array | [] | 선택된 Row 데이터 | | -| checked | Array | [] | 체크된 Row 데이터 | | -| option | Object | {} | 그리드 옵션 | | -| | adjust | false | 그리드의 너비에 맞게 컬럼 너비를 자동으로 조절한다. | | -| | showHeader | true | 헤더 표시 여부를 설정한다. | | -| | rowHeight | 35 | Row 높이를 설정한다. | `min-height: 35` | -| | rowMinHeight | null | Row 높이를 `min-height`보다 작게 설정한다. | | -| | columnWidth | 40 | 기본 컬럼 너비를 설정 한다. | `min-width: 40px` | -| | useCheckbox | {} | 각 Row별 체크박스 사용 여부 및 단일 선택이나 다중 선택을 설정한다. | | -| | | use | 체크박스 사용 여부 | boolean | -| | | mode | 단일 및 다중 선택 설정 | 'multi', 'single' | -| | | headerCheck | 헤더 체크박스 사용 여부 | boolean | -| | useSelection | {} | 각 row별 선택 여부 및 단일 선택이나 다중 선택을 설정한다. | | -| | | use | Selection 사용 여부 | Boolean | -| | | multiple | 다중 선택 설정 여부 | Boolean | -| | | limitCount | 선택 가능한 row의 수를 제한 | Number | -| | style | {} | 그리드의 스타일을 설정한다. | | -| | | stripe | Row의 배경색을 Stripe 스타일로 설정한다. | boolean | -| | | border | 그리드의 Border 여부를 설정한다. | 'none', 'rows' | -| | | highlight | 지정한 Row에 Highlight 효과를 설정한다. | `rowIndex` | -| | customContextMenu | [] | 우클릭시 보여지는 컨텍스트 메뉴를 설정한다. | | -| | | menuItems | 컨텍스트 메뉴 | | -| | page | {} | 페이지 설정 | | -| | | use | 페이지 사용 여부 | Boolean | -| | | isInfinite | Infinite Scroll 사용 여부 | Boolean | -| | | useClient | client-side Paging 사용 여부 | Boolean | -| | | total | 총 항목 수 | Number | -| | | perPage | 각 페이지의 항목 수 | Number | -| | | currentPage | 현재 페이지 번호 | Number | -| | | visiblePage | 보여지는 Pagination 버튼 수 | Number | -| | | order | Pagination 위치 | 'center', 'left', 'right' | -| | | showPageInfo | 페이지 정보 표시 여부 | Boolean | -| | useSummary | false | 하단에 summary row 가 표시 된다. | Boolean | -| | expandIcon | 'tree-expand-icon' | expand 상태인 노드의 아이콘 | `ev-icon` | -| | collapseIcon | 'tree-expand-icon' | collapse 상태인 노드의 아이콘 | `ev-icon` | -| | parentIcon | 'tree-parent-icon' | 자식 노드가 있는 노드의 아이콘 | `ev-icon`, 'none' | -| | childIcon | 'tree-child-icon' | 자식 노드가 없는 노드의 아이콘 | `ev-icon`, 'none' | +| 이름 | 타입 | 디폴트 | 설명 | 종류 | +| --- |------------------|--------------------|-----------------------------------------|--------------------------| +| columns | Array | [] | 컬럼 리스트 | | +| rows | Array | [] | Tree Data 리스트 | | +| width | String, Number | '100%' | 그리드 넓이 | '50%', '50px', 50 | +| height | String, Number | '100%' | 그리드 높이 | '50%', '50px', 50 | +| selected | Array | [] | 선택된 Row 데이터 | | +| checked | Array | [] | 체크된 Row 데이터 | | +| option | Object | {} | 그리드 옵션 | | +| | adjust | false | 그리드의 너비에 맞게 컬럼 너비를 자동으로 조절한다. | | +| | showHeader | true | 헤더 표시 여부를 설정한다. | | +| | rowHeight | 35 | Row 높이를 설정한다. | `min-height: 35` | +| | rowMinHeight | null | Row 높이를 `min-height`보다 작게 설정한다. | | +| | columnWidth | 40 | 기본 컬럼 너비를 설정 한다. | `min-width: 40px` | +| | useCheckbox | {} | 각 Row별 체크박스 사용 여부 및 단일 선택이나 다중 선택을 설정한다. | | +| | | use | 체크박스 사용 여부 | boolean | +| | | mode | 단일 및 다중 선택 설정 | 'multi', 'single' | +| | | headerCheck | 헤더 체크박스 사용 여부 | boolean | +| | useSelection | {} | 각 row별 선택 여부 및 단일 선택이나 다중 선택을 설정한다. | | +| | | use | Selection 사용 여부 | Boolean | +| | | multiple | 다중 선택 설정 여부 | Boolean | +| | | limitCount | 선택 가능한 row의 수를 제한 | Number | +| | style | {} | 그리드의 스타일을 설정한다. | | +| | | stripe | Row의 배경색을 Stripe 스타일로 설정한다. | boolean | +| | | border | 그리드의 Border 여부를 설정한다. | 'none', 'rows' | +| | | highlight | 지정한 Row에 Highlight 효과를 설정한다. | `rowIndex` | +| | customContextMenu | [] | 우클릭시 보여지는 컨텍스트 메뉴를 설정한다. | | +| | | menuItems | 컨텍스트 메뉴 | | +| | page | {} | 페이지 설정 | | +| | | use | 페이지 사용 여부 | Boolean | +| | | isInfinite | Infinite Scroll 사용 여부 | Boolean | +| | | useClient | client-side Paging 사용 여부 | Boolean | +| | | total | 총 항목 수 | Number | +| | | perPage | 각 페이지의 항목 수 | Number | +| | | currentPage | 현재 페이지 번호 | Number | +| | | visiblePage | 보여지는 Pagination 버튼 수 | Number | +| | | order | Pagination 위치 | 'center', 'left', 'right' | +| | | showPageInfo | 페이지 정보 표시 여부 | Boolean | +| | useSummary | false | 하단에 summary row 가 표시 된다. | Boolean | +| | expandIcon | 'tree-expand-icon' | expand 상태인 노드의 아이콘 | `ev-icon` | +| | collapseIcon | 'tree-expand-icon' | collapse 상태인 노드의 아이콘 | `ev-icon` | +| | parentIcon | 'tree-parent-icon' | 자식 노드가 있는 노드의 아이콘 | `ev-icon`, 'none' | +| | childIcon | 'tree-child-icon' | 자식 노드가 없는 노드의 아이콘 | `ev-icon`, 'none' | ### Columns -| 이름 | 타입 | 설명 | 종류 | 필수 | -| --- | ---- | ----- | ---- | --- | -| caption | String | 컬럼명 | ex) '인스턴스명' | Y | -| field | String | 필드명 | ex) 'instance_name' | Y | -| type | String | 데이터 타입 | 'string', 'number', 'stringNumber', 'float', 'boolean' | Y | -| hide | Boolean | 컬럼 숨김 여부 | Boolean | N | -| width | Number | 컬럼 넓이 | ex) 150 | N | -| searchable | Boolean | 검색 대상 여부 | Boolean | N | -| align | String | 사용자 지정 정렬 | 'center', 'left', 'right' | N | -| decimal | Number | 데이터 타입이 float 일 때 소수점 자리 표시 수 | ex) 0~20 (디폴트: 3 ) | N | -| summaryType | String | 계산 타입 | 'sum', 'average', 'max', 'min', 'count' | N | -| summaryRenderer | String | Summary 에 표시할 텍스트 또는 계산 값 | ex) 'Sum: {0}' | N | -| summaryData | Array | Summary 할 대상 추가 시 summaryRenderer 와 함께 사용 | ex) '{0}({1}%)' | N | +| 이름 | 타입 | 설명 | 종류 | 필수 | +|-----------------|---------|----------------------------------------------------|--------------------------------------------------| --- | +| caption | String | 컬럼명 | ex) '인스턴스명' | Y | +| field | String | 필드명 | ex) 'instance_name' | Y | +| type | String | 데이터 타입 | 'string', 'number', 'stringNumber', 'float', 'boolean' | Y | +| hide | Boolean | 컬럼 숨김 여부 | Boolean | N | +| width | Number | 컬럼 넓이 | ex) 150 | N | +| searchable | Boolean | 검색 대상 여부 | Boolean | N | +| align | String | 사용자 지정 정렬 | 'center', 'left', 'right' | N | +| decimal | Number | 데이터 타입이 float 일 때 소수점 자리 표시 수 | ex) 0~20 (디폴트: 3 ) | N | +| summaryType | String | 계산 타입 | 'sum', 'average', 'max', 'min', 'count' | N | +| summaryRenderer | String | Summary 에 표시할 텍스트 또는 계산 값 | ex) 'Sum: {0}' | N | +| summaryData | Array | Summary 할 대상 추가 시 summaryRenderer 와 함께 사용 | ex) '{0}({1}%)' | N | +| expandColumn | Boolean | 트리그리드를 확장하는데 사용하는 컬럼을 의미, 설정하지 않으면 자동으로 첫번째 컬럼에 적용 | ex) 'expandColumn: true' | N | ### Event | 이름 | 파라미터 | 설명 | - | ---- | ------- | ---- | +| ---- | ------- | ---- | | check-row | event, row, index | row의 체크박스가 체크 되었을때 호출된다. | | check-all | event, rows | 헤더의 체크박스가 체크 되었을때 호출 된다. 전체 row의 체크박스를 체크한다. | | click-row | event, row | row가 클릭 되었을 때 호출된다. | | dblclick-row | event, row | row가 더블 클릭 되었을 때 호출된다. | -| page-change | event | page 정보가 변경되었을 때 호출된다. | \ No newline at end of file +| page-change | event | page 정보가 변경되었을 때 호출된다. | diff --git a/docs/views/treeGrid/example/Default.vue b/docs/views/treeGrid/example/Default.vue index ff72ac970..1f92ef7fa 100644 --- a/docs/views/treeGrid/example/Default.vue +++ b/docs/views/treeGrid/example/Default.vue @@ -59,8 +59,6 @@ - -
Use Selection @@ -73,16 +71,32 @@ - - Limit Count - - +
+
+
+ + Expand Column Index + + +
+
+ + Limit Count + + +
@@ -275,6 +289,7 @@ export default { const checkedRowsMV = ref(); const clickedRowMV = ref(); const DbClickedRowsMV = ref(); + const expandColumnMV = ref(0); const menuItems = ref([{ text: 'Menu1', click: () => { @@ -452,6 +467,12 @@ export default { decimal: 1, }, ]); + const changeExpandTreeColumn = (idx) => { + columns.value.forEach((val) => { + val.expandColumn = false; + }); + columns.value[idx] = { ...columns.value[idx], expandColumn: true }; + }; const limitItems = ref([ { name: '2', @@ -510,6 +531,7 @@ export default { childIconMV, limitItems, useSelection, + expandColumnMV, onClickCheckbox, onClickButton, changeMode, @@ -520,6 +542,7 @@ export default { resetTreeIcon, resetDataIcon, onReset, + changeExpandTreeColumn, }; }, }; diff --git a/src/components/treeGrid/TreeGridNode.vue b/src/components/treeGrid/TreeGridNode.vue index de85ef6a3..b27418606 100644 --- a/src/components/treeGrid/TreeGridNode.vue +++ b/src/components/treeGrid/TreeGridNode.vue @@ -33,13 +33,13 @@