-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
Showing
7 changed files
with
365 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,225 @@ | ||
| <template> | ||
| <div class="case"> | ||
| <ev-tree-grid | ||
| v-model:selected="selected" | ||
| v-model:checked="checked" | ||
| :columns="columns" | ||
| :rows="tableData" | ||
| :width="widthMV" | ||
| :height="heightMV" | ||
| :option="{ | ||
| adjust: adjustMV, | ||
| showHeader: showHeaderMV, | ||
| rowHeight: rowHeightMV, | ||
| columnWidth: columnWidthMV, | ||
| useFilter: useFilterMV, | ||
| useCheckbox: { | ||
| use: useCheckboxMV, | ||
| mode: checkboxModeMV, | ||
| headerCheck: headerCheckMV, | ||
| }, | ||
| customContextMenu: menuItems, | ||
| style: { | ||
| stripe: stripeMV, | ||
| border: borderMV, | ||
| }, | ||
| }" | ||
| @check-row="onCheckedRow" | ||
| @check-all="onCheckedRow" | ||
| @click-row="onClickRow" | ||
| @dblclick-row="onDoubleClickRow" | ||
| > | ||
| <!-- toolbar --> | ||
| <template #toolbar="{ item }"> | ||
| <ev-button | ||
| type="info" | ||
| @click="onClickCustom" | ||
| > | ||
| Custom | ||
| </ev-button> | ||
| <ev-text-field | ||
| v-model="searchVm" | ||
| class="search" | ||
| type="search" | ||
| placeholder="Search" | ||
| @input="item.onSearch" | ||
| /> | ||
| </template> | ||
| </ev-tree-grid> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { ref } from 'vue'; | ||
| export default { | ||
| setup() { | ||
| const tableData = ref([]); | ||
| const selected = ref([]); | ||
| const checked = ref([]); | ||
| const widthMV = ref('100%'); | ||
| const heightMV = ref(300); | ||
| const adjustMV = ref(true); | ||
| const showHeaderMV = ref(true); | ||
| const stripeMV = ref(false); | ||
| const rowHeightMV = ref(35); | ||
| const columnWidthMV = ref(80); | ||
| const useFilterMV = ref(false); | ||
| const useCheckboxMV = ref(true); | ||
| const checkboxModeMV = ref('multi'); | ||
| const headerCheckMV = ref(true); | ||
| const checkedRowsMV = ref(); | ||
| const clickedRowMV = ref(); | ||
| const DbClickedRowsMV = ref(); | ||
| const menuItems = ref([ | ||
| { | ||
| text: 'Menu1', | ||
| click: () => console.log(`[Menu1] Selected Row Data: ${selected.value.data}`), | ||
| }, { | ||
| text: 'Menu2', | ||
| click: () => console.log('[Menu2]'), | ||
| }, | ||
| ]); | ||
| const borderMV = ref(''); | ||
| const searchVm = ref(''); | ||
| const onCheckedRow = () => { | ||
| let checkedRow = ''; | ||
| checkedRowsMV.value = checked.value.reduce((prev, curr) => { | ||
| checkedRow += JSON.stringify(curr?.data); | ||
| return checkedRow; | ||
| }, JSON.stringify(checked.value[0]?.data)); | ||
| }; | ||
| const onDoubleClickRow = (e) => { | ||
| const rowData = e.rowData.data; | ||
| DbClickedRowsMV.value = JSON.stringify(rowData); | ||
| }; | ||
| const onClickRow = (e) => { | ||
| const rowData = e.rowData.data; | ||
| clickedRowMV.value = JSON.stringify(rowData); | ||
| }; | ||
| const getData = () => { | ||
| tableData.value = [{ | ||
| id: 'Exem 1', | ||
| date: '2016-05-01', | ||
| name: '1', | ||
| expand: true, | ||
| children: [{ | ||
| id: 'Exem 2', | ||
| date: '2016-05-02', | ||
| name: '2', | ||
| expand: false, | ||
| children: [{ | ||
| id: 'Exem 3', | ||
| date: '2016-05-02', | ||
| name: '3', | ||
| }, { | ||
| id: 'Exem 4', | ||
| date: '2016-05-02', | ||
| name: '4', | ||
| expand: false, | ||
| children: [{ | ||
| id: 'Exem 5', | ||
| date: '2016-05-02', | ||
| name: '5', | ||
| children: [{ | ||
| id: 'Exem 51', | ||
| date: '2016-05-02', | ||
| name: '51', | ||
| children: [{ | ||
| id: 'Exem 52', | ||
| date: '2016-05-02', | ||
| name: '52', | ||
| }], | ||
| }], | ||
| }, { | ||
| id: 'Exem 6', | ||
| date: '2016-05-02', | ||
| name: '6', | ||
| }], | ||
| }], | ||
| }, { | ||
| id: 'Exem 7', | ||
| date: '2016-05-03', | ||
| name: '7', | ||
| children: [{ | ||
| id: 'Exem 8', | ||
| date: '2016-05-03', | ||
| name: '8', | ||
| }, { | ||
| id: 'Exem 9', | ||
| date: '2016-05-03', | ||
| name: '9', | ||
| }, { | ||
| id: 'Exem 10', | ||
| date: '2016-05-03', | ||
| name: '10', | ||
| }], | ||
| }, { | ||
| id: 'Exem 11', | ||
| date: '2016-05-04', | ||
| name: '11', | ||
| }], | ||
| }]; | ||
| }; | ||
| const columns = ref([ | ||
| { caption: 'ID', field: 'id', type: 'number' }, | ||
| { caption: 'Date', field: 'date', type: 'string' }, | ||
| { caption: 'Name', field: 'name', type: 'number' }, | ||
| ]); | ||
| const onClickCustom = () => { | ||
| console.log('On click custom button'); | ||
| }; | ||
| getData(); | ||
| return { | ||
| columns, | ||
| tableData, | ||
| selected, | ||
| checked, | ||
| widthMV, | ||
| heightMV, | ||
| adjustMV, | ||
| showHeaderMV, | ||
| stripeMV, | ||
| rowHeightMV, | ||
| columnWidthMV, | ||
| useFilterMV, | ||
| useCheckboxMV, | ||
| checkboxModeMV, | ||
| headerCheckMV, | ||
| checkedRowsMV, | ||
| clickedRowMV, | ||
| DbClickedRowsMV, | ||
| menuItems, | ||
| borderMV, | ||
| searchVm, | ||
| onCheckedRow, | ||
| onDoubleClickRow, | ||
| onClickRow, | ||
| onClickCustom, | ||
| }; | ||
| }, | ||
| }; | ||
| </script> | ||
| <style lang="scss" scoped> | ||
| .description { | ||
| min-width: 200px; | ||
| } | ||
| .form-rows { | ||
| display: flex; | ||
| margin-bottom: 5px; | ||
| } | ||
| .form-row { | ||
| width: 50%; | ||
| } | ||
| .ev-text-field, .ev-input-number, .ev-select { | ||
| width: 30%; | ||
| } | ||
| .badge { | ||
| margin-bottom: 2px; | ||
| margin-right: 5px !important; | ||
| } | ||
| .ev-toggle { | ||
| margin-right: 10px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <template> | ||
| <div class="description treeGridToolbar"> | ||
| <slot name="toolbarWrapper"></slot> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'EvTreeGridToolbar', | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| @import '../../style/index.scss'; | ||
| .treeGridToolbar { | ||
| margin-bottom: 10px; | ||
| overflow: hidden; | ||
| } | ||
| .treeGridToolbar > .search { | ||
| float: right; | ||
| margin-right: 0; | ||
| } | ||
| .treeGridToolbar > .ev-button { | ||
| margin: 0 2px 0 2px; | ||
| } | ||
| </style> |
Oops, something went wrong.