! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!
제품 버전 확인하기

전체선택 체크박스 추가 > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

회원가입
로그인
MESCIUS 카카오톡 채널 추가
메시어스 +
카카오톡 채널 추가를 통해 MESCIUS의 최신 정보, 이벤트, 세미나 정보를 빠르게 받아 보실수 있습니다
홈 링크 페이스북 링크 유튜브 링크

Wijmo

Q&A | 토론

VueJS 전체선택 체크박스 추가

페이지 정보

작성자 offender
프로필 보기 쪽지 보내기
작성일 2024-04-17 10:56 조회 34회 댓글 0건
제품 버전 : 5.20241.9
컨트롤 이름 : 체크박스

본문


 

위와 같이 체크박스 열을 구성하려면, :initialized로 boolean checker?를 이용하는 방법밖에는 없나요?



아래 코드에서 header가 ""으로 되어있는 열을 체크박스 열로 만들어주고싶습니다.


<wj-flex-grid :itemsSource="filteredUserDataRef" :headersVisibility="'Column'" :initialized="initGrid">
  <wj-flex-grid-column header="=" binding="id" :width="30" align="center"></wj-flex-grid-column>
  <wj-flex-grid-column header="" align="center" :width="40" binding="active"
  ></wj-flex-grid-column>
  <wj-flex-grid-column header="사용자ID" binding="userId" align="center"></wj-flex-grid-column>
</wj-flex-grid>
  • 페이스북으로 공유
  • 트위터로 공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

1 답변

VueJS Re: 전체선택 체크박스 추가

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 MESCIUS엘라
프로필 보기 쪽지 보내기
작성일 2024-04-19 15:51 댓글 0건

본문

안녕하세요 메시어스입니다.


체크박스 열에서 전체 선택 체크박스를 설정하는 방법의 경우, BooleanChecker 클래스를 설정하시면 됩니다.


초기화 함수에서(샘플의 initGrid() 함수) getColumn() 함수를 사용해 'active' 가 바인딩 된 열을 가져온 후 BooleanChecker 클래스를 설정하시면 헤더 셀에 체크박스가 추가되는 것을 확인할 수 있습니다.


더불어 본문에서 공유해주신 첫 번째 이미지의 체크박스와 같이, 체크박스 클릭 시 행 또는 그리드 전체 선택이 가능한 Selector 클래스를 적용하는 코드도 같이 안내드리오니 샘플에서 확인하여 보시기 바랍니다.


자세한 코드는 아래의 샘플을 참고하여 주시기 바랍니다.



다른 궁금한 점이 생기시면 문의주시기 바랍니다.


감사합니다.

메시어스 드림


댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

카테고리

인기글

더보기

최신글

더보기

셀럽

최근 7일 종합
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.