jQuery/w2ui 썸네일형 리스트형 [w2ui] 그리드(Grid)의 Row(행), Column(열) 변경하기. ■ 그리드 Column(열) 위치 변경하기. 01. 해당 그리드의 컬럼의 위치를 변경하려면 reorderColumns 속성을 지정하고 true를 선언해 주기만 하면 된다. w2ui_reorder_columns.php 02. 출력결과는 아래와 같다. 맨앞측의 라인넘버와(lineNumbers), 체크박스열(selectColumn)은 이동이 불가능 하지만. 다른 행은 자유롭게 이동하는것을 알 수 있다. ■ 그리드 Row(행) 위치 변경하기. 01. 해당 그리드의 로우의 위치를 변경하려면 reorderRows 속성을 지정하고 true를 선언해 주기만 하면 된다. w2ui_reorder_records.php 02. 출력결과는 아래와 같다. 선택한 행을 클릭하여 드래그 함으로써 특정 위치로 이동 시킬 수 있다. 더보기 [w2ui] 그리드(Grid)에 로딩창 나타내기. ■ 해당 코드는 w2ui 그리드는 아래와 같이 로딩중 알림을 띄어서 불러오는 페이지를 표실할 수있다. 출 력 함 수 설 명 .lock · 로딩중임을 표시하는 창이 나타난다. · 메세지 내용이 없으면 단순히 동그란 톱니바퀴만 돌아간다. .unlock · 화면에 나타나는 로딩중 표시를 해제한다. .error · 에러메시지 띄우는 팝업창 01. 해당 함수들을 적용한 코드는 아래와 같다. w2ui_grid_lock.php Lock Unlock Just a Spinner Error 02. 출력결과는 아래와 같다. 각각의 버튼을 눌러보면 해당기능 들이 어떻게 작동하는지 알 수 있다. 더보기 [w2ui] 그리드(Grid) 내용 수정하기. ■ w2ui 그리드(Grid) 내용 수정하기. w2ui의 그리드에서 editable:속성 을 지정하는것으로 그리드의 내용을 수정할 수 있다. editable 속성 설 명 checkbox 체크박스를 생성하고 화면에 나타낸다. true몇 체크, false면 해제이다. text 선택한 공간의 내용을 수정한다. int 선택한 공간의 내용을 수정한다. 숫자만 수정이 가능하다. money 해당공간에 돈의 단위를 수정 할 수 있게 한다. 기본 단위는 $달러 이다. percent 해당공간의 백분율을 수정할 수 있게 한다. color RGB 컬러를 선택할 수 있다. date 해당 컬럼의 날짜를 수정할 때 사용한다. time 해당 컬럼의 시간을 수정할 때 사용한다. list 해당 컬럼을 수정할 경우 예로 보여줄 리스트 항.. 더보기 [w2ui] 그리드 검색창(Grid) 검색창에 버튼 기능 추가하기. ■ 그리드 검색창(Grid) 검색창에 버튼 기능 추가하기. 01. 그리드 상단 검색창에 버튼을 추가로 올려보자. 코드는 아래와 같다. w2ui_grid_toolbar.php 02. 출력결과는 아래와 같다. 위 소스를 보면 각 버튼이 기본 w2ui에서 지정한 버튼 형태로 나타나는 것을 알 수 있다.좀더 사용자가 사용하고 싶은 버튼등을 추가하기 위해서는 아래 내용을 참고하도록 하자. ■ 그리드 검색창(Grid) 검색창에 사용자 지정 버튼 기능 추가. 01. 아래소스는 위의 코드에서 버튼 기능을 커스텀 버튼으로 위와 똑같이 구현한 내용이다. w2ui_grid_custom_toolbar.php 02. 출력결과는 아래와 같다. 모든기능이 위와 동일하다. 더보기 [w2ui] 상세 데이터를 표시하는 그리드(Grid) 그리기. ■ w2ui에서 상세 데이터를 표시하는 그리드 그리기. 01. w2ui의 그리드는 행과 열의 위치를 변경하여 상세 데이터를 나타내는 형태의 그리드를 그릴 수 있다. w2ui_master_details.php 02. 출력결과는 아래와 같이 위 상단의 그리드에서 해당 이름을 더블 클릭하면 아래 상세 그리드에. 클릭한 데이터가 나타나 지는 구조이다. 더보기 이전 1 2 3 4 다음
