쿠키값 확인하는 방법

 

사이트: https://webfoxrain.tistory.com/2

 

javascript 자바스크립트 쿠키 생성 및 가져오기 방법

자바스크립트를 통해 쿠키 설정을 할때 아래의 함수를 이용하시면 편리 합니다. 쿠키는 키에 값을 넣어 저장하고 불러오고 다시 재설정하는 방식으로 제어하며 사용합니다. 쿠키는 저장하는 방

webfoxrain.tistory.com

 

확인한 쿠키값 가져오는 방법

var checkEvent = getCookie("Ck_01");

//checkEvent 라는 변수를 만들어 브라우져 쿠키 "Ck_01" 값을 가져 옵니다.

사이트: https://webfoxrain.tistory.com/2

 

javascript 자바스크립트 쿠키 생성 및 가져오기 방법

자바스크립트를 통해 쿠키 설정을 할때 아래의 함수를 이용하시면 편리 합니다. 쿠키는 키에 값을 넣어 저장하고 불러오고 다시 재설정하는 방식으로 제어하며 사용합니다. 쿠키는 저장하는 방

webfoxrain.tistory.com

 

'프론트엔드 > JavaScript' 카테고리의 다른 글

ajax예제  (0) 2021.11.18
자바스크립트로 행 추가 하는 방법  (0) 2021.10.29
JQGRID 사용  (0) 2021.07.12
datepicker 이용 달력 출력  (0) 2021.07.12
정규표현식 - 패턴(표현)  (0) 2021.06.07

JqGrid는 엑셀형식으로 화면을 처리하기위해서 사용된다.

직접 테이블을 짜는 것보다 JqGrid를 사용하는것이 좀 더 간편할 수 도 있을것 같다.

 

JqGrid 버전과 Jqeury 버전을 맞춰주어야 에러가 발생하지 않는것 같다.

Jqgrid 설치하기 : 네이버 블로그 (naver.com)

 

Jqgrid 설치하기

이클립스만 깔려있다는 가정 하에 아무 것도 없이 처음부터 시작을 해 본다. 우선 jqGrid 를 설치하기 위...

blog.naver.com

사용하기전에 JqGrid가 유료로 정책이 바뀌었기 때문에 버전을 확인하여야한다. 현재 4.7.1 버전까지 무료인거으로 보여진다.

[jqGrid] 버전에 따른 유/무료 라이선스 정책 (1004lucifer.blogspot.com)

 

[jqGrid] 버전에 따른 유/무료 라이선스 정책

  [ jqGrid 한글 API 문서 링크 ] 그리드(Grid) 제품중에 무료 라이선스를 지원하는 jqGrid 라는걸 사용하게 되었는데, 버전에 따라 유/무료 정책이 달라져 상업용으로 사용하려는 경우에 버전을 신경

1004lucifer.blogspot.com

 

사용 예시 참고 사이트: jquery jqgrid 의 모든 것, 사용법, jQuery 추천 그리드 :: 알짜배기 프로그래머 (tistory.com)

 

jquery jqgrid 의 모든 것, 사용법, jQuery 추천 그리드

jquery jqgrid 의 모든 것, 사용법, jQuery 추천 그리드 jqgrid는 개발하기 편하고 빠르며 다양한 옵션을 제공하여 선호하는 분들이 많죠. 이번 포스팅에서는 이에 대한 사용법을 알아보도록 하겠습니다

aljjabaegi.tistory.com

[JavaScript] jqGrid 사용하기 1 - 플러그인 다운로드 및 환경 설정 :: 나만의 기록들 (tistory.com)

 

[JavaScript] jqGrid 사용하기 1 - 플러그인 다운로드 및 환경 설정

- JqGrid 플러그인 다운로드 및 설정 - jqGird는 데이터를 그리드 형식으로 보여주는 jQuery 플러그인 이다. 이번에 처음으로 접하게 되었는데 확실히 다양한 기능들을 제공해 주어 생각보다 편리한

mine-it-record.tistory.com

 

JqGrid 크기 동적 조절하는 방법

