개발이야기235

• 

  [jQuery] jqGrid multiselect disabled / checked false 처리 (onSelectAll, loadComplete, onSelectRow) jqGrid 리스트 안에 체크박스를 넣는 옵션을 (multiselect: true) row 상태에 따라서 제어하는 소스입니다. 저는 memo_yn='N' (메모가 없는) row에 대해서 체크박스를 비활성화 시켰습니다. jqGrid가 모두 로드 된 후에 실행되는 loadComplete 부분과, checkbox를 전체 선택할 수 있는 onSelectAll 부분, 그리고 해당 row를 클릭했을 때 발생하는 onSelectRow의 소스를 살펴보시면 됩니다. 소스코드 날짜 이름 아이디 상품 가격 메모 소스화면 개발이야기/jQuery 2022. 11. 9.

• 

  [jQuery] jqGrid tooltip 만들기, 표시하기 (jqgrid tooltip example) jqGrid의 셀 위에 마우스를 오버하면 tooltip을 노출시키는 소스입니다. colModel 옵션의 formatter을 활용해서 메모가 있는 상태를 체크해서 표시하고 있습니다. jqGrid의 tooltip 옵션이 아닌 스타일로 꾸미다 보니깐 손쉽게 수정 가능하십니다. row를 클릭했을 때는 메모의 상세 내용은 오른쪽 input 창에도 보이고 있습니다. 저는 메모 내용과 날짜만 data에 담아서 노출하고 있는데 더 많은 정보를 tooltip으로 수정 가능하십니다. 날짜 이름 아이디 상품 가격 메모 소스화면 ↓↓↓↓↓ jqGrid 다른 예제 입니다. [jQuery] jqGrid formatter 버튼 만들기 (jqGrid colModel formatter) jqGrid를 사용하면서 json 형식의 데이터.. 개발이야기/jQuery 2022. 11. 4.

• 

  [자바스크립트] 더보기 (more) 버튼으로 리스트 노출하기 더보기 (more) 버튼으로 일정 개수의 이미지를 노출하는 소스 코드입니다. HTML 로딩이 끝난 후 window.load가 실행되면서 id='js-load'의 담긴 리스트의 출력 개수를 확인하고 노출시킵니다. 저는 리스트를 최초에 3개만 노출시키고 더보기 버튼을 클릭했을 때 3개씩 추가로 노출시키고 있습니다. load 함수가 실행되면서 li 엘리먼트 개수를 확인하고 리스트가 다 보이면 더보기 버튼을 숨기고 있습니다. 샘플 소스코드이니 입맛에 맞게 사용하시면 됩니다. 더보기 소스화면 개발이야기/자바스크립트 2022. 11. 3.

• 

  [jQuery] jqGrid onSelectRow 사용법, 예제 (onSelectRow example) jqGrid row를 클릭했을 때 발생하는 이벤트입니다. onSelectRow : function(index, status) { } 해당 이벤트의 index는 row의 id (첫 번째 row는 1)이며, status는 선택이 되었을 때 true, 반대는 false를 반환합니다. jqGrid의 함수 getRowData로 해당 index의 row의 값들을 가져와서 뿌려주고 있습니다. 아래 소스코드를 보시면 쉽게 이해 가능하시니 응용해서 사용하시면 됩니다. 날짜 이름 아이디 상품 가격 소스화면 [jQuery] jqGrid header colspan (헤더 병합), setGroupHeaders jqGrid header(colNames)를 병합해서 위에 그룹화된 header를 생성하는 방법입니다. grid를 위에.. 개발이야기/jQuery 2022. 11. 2.

• 

  [jQuery] validate 사용법, 예제 (form validation) form 입력값에 유효성을 체크하는 validation plugin 입니다. 저는 메시지를 tooltip으로 띄우기 위해 bootstrap과 같이 사용했습니다. form id를 지정하시고, form 태그 안에 name을 지정하셔서 필수 입력값에 대해서 메시지를 입력해주시면 됩니다. form 유효성 체크가 끝나면 submitHandler 가 실행됩니다. submit 될 때 마지막 이벤트를 등록하시면 됩니다. 이름 휴대전화번호 성별 남성 여성 별명 자기소개 저장 소스 화면 개발이야기/jQuery 2022. 11. 1.

• 

  [jQuery] jqGrid header colspan (헤더 병합), setGroupHeaders jqGrid header(colNames)를 병합해서 위에 그룹화된 header를 생성하는 방법입니다. grid를 위에서 먼저 그려주고 병합을 해주시면 됩니다. 사용방법 $("#jqgrid ID").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[ {startColumnName: '병합할 colname', numberOfColumns:병합할 개수, titleText: "명칭"}, {startColumnName: '병합할 colname', numberOfColumns:병합할 개수, titleText: "명칭"} ] }); 코드 실행화면 [jQuery] jqGrid 사용법, 설정 (jqgrid cdn example) 관리자 템플릿으로 사용하.. 개발이야기/jQuery 2022. 10. 27.

