본문 바로가기 메뉴 바로가기

eblo

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

eblo

검색하기 폼
  • 분류 전체보기 (113)
    • Spring Frameworks (27)
      • RESTful Service (4)
      • Thymeleaf (4)
    • Java (8)
    • UI(Front-End) (17)
      • 그리드 (11)
      • vuejs (0)
      • javascript 일반 (1)
      • css (0)
    • DB (4)
    • Server & System (0)
    • Design Pattern & Refactorin.. (0)
    • 잡동사니 (5)
      • 개인정보보안 (2)
    • 참고링크 (2)
    • 리팩토링(스프링기반) (13)
    • 프로젝트 (1)
    • Working log (14)
    • Test & ProtoTyping (2)
    • 엘라스틱서치 (0)
    • study (18)
      • springboot (18)
  • 방명록

그리드 (11)
AG-GRID 칼럼 동적 HIDE/SHOW 예제

AG-GRID 칼럼 동적 HIDE/SHOW 예제칼럼을 동적으로 보여주거나 감추는 예제 Html1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 AG GRID Column Hide 예제 AG GRID Column Hide 예제 Age Country Year Date var MainGrid = function(){ var _this = this; /* grid 영역 정의 */ this.gridDiv = "myGrid"; /* ..

UI(Front-End)/그리드 2019. 1. 30. 16:12
AG-GRID Datepicker 예제

AG-GRID Datepicker 예제그리드에 값을 넣을 때 datepicker를 써야 하는 경우에 대한 예제 입니다. Html빨간색 부분이 해당 부분입니다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 AG GRID Datepi..

UI(Front-End)/그리드 2019. 1. 30. 15:35
AG-GRID 추가/수정/삭제 예제

AG-GRID 추가/수정/삭제 예제예제에서 확인 할 내용1. 체크박스, 체크박스 전체 선택 및 해제- 코드를 통해 알 수있다. 2. 편집모드에서 시작, 종료 이벤트 처리 - 종료시 변경 데이터를 별도로 저장해 두었다가 저장 시점에 변경된 데이터만 서버에 전송할 필요가 있다. 3. 삭제 처리 4. 편집모드 강제 종료 하기- 편집모드에서 바로 저장, 수정 등의 버튼을 클릭하면 변경 사항이 적용이 안되는데 이때 강제 종료 시키면 해결이 된다. 5. 버튼을 통한 편집모드 이동. 6. 첫번째, 마지막에 ROW 추가하기 HTML1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575..

UI(Front-End)/그리드 2019. 1. 30. 15:24
AG-GRID 필터와 정렬 예제

AG-GRID 필터와 정렬 예제필터링과 정렬 관련 예제입니다. Html참고 mainGrid.setFilteredData(), mainGrid.sortByYearDesc()123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 AG GRID FILTER & SORT EXAMPLE AG GRID FILTER & SORT EXAMPLE 필터기능 확인 정렬 확인 전체 2004 2005 2006 2007 2008 20..

UI(Front-End)/그리드 2019. 1. 30. 15:12
AG-GRID Data 선택 이벤트 처리 예제

Row data 선택 이벤트 처리1. click 이벤트 처리 gridOptions에 onRowClicked를 구현하면 된다. 12345678910var gridOptions = { columnDefs: columnDefs, rowData: students, rowSelection: 'single', /* 'single' or 'multiple',*/ enableRangeSelection: true, suppressRowClickSelection: false, onRowClicked : funtion(event){ console.log('onRowClicked'); }};Colored by Color ScriptercsHtml123456789101112131415161718192021222324252627..

UI(Front-End)/그리드 2019. 1. 30. 15:02
AG-GRID cellRenderer 예제

