Datalist

기본 사용

• 데이터 테이블

<div class="new-list is-border"></div>

<div style="width: 100%; height: 200px; overflow-x: auto">
  <div class="new-list2 is-border"></div>
</div>

Gn.create('datalist', {
  target: '.new-list',
  headers: [
    {
      label: 'no',
      key: 'number',
      bodyClass: 'has-text-left',
      style: {
        width: '50px',
        'text-align': 'center'
      }
    },
    {
      label: '제목',
      key: 'title',
      className: 'main-title'
    },
    {
      label: '날짜',
      key: 'date'
    },
    {
      label: '설명',
      key: 'desc'
    },
    {
      label: '기타',
      key: 'etc'
    }
  ],
  data: [
    {
      number: '1',
      title: '오늘',
      date: '2023-07-28',
      desc: 'hellojj'
    },
    {
      number: '2',
      title: '내일',
      date: '2023-07-29',
      desc: 'chaaaaaa'
    }
  ],
  onChange: updatedData => {
    console.log('updatedData', updatedData);
  }
});
Gn.create('datalist', {
  target: '.new-list2',
  headers: [
    {
      label: 'row-number',
      key: 'number'
    },
    {
      label: '제목',
      key: 'title'
    },
    {
      label: '날짜',
      key: 'date'
    },
    {
      label: '상세설명',
      key: 'desc'
    },
    {
      label: '숨김',
      key: 'ishidden',
      isHidden: true
    }
  ],
  data: [
    { number: 1, title: '첫 번째', date: '2023-07-28', desc: '이것은 첫 번째 요소입니다.', ishidden: 'datalist에 표시되지 않습니다.' },
    { number: 2, title: '두 번째', date: '2023-07-29', desc: '이것은 두 번째 요소입니다.', ishidden: 'datalist에 표시되지 않습니다.' },
    { number: 3, title: '세 번째', date: '2023-07-30', desc: '', ishidden: 'datalist에 표시되지 않습니다.' },
    { number: 4, title: '', date: '2023-07-31', desc: '이것은 네 번째 요소입니다.', ishidden: 'datalist에 표시되지 않습니다.' },
    { number: 5, title: '다섯 번째', date: '2023-08-01', desc: '이것은 다섯 번째 요소입니다.' },
    { number: 6, title: '여섯 번째', date: '2023-08-02 ~ 2023-11-02', desc: '이것은 여섯 번째 요소입니다.' },
    { number: 7, title: '일곱 번째 일곱 번째 일곱 번째', date: '2023-08-03', desc: '이것은 일곱 번째 요소입니다.' },
    {
      number: 8,
      title: '여덟 번째',
      date: '2023-08-08',
      desc: '이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.'
    }
  ],
  hasUpdate: true,
  hasDelete: true,
  onUpdate: function (row, index) {
    console.log('row', row);
    console.log('index', index);
  },
  onChange: updatedData => {
    console.log('updatedData', updatedData);
  },
  isHiddenEmpty: true
});

메소드