반응형
개발환경
vue.js 3.2.13
DevExtreme DataGrid 기본형(단순 조회)
코드는 언제나 전체 코드.
복사 붙여넣기 하면, 실행됨
주석있는 것은 값 변경해볼 것.
<template>
<div >
<DxDataGrid
id="gridContainer"
:data-source="dataList"
:column-auto-width="false"
:show-borders="false"
:row-alternation-enabled="true"
key-expr="ID"
ref="grid"
>
<DxColumnChooser :enabled="false"/><!-- 컬럼 감추기, 선택해서 보이게 우상단에 아이콘 하나 생김 -->
<DxColumnFixing :enabled="false"/> <!--행고정시 다음 옵션 필수 :column-auto-width="false" :fixed="true" --->
<!-- <DxScrolling mode="infinite"/> -->
<DxColumn :width="150" data-field="ID" :fixed="true" caption="ID" data-type="int" alignment="center" :allow-sorting="false" />
<DxColumn :width="150" data-field="FirstName" caption="FirstName" data-type="string" alignment="center" :allow-sorting="false" />
<DxColumn :width="150" data-field="LastName" caption="LastName" data-type="string" alignment="center" :allow-sorting="false" />
<DxColumn :width="150" data-field="BirthDate" caption="생일" data-type="date" alignment="center" :allow-sorting="false" />
<DxColumn :width="150" data-field="HireDate" caption="고용일" data-type="date" alignment="center" :allow-sorting="false" />
<DxColumn :width="150" data-field="Position" caption="지위" data-type="string" alignment="center" :allow-sorting="false" />
<DxColumn :width="150" data-field="Address" caption="주소" data-type="string" alignment="center" :allow-sorting="false" />
<DxColumn :width="150" data-field="City" caption="도시" data-type="string" alignment="center" :allow-sorting="false" />
<DxColumn :width="150" data-field="State" caption="구" data-type="string" alignment="center" :allow-sorting="false" />
<DxColumn :width="150" data-field="Zipcode" caption="우편번호" data-type="string" alignment="center" :allow-sorting="false" />
<DxColumn :width="150" data-field="HomePhone" caption="자택전화" data-type="string" alignment="center" :allow-sorting="false" />
<DxColumn :width="150" data-field="MobilePhone" caption="휴대폰" data-type="string" alignment="center" :allow-sorting="false" />
<DxColumn :width="150" data-field="Skype" caption="스카이프" data-type="string" alignment="center" :allow-sorting="false" />
<DxColumn :width="150" data-field="Email" caption="메일" data-type="string" alignment="center" :allow-sorting="false" />
</DxDataGrid>
</div>
</template>
<script>
import {
DxDataGrid,
DxColumn,
DxColumnChooser,
//DxColumnFixing,
//DxScrolling
} from 'devextreme-vue/data-grid'
export default {
name: 'DataGrid00'
, components: {
DxDataGrid
, DxColumn
, DxColumnChooser
//, DxColumnFixing
//, DxScrolling
}
, data() {
return {
dataList: undefined
, tableData : undefined
, tableList : undefined
}
}
, mounted() {
this.init()
}
, methods: {
init(){
//데이터 주석처리시 '데이터 없습니다.'표시
this.dataList = this.dataInit()
}
, dataInit(){
return [{
'ID': 1,
'FirstName': 'John',
'LastName': 'Heart',
'Position': 'CEO',
'BirthDate': '1964/03/16',
'HireDate': '1995/01/15',
'Title': 'Mr.',
'Address': '351 S Hill St.',
'City': 'Los Angeles',
'State': 'California',
'Zipcode': 90013,
'Email': 'jheart@dx-email.com',
'Skype': 'jheartDXskype',
'HomePhone': '01012345678',
'DepartmentID': 6,
'MobilePhone': '(213) 555-9392'
}, {
'ID': 2,
'FirstName': 'Olivia',
'LastName': 'Peyton',
'Position': 'Sales Assistant',
'BirthDate': '1981/06/03',
'HireDate': '2012/05/14',
'Title': 'Mrs.',
'Address': '807 W Paseo Del Mar',
'City': 'Los Angeles',
'State': 'California',
'Zipcode': 90036,
'Email': 'oliviap@dx-email.com',
'Skype': 'oliviapDXskype',
'HomePhone': '01012345678',
'DepartmentID': 5,
'MobilePhone': '(818) 555-2387'
}, {
'ID': 3,
'FirstName': 'Robert',
'LastName': 'Reagan',
'Position': 'CMO',
'BirthDate': '1974/09/07',
'HireDate': '2002/11/08',
'Title': 'Mr.',
'Address': '4 Westmoreland Pl.',
'City': 'Bentonville',
'State': 'Arkansas',
'Zipcode': 91103,
'Email': 'robertr@dx-email.com',
'Skype': 'robertrDXskype',
'HomePhone': '01012345678',
'DepartmentID': 6,
'MobilePhone': '(818) 555-2387'
}, {
'ID': 4,
'FirstName': 'Greta',
'LastName': 'Sims',
'Position': 'HR Manager',
'BirthDate': '1977/11/22',
'HireDate': '1998/04/23',
'Title': 'Ms.',
'Address': '1700 S Grandview Dr.',
'State': 'Georgia',
'City': 'Atlanta',
'Zipcode': 91803,
'Email': 'gretas@dx-email.com',
'Skype': 'gretasDXskype',
'HomePhone': '01012345678',
'DepartmentID': 5,
'MobilePhone': '(818) 555-6546'
}, {
'ID': 5,
'FirstName': 'Brett',
'LastName': 'Wade',
'Position': 'IT Manager',
'BirthDate': '1968/12/01',
'HireDate': '2009/03/06',
'Title': 'Mr.',
'Address': '1120 Old Mill Rd.',
'State': 'Idaho',
'City': 'Boise',
'Zipcode': 91108,
'Email': 'brettw@dx-email.com',
'Skype': 'brettwDXskype',
'HomePhone': '01012345678',
'DepartmentID': 7,
'MobilePhone': '(626) 555-0358'
}, {
'ID': 6,
'FirstName': 'Sandra',
'LastName': 'Johnson',
'Position': 'Controller',
'BirthDate': '1974/11/15',
'HireDate': '2005/05/11',
'Title': 'Mrs.',
'Address': '4600 N Virginia Rd.',
'State': 'Utah',
'City': 'Beaver',
'Zipcode': 90807,
'Email': 'sandraj@dx-email.com',
'Skype': 'sandrajDXskype',
'HomePhone': '01012345678',
'DepartmentID': 5,
'MobilePhone': '(562) 555-2082'
}, {
'ID': 7,
'FirstName': 'Kevin',
'LastName': 'Carter',
'Position': 'Shipping Manager',
'BirthDate': '1978/01/09',
'HireDate': '2009/08/11',
'Title': 'Mr.',
'Address': '424 N Main St.',
'State': 'California',
'City': 'San Diego',
'Zipcode': 90012,
'Email': 'kevinc@dx-email.com',
'Skype': 'kevincDXskype',
'HomePhone': '01012345678',
'DepartmentID': 3,
'MobilePhone': '(213) 555-2840'
}, {
'ID': 8,
'FirstName': 'Cynthia',
'LastName': 'Stanwick',
'Position': 'HR Assistant',
'BirthDate': '1985/06/05',
'HireDate': '2008/03/24',
'Title': 'Ms.',
'Address': '2211 Bonita Dr.',
'City': 'Little Rock',
'State': 'Arkansas',
'Zipcode': 90265,
'Email': 'cindys@dx-email.com',
'Skype': 'cindysDXskype',
'HomePhone': '01012345678',
'DepartmentID': 4,
'MobilePhone': '(818) 555-6655'
}, {
'ID': 9,
'FirstName': 'Kent',
'LastName': 'Samuelson',
'Position': 'Ombudsman',
'BirthDate': '1972/09/11',
'HireDate': '2009/04/22',
'Title': 'Dr.',
'Address': '12100 Mora Dr',
'City': 'St. Louis',
'State': 'Missouri',
'Zipcode': 90272,
'Email': 'kents@dx-email.com',
'Skype': 'kentsDXskype',
'HomePhone': '01012345678',
'DepartmentID': 26,
'MobilePhone': '(562) 555-9282'
}, {
'ID': 10,
'FirstName': 'Taylor',
'LastName': 'Riley',
'Position': 'Network Admin',
'BirthDate': '1982/08/14',
'HireDate': '2012/04/14',
'Title': 'Mr.',
'Address': '7776 Torreyson Dr',
'City': 'San Jose',
'State': 'California',
'Zipcode': 90012,
'Email': 'taylorr@dx-email.com',
'Skype': 'taylorrDXskype',
'HomePhone': '01012345678',
'DepartmentID': 5,
'MobilePhone': '(310) 555-7276'
},
{
'ID': 11,
'FirstName': 'John',
'LastName': 'Heart',
'Position': 'CEO',
'BirthDate': '1964/03/16',
'HireDate': '1995/01/15',
'Title': 'Mr.',
'Address': '351 S Hill St.',
'City': 'Los Angeles',
'State': 'California',
'Zipcode': 90013,
'Email': 'jheart@dx-email.com',
'Skype': 'jheartDXskype',
'HomePhone': '01012345678',
'DepartmentID': 6,
'MobilePhone': '(213) 555-9392'
}, {
'ID': 12,
'FirstName': 'Olivia',
'LastName': 'Peyton',
'Position': 'Sales Assistant',
'BirthDate': '1981/06/03',
'HireDate': '2012/05/14',
'Title': 'Mrs.',
'Address': '807 W Paseo Del Mar',
'City': 'Los Angeles',
'State': 'California',
'Zipcode': 90036,
'Email': 'oliviap@dx-email.com',
'Skype': 'oliviapDXskype',
'HomePhone': '01012345678',
'DepartmentID': 5,
'MobilePhone': '(818) 555-2387'
}, {
'ID': 13,
'FirstName': 'Robert',
'LastName': 'Reagan',
'Position': 'CMO',
'BirthDate': '1974/09/07',
'HireDate': '2002/11/08',
'Title': 'Mr.',
'Address': '4 Westmoreland Pl.',
'City': 'Bentonville',
'State': 'Arkansas',
'Zipcode': 91103,
'Email': 'robertr@dx-email.com',
'Skype': 'robertrDXskype',
'HomePhone': '01012345678',
'DepartmentID': 6,
'MobilePhone': '(818) 555-2387'
}, {
'ID': 14,
'FirstName': 'Greta',
'LastName': 'Sims',
'Position': 'HR Manager',
'BirthDate': '1977/11/22',
'HireDate': '1998/04/23',
'Title': 'Ms.',
'Address': '1700 S Grandview Dr.',
'State': 'Georgia',
'City': 'Atlanta',
'Zipcode': 91803,
'Email': 'gretas@dx-email.com',
'Skype': 'gretasDXskype',
'HomePhone': '01012345678',
'DepartmentID': 5,
'MobilePhone': '(818) 555-6546'
}, {
'ID': 15,
'FirstName': 'Brett',
'LastName': 'Wade',
'Position': 'IT Manager',
'BirthDate': '1968/12/01',
'HireDate': '2009/03/06',
'Title': 'Mr.',
'Address': '1120 Old Mill Rd.',
'State': 'Idaho',
'City': 'Boise',
'Zipcode': 91108,
'Email': 'brettw@dx-email.com',
'Skype': 'brettwDXskype',
'HomePhone': '01012345678',
'DepartmentID': 7,
'MobilePhone': '(626) 555-0358'
}, {
'ID': 16,
'FirstName': 'Sandra',
'LastName': 'Johnson',
'Position': 'Controller',
'BirthDate': '1974/11/15',
'HireDate': '2005/05/11',
'Title': 'Mrs.',
'Address': '4600 N Virginia Rd.',
'State': 'Utah',
'City': 'Beaver',
'Zipcode': 90807,
'Email': 'sandraj@dx-email.com',
'Skype': 'sandrajDXskype',
'HomePhone': '01012345678',
'DepartmentID': 5,
'MobilePhone': '(562) 555-2082'
}, {
'ID': 17,
'FirstName': 'Kevin',
'LastName': 'Carter',
'Position': 'Shipping Manager',
'BirthDate': '1978/01/09',
'HireDate': '2009/08/11',
'Title': 'Mr.',
'Address': '424 N Main St.',
'State': 'California',
'City': 'San Diego',
'Zipcode': 90012,
'Email': 'kevinc@dx-email.com',
'Skype': 'kevincDXskype',
'HomePhone': '01012345678',
'DepartmentID': 3,
'MobilePhone': '(213) 555-2840'
}, {
'ID': 18,
'FirstName': 'Cynthia',
'LastName': 'Stanwick',
'Position': 'HR Assistant',
'BirthDate': '1985/06/05',
'HireDate': '2008/03/24',
'Title': 'Ms.',
'Address': '2211 Bonita Dr.',
'City': 'Little Rock',
'State': 'Arkansas',
'Zipcode': 90265,
'Email': 'cindys@dx-email.com',
'Skype': 'cindysDXskype',
'HomePhone': '01012345678',
'DepartmentID': 4,
'MobilePhone': '(818) 555-6655'
}, {
'ID': 19,
'FirstName': 'Kent',
'LastName': 'Samuelson',
'Position': 'Ombudsman',
'BirthDate': '1972/09/11',
'HireDate': '2009/04/22',
'Title': 'Dr.',
'Address': '12100 Mora Dr',
'City': 'St. Louis',
'State': 'Missouri',
'Zipcode': 90272,
'Email': 'kents@dx-email.com',
'Skype': 'kentsDXskype',
'HomePhone': '01012345678',
'DepartmentID': 26,
'MobilePhone': '(562) 555-9282'
}, {
'ID': 20,
'FirstName': 'Taylor',
'LastName': 'Riley',
'Position': 'Network Admin',
'BirthDate': '1982/08/14',
'HireDate': '2012/04/14',
'Title': 'Mr.',
'Address': '7776 Torreyson Dr',
'City': 'San Jose',
'State': 'California',
'Zipcode': 90012,
'Email': 'taylorr@dx-email.com',
'Skype': 'taylorrDXskype',
'HomePhone': '01012345678',
'DepartmentID': 5,
'MobilePhone': '(310) 555-7276'
}
]
}
}
}
</script>
<style scoped>
#gridContainer {
height: 400px;
width:900px;
}
</style>
반응형
'Vue.js' 카테고리의 다른 글
| DevExtreme DataGrid check box 정렬 (vue.js) (3) | 2022.09.17 |
|---|---|
| DevExtreme DataGrid 컬럼 정렬 (vue.js) (1) | 2022.09.16 |
| DevExtreme Button 스타일 정리(vue.js 버전) (2) | 2022.09.15 |
| vue.js naver map & kakao map(샘플) (280) | 2022.08.25 |
| vue.js naver map & kakao map (1) | 2022.08.18 |
댓글