$(document).ready(function() {
	var dataArr = [ 
		{ID:"1",javascript:"80",python:"60",jsp:"50",aaaa:10},
		{ID:"2",javascript:"57",python:"80",jsp:"50"},
		{ID:"3",javascript:"90",python:"40",jsp:"85"},
		{ID:"4",javascript:"67",python:"84",jsp:"76"},
		{ID:"5",javascript:"35",python:"83",jsp:"85"},
		{ID:"6",javascript:"90",python:"67",jsp:"56"},
		{ID:"7",javascript:"80",python:"60",jsp:"50"},
		{ID:"8",javascript:"45",python:"67",jsp:"100"},
		{ID:"9",javascript:"90",python:"40",jsp:"68"},
		{ID:"10",javascript:"67",python:"57",jsp:"76"},
		{ID:"11",javascript:"36",python:"83",jsp:"35"},
		{ID:"12",javascript:"76",python:"35",jsp:"98"},
		];
	
	$("#jqGrid").jqGrid({ 
		datatype: "local",
		data: dataArr,
		height: 250,
		width: 500,
		colNames : ['선택','ID','자바스크립트','파이썬','JSP','aaaa'],
		
		colModel:[
			{name: 'checkBox',
			index: 'checkBox',
			width: 70,
			align:'center'
			},
			
			{name:"ID",
			index:"ID", 
			width:15, 
			align:'center', 
			hidden:false 
			}, 
			
			{name : 'javascript', 
			index : 'javascript', 
			width : 70, 
			align : 'left', 
			hidden:false, }, 
			
			{name : 'python', 
			index : 'python', 
			width : 70, 
			align : 'center', 
			hidden:false }, 
			
			{name : 'jsp', 
			index : 'jsp', 
			width : 70, 
			resizable : true,
			align : 'right',
			hidden:false },
			
			{name : 'aaaa', 
			index : 'aaaa', 
			width : 70, 
			resizable : true,
			align : 'right',
			hidden:false }],
			
			//loadtext: "로딩중일때 표시되는 텍스트!", 
			caption: "jQuery Grid: jqGrid 샘플", 
			pager:"#gridpager", 
			rowNum:5,
			multiselect:true,
			mtype:"POST",
            // 크기 자동조절 하기위해서 옵션 선택
			autowidth: true

	});
// jqGrid 동적 사이즈 변경 
	$(window).on('resize.jqGrid', function () {
   		jQuery("#jqGrid").jqGrid( 'setGridWidth', $("#div_Grid").width())
   	})

 

<div class="row" id="div_Grid" style="width: 100% ">
		<div>
		 	<table id = "jqGrid"></table>
		 	<div id="gridpager"></div>
		</div>
	</div>

 

참고 사이트: jqgrid 반응형으로 가로(width) 조절하기 :: 행배 (tistory.com)

 

jqgrid 반응형으로 가로(width) 조절하기

창이 작아지거나 커지면 jqgrid가 벗어나거나 작아지지않아서 고민이였다. 그래서 라이브러리를 보니 jqgrid의 사이즈를 조절해주는 기능이 있었다. resize.jqGrid로 조절해주면된다. 코드는 아래 1 2 3

pjsprogram.tistory.com

 

가로 스크롤 치리하기 위한 옵션

shrinkToFit :false

 

https://not-null.tistory.com/31

 

[jqGrid] 가로 스크롤

가로 스크롤 넣어야 할 때 옵션 셋팅 shrinkToFit :false autowidth: true 코드 $("#gridId").jqGrid({ height:auto, autowidth:true, // jQgrid width 자동100% 채워지게 shrinkToFit:false, // width를 자동설정..

not-null.tistory.com

 

JqGrid 셀 수정 방법

원하는 컬럼에 속성추가: editable:true

 

바로바로 서버로 보내서 수정하는 방법

JqGrid속성에 아래 속성 추가

cellEdit:true,

//cellsubmit:'remote',
//cellurl:'/test/update',

 

버튼으로 한번에 보낼 경우 아래 속성 추가

cellEdit:true,

cellsubmit : 'clientArray',

 

참고 사이트

http://1004lucifer.blogspot.com/2019/05/jqgrid-cell.html

 

[jqGrid] Cell 편집 설명

  [ jqGrid 한글 API 문서 링크 ] 실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트 Cell 편집  - 셀 편집은 다음과 같은 동작을 통해 키 탐색 및 개별 셀 편집을 지원한다.  1) 편집...

1004lucifer.blogspot.com

 

특정셀 수정 조절하는 방법

https://pjsprogram.tistory.com/30?category=681991 

 

jqgrid 특정 셀 editable 유무 설정하기

컬럼 부분을 editable 조절하는건 예제가 많이 나와있어서 찾기가 쉬웠는데 이번에 jqgrid의 한 행의 select 박스에 값이 바뀌면 어떤 한 컬럼만 뺴고 전부 editable이 false가 되야 하는 걸 구현해야했다.

pjsprogram.tistory.com

jQuery("#jqGrid").setColProp('컬럼 name',{editable:false});

 

jqGird 속성 변경 참고 사이트

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=auheia&logNo=220619110428 

 

jqGrid 관련 기능 정리

요새 jqGrid를 많이 사용하는 터라 일단 정리. jqGrid reload jQuery("#list").trigger("reloadGrid");...

blog.naver.com

 

jqGrid 데모 사이트

http://trirand.com/blog/jqgrid/jqgrid.html

 

jqGrid Demos

jqGrid 4.0 New search module, Tree Grid and SubGrid improvements, new colModel cellattr event and much more... Enjoy Please, support the jqGrid project by clicking on our sponsors ad!

trirand.com

 

컬럼 색상 변경

 col = [컬럼 name으로 배열 선언];
	        	   
for(var i=0; i<col.length; i++){
// 별도로 사용가능
	   $("#jqGrid").jqGrid('setLabel',col[i], '', {'background':'#D4F4FA'});   
   }

 

jqGrid 데이터 가져오기

jqGrid 데이터를 가져오기 위해서는 rowid 값을 가져와야 한다.

마지막 열 ID 값을 가져오는 코드

var rowid = $("#jqGrid").getGridParam("selrow");

다중 선택 열 ID 값을 모두 가져오는 코드

var rowid2 = $("#jqGrid").getGridParam("selarrrow");

선택한 rowData를 가져오는 코드

var selRowData = $("#jqGrid").getRowData(rowid);

https://mine-it-record.tistory.com/285

 

[JavaScript] jqGrid 사용하기 3 - 선택한 row의 id 및 값(RowData) 가져오기 (feat. selrow, selarrrow, getRowData)

- jqGrid 선택한 row의 id 및 데이터 가져오기 - 선택한 row의 데이터만을 가져오기 위해서는 해당 row의 id가 있어야 하므로 같이 정리해 두고자 한다. 앞서 사용했던 영역을 대상으로 정리한다.    

mine-it-record.tistory.com

 

jqGrid에서 다중선택 기능을 이용하여 배열형태로 id값을 가져와서

해당 id에 해당하는 rowData를 가져오는 방법

// jqGird는 jqGrid를 가져올때 사용되는 table ID 값

//체크한 row의 id값 가져오기 배열형태
var rowid2 = $("#jqGrid").getGridParam("selarrrow");

// 반복문을 이용해서 Id에 해당하는 Row data값을 가져온다.
// 배열선언 (하나씩 불러와서 배열에 저장시키기 위해)
var array = new Array();
	for(var i=0; i <= rowid2.length-1; i++){
		//console.log(rowid2[0]);
		//console.log(i);
        // Id에 해당하는 rowData를 가져온다.
		var selRowData = $("#jqGrid").getRowData(rowid2[i]);
		//console.log(selRowData);
		// 가져온 데이터를 배열에 저장
		array.push(selRowData)
	} 
// 확인
console.log(array);
// json형태로 변환하여 확인
console.log(JSON.stringify(array));

 

 

JqGrid컬럼에 하이퍼링크를 걸때 서버에서 받아온 파라미터를 전달 받는 방법

원하는 컬럼에 fomatter 속성을 부여해준다.

참고 사이트: https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=jaeik714&logNo=140197196541 

 

[jQuery] jqGrid - formatter 옵션으로 컬럼 내용 변경 (rowdata 링크, rowdata 이미지)

[jQuery] jqGrid - formatter 옵션으로 컬럼 내용 변경 jqGrid를 사용하면서 데이터를 json 형식으로 변...

blog.naver.com

사용한 코드

// 원하는 JqGrid 컬럼에 fomatter 속성을 부여하고 함수를 설정해준다.
{          width:200,     name:'REAL_ATTACH_FILE',              index:'REAL_ATTACH_FILE',                                          	align:"center",  	    sortable:true, 	editable:false, formatter:cutom_link},
// 선언한 함수 정의
function cutom_link(cellvalue, options, rowdata, action){
		var id = cellvalue;
		var name = rowdata.PO_LINE_ID;
		var rowdata = rowdata.FILE_ID;
		if(rowdata == null){
			console.log("aaddd");
			
			var html = '<SPAN class="btn_pack btn_white_01_small small" style="vertical-align:bottom"><A href="javascript:popupOpen(' + $.trim($(this).parent().attr('id')) + ');">첨부</A> </SPAN>';	
			
		} else {
		
			console.log("rowdata: " + rowdata);
			console.log("aaddd55555");
			var html = '<a href="aaaa';
			html += '?id=' + id;
			html += '&line_id=' + name;
			html += '&file_id=' + rowdata;
			html += '">' + id + '</a>';
		}
		
		return html;

코드를 설명하면 해당 컬럼에 파일 id가 존재하면 파일명을 컬럼에 뿌려주고 없을 경우 버튼을 생성하여 업로드할 수 있는 기능을 만들었다.

'프론트엔드 > JavaScript' 카테고리의 다른 글

자바스크립트로 행 추가 하는 방법  (0) 2021.10.29
쿠키값 가져오기  (0) 2021.07.13
datepicker 이용 달력 출력  (0) 2021.07.12
정규표현식 - 패턴(표현)  (0) 2021.06.07
정규표현식3 - 플래그(옵션)  (0) 2021.06.07

개체가 'datepicker' 속성이나 메서드를 지원하지 않습니다

에러가 발생할 경우 확인 요소

JS로 datepicker를 호출하는 위치가 JQUERY 파일을 불러오는것보다 코드가 먼저 쓰여졌는지 확인

JQUERY를 불러오는 걸 먼저 해주어야한다.

또 중복으로 JQuery파일을 불러오는지 확인 해주어야한다.

 

다운로드

참고 사이트: https://programmer93.tistory.com/29

 

jQuery UI datepicker 사용법 - 삽질중인 개발자

- jQuery UI datepicker 사용법 및 옵션 정리 - jQuery Ui 중에서 datepicker는 간단한 option을 통한 캘린더 구현이 가능한 사용하기 편한 라이브러리다. 한글 캘린더 또한 구현이 가능하다. (좀 더 스타일리

programmer93.tistory.com

 

에러관련 참고 사이트: https://satto.tistory.com/entry/datepicker-%EC%82%AC%EC%9A%A9%EC%8B%9C-%EC%97%90%EB%9F%AC

 

datepicker 사용시 에러

SCRIPT438: 개체가 'datepicker' 속성이나 메서드를 지원하지 않습니다. cannot read property 'setdefaults' of undefined datepicker 에러시 해결 방법 상단에 js 파일을 이와같이 불러오고 하단에서 또 script..

satto.tistory.com

 

datepicker 맨위로 보여지도록 하는 방법 참고

: z-index값을 올려서 맨위로 보여지도록 설정한다.

https://okky.kr/article/412017?note=1292549 

 

OKKY | jQuery 달력을 맨 앞으로 나타내고 싶습니다 ㅠㅠ

안녕하세요 초보개발자 javanava입니다. [문제] jQuery 달력이 jqGrid와 jqPlot화면 뒤에 나타나는데 이걸 맨 앞으로 나타내고 싶습니다. [상황] IE가 input type week 기능을 지원하지 않기에 week polyfill을 다

okky.kr

https://okky.kr/article/412017?note=1292549 

 

OKKY | jQuery 달력을 맨 앞으로 나타내고 싶습니다 ㅠㅠ

안녕하세요 초보개발자 javanava입니다. [문제] jQuery 달력이 jqGrid와 jqPlot화면 뒤에 나타나는데 이걸 맨 앞으로 나타내고 싶습니다. [상황] IE가 input type week 기능을 지원하지 않기에 week polyfill을 다

okky.kr

 

// datepicker 호출하는 부분에 beforeShow 속성부분을 추가
$('.date_field').datepicker({
    //comment the beforeShow handler if you want to see the ugly overlay
    beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }
});

 

실질적으로 처리한 코드

$(document).ready(function() {
	//alert("radio: " + radio);
	/* 검색조건:날짜 (Datepicker적용) */
	$("input[name=order_start_date]").datepicker(
	{
		changeMonth : true,
		changeYear : true,
		showButtonPanel : true,
		dateFormat : "yy/mm/dd",
		beforeShow: function() {
	        setTimeout(function(){
	            $('.ui-datepicker').css('z-index', 9999);
	        }, 0);
	    }
		
	});

 

'프론트엔드 > JavaScript' 카테고리의 다른 글

쿠키값 가져오기  (0) 2021.07.13
JQGRID 사용  (0) 2021.07.12
정규표현식 - 패턴(표현)  (0) 2021.06.07
정규표현식3 - 플래그(옵션)  (0) 2021.06.07
정규표현식2 - 메소드  (0) 2021.06.07

패턴(표현)

 

패턴설명

^ab 줄 (Line) 시작에 있는 ab와 일치
ab$ 줄 (Line) 끝에 있는 ab와 일치
. 임의의 한 문자와 일치
a|b a 또는 b와 일치
ab? b가 없거나 b와 일치
{3} 3개 연속 일치
{3,} 3개 이상 연속 일치
{3,5} 3개 이상 5개 이하(3~5개) 연속 일치
[abc] a 또는 b 또는 c
[a-z] a 부터 z 사이의 문자 구간에 일치 (영어 소문자)
[A-Z] A 부터 Z 사이의 문자 구간에 일치 (영어 대문자)
[0-9] 0 부터 9 사이의 문자 구간에 일치 (숫자)
[가-힣] 가부터 힣 사이의 문자 구간에 일치 (한글)
\w 63개 문자 (Word, 대소영문52개 + 숫자10개 + _)에 일치
\b 63개 문자에 일치하지 않는 문자 경계(Boundary)
\d 숫자(Digit)에 일치
\s 공백(Space, Tab 등)에 일치
(?=) 앞쪽 일치(Lookahead)
(?<=) 뒤쪽 일치 (Lookbehind)
// 패턴
let str = `
010-1234-5678
thesecon@gmail.com;
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
abbcccdddd
http
d`

console.log(
  // d로 끝나는 부분을 찾는다.
  str.match(/d$/gm)
)

console.log(
  // t로 시작하는 부분을 찾는다.
  str.match(/^t/gm)
)

 

console.log(
  // h로 시작하고 p로 끝나는 문자를 찾는다 4자리
  str.match(/h..p/g)
)

console.log(
  // fox 또는 dog라는 값을 반환
  str.match(/fox|dog/g)
)

console.log(
  // s가 없거나 s가 있는 http로 시작하는 문자를 찾는다.
  str.match(/https?/g)
)

 

// d가 2번 반복되는 곳을 찾는다.
console.log(
  str.match(/d{2}/)
)

// d가 2번 이상 반복되는 곳을 찾는다.
console.log(
  str.match(/d{2,}/)
)

// 2글자 이상 3글자 이하인 단어 검색
// 숫자나 알파벳이 아닌 것을 구분자로 선언
console.log(
  str.match(/\b\w{2,3}\b/g)
)

// f 또는 o 또는 x 출력
console.log(
  str.match(/[fox]/g)
)

// f 또는 o 또는 x 출력 연속 되는 문자 출력
console.log(
  str.match(/[fox]{1,}/g)
)

// 0부터 9까지 연속되는 숫자 출력
console.log(
  str.match(/[0-9]{1,}/g)
)

// 모든 문자 출력
console.log(
  str.match(/\w/g)
)

// f로 시작하는 모든 영단어를 출력
console.log(
  str.match(/\bf\w{1,}\b/g)
)

// 연속된 숫자 모두 출력
console.log(
  str.match(/\d{1,}/g)
)

// 공백 문자 출력
console.log(
  str.match(/\s/g)
)

// 공백문자 활용
const h = `  the hello world !

`
//  공백문자 제거
console.log(
  h.replace(/\s/g, '')
)

// @앞쪽 일치 출력
console.log(
  str.match(/.{1,}(?=@)/g)
)
// @ 뒤쪽 일치 출력 
console.log(
  str.match(/(?<=@).{1,}/g)
)

 

'프론트엔드 > JavaScript' 카테고리의 다른 글

JQGRID 사용  (0) 2021.07.12
datepicker 이용 달력 출력  (0) 2021.07.12
정규표현식3 - 플래그(옵션)  (0) 2021.06.07
정규표현식2 - 메소드  (0) 2021.06.07
정규 표현식  (0) 2021.06.07

플래그(옵션)

플래그설명

g 모든 문자 일치(global)
i 영어 대소문자 구분 않고 일치 (ignore case)
m 여러 줄 일치 (multi line)

예제

const str = `
010-1234-5678
hello@gmail.com;
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
abbcccdddd
`

// 플래그
const regexp = /the/
console.log(str.match(regexp))

const regexp2 = /the/g
console.log(str.match(regexp2))

const regexp3 = /the/gi
console.log(str.match(regexp3))

이스케이프 문자

\(백슬래시)기호를 통해 본래의 기능에서 벗어나 상태가 바뀌는 문자를 말한다.

// 백슬래시 기호 이용 (일반적인 문자로 변환)
// 마침표로 끝나는 부분을 찾아줌
console.log(str.match(/\.$/gim))

 

'프론트엔드 > JavaScript' 카테고리의 다른 글

datepicker 이용 달력 출력  (0) 2021.07.12
정규표현식 - 패턴(표현)  (0) 2021.06.07
정규표현식2 - 메소드  (0) 2021.06.07
정규 표현식  (0) 2021.06.07
JS 데이터 - OMDB API  (0) 2021.06.05

참고

정규표현식, 이렇게 시작하자! | HEROPY

 

정규표현식, 이렇게 시작하자!

매일 쓰는 것도, 가독성이 좋은 것도 아니지만, 모르면 안되는 정규표현식. 저는 이렇게 공부하기 시작했습니다! (자바스크립트를 기준으로 설명합니다)

heropy.blog

test

정규식.test(문자열): 일치 여부 (Boolean) 반환

 

match

문자열.match(정규식): 일치하는 문자열의 배열(Array) 반환

 

replace

문자열.replace(정규식, 대체문자): 일치하는 문자열을 대체하고 대체된 문자열(String) 반환

 

예제

const str = `
010-1234-5678
hello@gmail.com;
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
abbcccdddd
`

// test(): boolean 값으로 반환
const regexp = /fox/gi
console.log(regexp.test(str))

// replace 문자 대체
console.log(str.replace(regexp, 'AAA'))

'프론트엔드 > JavaScript' 카테고리의 다른 글

정규표현식 - 패턴(표현)  (0) 2021.06.07
정규표현식3 - 플래그(옵션)  (0) 2021.06.07
정규 표현식  (0) 2021.06.07
JS 데이터 - OMDB API  (0) 2021.06.05
JS 데이터 - Storage  (0) 2021.06.04

+ Recent posts