Cell Renderer & Style & Drop Down 설정 예제 값을 받아서 보여줄 때 가공을 해야 하는 경우가 있습니다. 코드인 경우 코드의 값으로 전환해야 하고 필요한 경우 그래프나 아이콘, 이미지 등으로 보여 줘야 할 때도 있습니다. 그런 경우 cellRenderer를 이용해서 표현할 수 있습니다. 예제코드로는 세가지를 확인해 볼 수 있습니다. 1. cell에 스타일 적용하기. - 정렬 또는 background color 등을 지정할 수 있습니다. 2. data renderering- 숫자는 오른쪽 정렬을 해야 하며 세자리 마다 콤마를 찍어 줘야 합니다. - Style, Use는 코드 값을 받으며 Value로 표현해야 합니다. 3. Data 편집시 drop down 박스 처리 (중요)- 여기..

UI(Front-End)/그리드 2019. 1. 30. 14:21
AG-GRID 기본 예제

1. 기본 예제 코드AG-GRID를 이용해서 화면에 데이터를 보여주는 예제입니다. Athlete, Age 칼럼은 좌측에 고정을 시켰습니다. HTML12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 AG GRID 예제 AG GRID 기본 예제 var MainGrid = function(){ var _this = this; /* grid 영역 정의 */ this.gridDiv = "myGrid"; /* grid 칼럼 정의 */ this.getColumnDefs = function(){ var columnDefs = [ {he..

UI(Front-End)/그리드 2019. 1. 30. 14:00
AG-GRID GRID OPTIONS 정의

1. AG-GRID GRID OPTIONS 정의

UI(Front-End)/그리드 2019. 1. 30. 13:01
AG-GRID 칼럼 정의

1. Column Definitions 자주 사용하면서 필수 값에 대해 설명합니다. 예제)123456789101112var columnDefs = [ {headerName:"Athlete", field: "athlete", width: 150, minWidth:120, pinned:'left', suppressSizeToFit: true, suppressMenu: true, sort: 'asc'}, {headerName:"Age", field: "age", width: 90, minWidth: 50, maxWidth: 100, pinned:'left', suppressMenu: true, suppressSorting : true}, {headerName:"Country", field: "country",..

UI(Front-End)/그리드 2019. 1. 30. 11:10
AG-GRID 설치 및 기본구조

AG-GRID 설치 라이브러리 추가만 하면 됩니다. Tasks 1. html 작업div 생성 2. javascript 작업칼럼정의gridOptions 정의 ag-grid생성 및 데이터 삽입 1. div 생성123 Colored by Color Scriptercs 2. 칼럼정의 12345678910111213var columnDefs = [ {headerName:"Athlete", field: "athlete", width: 150, minWidth:120, pinned:'left', suppressSizeToFit: true, suppressMenu: true, sort: 'asc'}, {headerName:"Age", field: "age", width: 90, minWidth: 50, maxWidth..

UI(Front-End)/그리드 2019. 1. 30. 10:39
이전 1 2 다음
이전 다음
공지사항
최근에 올라온 글
  • Maven System scope 사용하기
  • 017. Logback 설정
  • 016. 스프링부트 Profile 설정
  • 015. 메지시 관련 공통 설정(Converter⋯
최근에 달린 댓글
  • cellRenderer 쓰면 editable 을 fa⋯
  • 감사합니다
  • 안녕하세요. 이런좋은 코드개발자가 한국분이라니 대단하십⋯
  • 감사합니다~
Total
536,116
Today
28
Yesterday
349
링크
TAG
  • Spring Boot
  • mybatis
  • example
  • restful서비스
  • listToMap
  • thymeleaf
  • spring
  • 타임리프
  • oracle
  • REST
  • cache
  • 예제
  • 엑셀
  • 스프링부트
  • Javascript
  • RESTful
  • 그리드
  • 스프링
  • AG-GRID
  • java
  • ag grid
  • 메시지
  • SHEETJS
  • mapToList
  • 설정
  • lombok
  • 샘플
  • UI
  • sample
  • springboot
more
«   2023/02   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28
글 보관함
  • 2022/08 (1)
  • 2022/05 (18)
  • 2021/12 (6)
  • 2021/10 (4)

Blog is powered by Tistory / Designed by Tistory

티스토리툴바