• 

  [jQuery] jqGrid multiselect (checkbox) 체크 된 값 가져오기 jqGrid 리스트 안에 체크박스를 넣고 싶으시면 multiselect: true 옵션만 추가하시면 됩니다. (colname, colmodel 무관) 다음은 체크박스가 체크된 값들만 화면에 노출시켜 보겠습니다. selarrrow 옵션을 이용해서 체크 된 모든 열의 rowId를 가져옵니다. sel_rows의 배열 길이를 체크해서 선택 여부도 확인할 수 있습니다. 체크박스가 하나 이상 선택이 되면 each() 메서드를 활용해서 값들을 가져옵니다. 저는 화면에 보여 드리기 위해 json 형태로 가공했습니다. 확인 [jQuery] jqGrid 사용법, 설정 (jqgrid cdn example) 관리자 템플릿으로 사용하기 좋은 jqgrid를 소개드립니다. 저는 무료로 사용 할수 있는 v4.6으로 사용했습니다. c.. 개발이야기/jQuery 2022. 10. 26.

• 

  [jQuery] jqGrid formatter 버튼 만들기 (jqGrid colModel formatter) jqGrid를 사용하면서 json 형식의 데이터 이외에 사용자가 원하는 데이터를 노출하고 싶을 때 colModel의 옵션에 formatter를 활용하시면 됩니다. 저는 리스트의 마지막 2열에 수정/삭제 버튼을 만들었습니다. formatter 부분에 함수명을 넣고 버튼 클릭 시 행의 rowID와 숨겨져 있는 idx의 값을 화면에 노출했습니다. 함수 formatOpt1, formatOpt2의 선택한 row의 데이터를 가져오는 부분을 참고하셔서 응용하시면 됩니다. [jQuery] jqGrid 사용법, 설정 (jqgrid cdn example) 관리자 템플릿으로 사용하기 좋은 jqgrid를 소개드립니다. 저는 무료로 사용 할수 있는 v4.6으로 사용했습니다. cdn으로 v4.6을 로드해 줍니다. 이 외에도 jq.. 개발이야기/jQuery 2022. 10. 26.

• 

  [jQuery] jqGrid 사용법, 설정 (jqgrid cdn example) 관리자 템플릿으로 사용하기 좋은 jqgrid를 소개드립니다. 저는 무료로 사용 할수 있는 v4.6으로 사용했습니다. cdn으로 v4.6을 로드해 줍니다. 이 외에도 jquery-ui.css 와 jquery min.js도 로드합니다. (필수) table의 id를 지정해서 jqgrid의 리스트로 만듭니다. 하단의 div 영역은 pager 부븐이고 jqgrid의 옵션에 pager 부분에 작성해줍니다. jqgrid의 리스트 내용은 예제이며, json형태의 배열입니다. (var mydata) jqgrid 옵션 datatype : 리스트에 뿌려줄 데이터 타입을 설정합니다. json과 local을 많이 사용합니다. colNames : 리스트 header 부분 (배열로 설정) colModel : data의 매핑 자료입.. 개발이야기/jQuery 2022. 10. 25.

• [PHP] 문자열 비교 strcmp 사용법, 예제 (로그인) php 내장 함수로 문자열을 비교할 때 사용하는 함수입니다. 사용방법 strcmp(문자열1, 문자열2) 문자열이 같으면 0 (true), 다르면 1 (false) 리턴합니다. 아래 예제는 아이디와 비밀번호를 비교해서 로그인 기능을 구현했습니다. 사용자가 입력한 값과 db 데이터 아이디, 비밀번호를 비교하였습니다. (사용자 입력값 : input_id, input_password / db 데이터 값 : db_id, db_password) 사용법이 간단해서 응용해서 활용해주세요. 개발이야기/PHP 2022. 10. 25.

• [자바스크립트] 실시간 시계 만들기 (타이머) 자바스크립트로 구현한 실시간 시계(타이머)입니다. 스크립트로 현재 날짜와 시간을 가져와서 date/ month / 분 / 초 에는 10보다 작으면 앞에 0을 붙여주는 형태입니다. setTimeout() 함수를 통해서 0.5초마다 함수를 실행하고 있습니다. 간단한 소스 이므로 쉽게 구현 가능하십니다. ↓↓↓↓↓ 소스 예제 화면입니다. HTML 삽입 미리보기할 수 없는 소스 개발이야기/자바스크립트 2022. 10. 21.

• 

  [자바스크립트] 오늘 하루 열지 않기 / 닫기 (레이어 팝업) map 태그를 사용해서 이미지맵을 만들어 각각의 버튼에 함수를 호출하도록 하였습니다. 자바스크립트에서 쿠키의 이름, value, 기간을 체크해 레이어 팝업을 visible / hidden 할지 체크합니다. 닫기 버튼을 클릭했을 경우는 레이어 팝업을 숨김 처리하고, 하루 동안 열지 않기를 체크하면 쿠키를 저장해서 다음 페이지에 진입 시 하루 동안 레이어 팝업을 노출하지 않게 됩니다. 레이어 팝업 영역을 확인하시고 소스를 응용해서 사용하시면 됩니다. 이미지 맵 좌표 구하는 글은 아래에 링크로 남겨 놓겠습니다. https://jh-tr.tistory.com/47 개발이야기/자바스크립트 2022. 10. 21.