개발자.. 너란놈..

오랜만에 또 개발 관련된 블로그를 적습니다.

현재 기준으로 저번달 첫일 , 다음달 말일을 구해서 세팅해야 되서 아래와 같이 구현하였습니다.

하나의 함수로 사용하기 위해 파라미터는 '현재날짜' , '이전 , 다음'을 넣어두었습니다

코드는 아래와 같이 사용 하면 됩니다.

//vDate : yyyymmdd or yyyy-mm-dd / vType : Prev(이전달) , Next(다음달)
function fnSetPrevNextDate(vDate, vType) {

    var vValue = vDate;
    var vValue_Num = vValue.replace(/[^0-9]/g, "");

    if (_fnToNull(vValue_Num) == "") {
        _fnAlertMsg("날짜를 입력 해 주세요.");
        return false;
    }

    //8자리가 아닌 경우 false
    if (vValue_Num.length != 8) {
        _fnAlertMsg("날짜를 20200101 or 2020-01-01 형식으로 입력 해 주세요.");
        return false;
    }

    var vYYYY = vValue_Num.substring(0, 4);
    var vMM = vValue_Num.substring(4, 6);
    var vDD = vValue_Num.substring(6, 8);

    var d = new Date(vMM + "/" + vDD + "/" + vYYYY);
    var monthOfYear = d.getMonth();
    
    if (vType == "Prev") {
        d.setMonth(monthOfYear - 1);
        vValue = d.getFullYear() + "-" + _pad(d.getMonth() + 1, 2) + "-" + "01";
    }
    else if (vType == "Next") {
        d.setMonth(monthOfYear + 1);
        var vDate = new Date(d.getFullYear(), d.getMonth() + 1, 0);
        vValue = vDate.getFullYear() + "-" + _pad(vDate.getMonth() + 1, 2) + "-" + _pad(vDate.getDate(), "2");
    }    

    return vValue;
}

//숫자 width만큼 앞에 0 붙혀주는 함수 EX) widht = 2일떄 1은 01로 찍힘
function _pad(n, width) {
    n = n + '';
    return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
}

InnerHTML , append 등등

새롭게 데이터를 받아서 그려진 조회 리스트 및 데이터의 HTML의 데이터를 가져오기는 쉽지 않은거 같습니다.

Height 길이를 가져와야되는 부분이 생겼는데 해당 부분 가져오는 스크립트 입니다.

$("생성자").prop('scrollHeight');

오랜만에 삽질 덕분에 1시간 정도 허비 한거 같습니다.. ㅎㅎ;;

오랜만에 찾아 뵙습니다.

현재 회사에서는 Ajax 파리미터를 단일건으로만 보내고 있었습니다.

Object 형식으로 DataTable 형태로 파라미터를 던져 중요한 데이터만 가지고 쿼리를 조지는 형태로만 사용중이였는데

MASTER / DETAIL 형태로 데이터를 가져가야만 하는 로직이 생겨서 아래와 같이 정리합니다.

1. JAVASCRIPT (Json 형태 만들기)

var array_mst = new Array();
        var array_dtl = new Array();
        var final_vJsonData = new Object();
        var vJsonData_MST = new Object;
        vJsonData_MST.MST_A = "";
        vJsonData_MST.MST_B = "";
        vJsonData_MST.MST_C = "";
        vJsonData_MST.MST_D = "";
        array_mst.push(vJsonData_MST);

        $.each($("#PutAway_Result_Area tr"), function (i) {

            var vJsonData_DTL = new Object;

            vJsonData_DTL.DTL_A = "";
            vJsonData_DTL.DTL_B = "";
            vJsonData_DTL.DTL_C = "";
            vJsonData_DTL.DTL_D = "";

            array_dtl.push(vJsonData_DTL);
        });

        final_vJsonData.MST = array_mst;
        final_vJsonData.DTL = array_dtl;

2. AJAX

$.ajax({
    type: "POST",
    url: "",
    async: true,
    dataType: "json",
    data: { "vJsonData": _fnMakeJson(final_vJsonData) },
    success: function (result) {
        alert();
    }, error: function (xhr, status, error) {
        console.log(error);
    }
});

//C#의 JsonConvert.DeserializeObject<DataSet> 쓰기위해서는 양쪽의 대괄호를 빼야됨
function _fnMakeJson(data) {
    if (data != undefined) {
        var str = JSON.stringify(data);
        if (str.indexOf("[") == -1) {
            str = "[" + str + "]";
        }
        return str;
    }
}

3. C#

DataSet ds = JsonConvert.DeserializeObject<DataSet>(JSON파라미터);

이와같이 Dataset으로 데이터를 가져와서 조지면 되는것을 2시간이나 허비하면서 삽질 하여 적어둡니다.

다음엔 이런 실수 안하길..

안녕하세요

오랜만에 글을 적으러 왔습니다.

프로젝트 로컬에 이미지가 있는지 여부를 확인 해야되는 상황이 있었는데 아래와 같은 코드로 

확인 후 Boolean 처리로 할 수 있는걸 알게 되어서 정리 합니다.

이미지뿐만 아니라 다른 파일들도 가능 할 것으로 보입니다.

//이미지 여부 체크
function fnImgChk(url) {

    var vResult;

    $.ajax({
        url: url,
        type: 'HEAD',
        async: false,
        success: function () {
            vResult = true;
        },
        error: function () {
            vResult = false;
        }
    });

    return vResult;
}

달력 넘기듯 이전 다음을 클릭 시 년/월이 자동으로 세팅 되게 한 함수 입니다.

기본적으로 '월' 만 체크하여 년도 계산도 같이 합니다.

////////////////////전역 변수//////////////////////////
var _vSelectDate = new Date();

//년월 이전 다음 세팅하기 vLR은 L은 이전달 / R은 다음달 입니다.
function fnSetYearMonth(vLR) {
    try {
    	//cal_date는 YYYY.MM 으로 세팅 되어있습니다. 그렇기 때문에 마지막 2자리(월)만 짤라서 씁니다.
        var vValue = Number($("#cal_date").text().slice(-2, $("#cal_date").text().length)-1);

        if (vLR == "L") {
            if (vValue == 0) {
                _vSelectDate = new Date((_vSelectDate.getFullYear() - 1), 11, 1);
            } else {
                _vSelectDate = new Date(_vSelectDate.getFullYear(), (vValue-1), 1);
            }
        }
        else if (vLR == "R") {
            if (vValue == 12) {
                _vSelectDate = new Date((_vSelectDate.getFullYear() + 1), 0, 1);
            } else {
                _vSelectDate = new Date(_vSelectDate.getFullYear(), (vValue+1), 1);
            }
        }

        var weekYear = _vSelectDate.getFullYear();
        var weekMonth = _vSelectDate.getMonth()+1;

        var result = weekYear + "." + _pad(weekMonth, "2");
        return result;
    }
    catch (err) {
        console.log("[Error - _fnSetYearMonth]" + err.message);
    }
}

date는 -1을 해야되는데 문과다 보니까 머리가 잘 안돌아가네요..

숫자 계산 힘들다 ㅠ ㅠ 

안녕하세요

또 한달만에 작성하는 블로그 입니다.

구글 API를 사용하여 Marker를 여러개 세팅하고 클릭하면 해당 ID를 가져와서 해당 마커의 대한 데이터를 가져오려고  

만든 소스 입니다.

다른 분들도 필요할지 모르겠지만..

map = new google.maps.Map(document.getElementById('google_map'), {        
        center: {
            lat: 37.551073,
            lng: 126.987893
        },
        zoom: 10,        
        //zoomControl: false,  줌 컨트롤
        streetViewControl: false, //로드뷰 아이콘 on/off        
        mapTypeControl : false //맵 타입 on/off (지도 , 위성)
    });

    //Marker 위치 세팅 (label , 경도 , 위도 , 아이디)
    var locations = [
        ['서울역', 37.5546788, 126.9706069,'idtest1'],
        ['서울특별시청', 37.5668260, 126.9786567, 'idtest2'],
        ['을지로입구역', 37.5660373, 126.9821930, 'idtest3'],
        ['덕수궁', 37.5655638, 126.974894, 'idtest4'],
    ];   

    //var infowindow = new google.maps.InfoWindow();
    var marker, i;

	//위치를 세팅 시켜줍니다.
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            id: locations[i][3]
        });

		//Marker를 찍었을 때 클릭 이벤트
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                alert(this.id); //아이디 가져오기

                ////중심 위치를 클릭된 마커의 위치로 변경
                //map.setCenter(this.getPosition());
              
                ////마커 클릭 시의 줌 변화
                //map.setZoom(14);

                //마커 클릭 시 label 및 데이터 보여주기
                //infowindow.setContent(locations[i][0]);
                //infowindow.open(map, marker);
            }
        })(marker, i));
    }

해당 건은 여러개의 블로그를 보고 만들었습니다.

감사합니다 :D

오랜만에 인사드립니다.

새롭게 코딩을 요즘 잘 안하다 보니 기존에 썼던거만 쓰네요..

//4자리 시간 확인하여 AM/PM 구하기
function _fnSetAMPM(vTime) {
    var vValue = vTime.substr("0", "2");
    var vAMPM = vValue >= 12 ? "PM" : "AM";

    return vAMPM;    
}

table을 사용하다 보면 제목? table head 부분을 고정시키고 아래있는 Tbody (Table Body)부분은 스크롤을 만들어서 사용 하고 싶을 떄가 있습니다.

물론 CSS로 조지면 당연히 원하는대로 만들 수 있지만 빠르게 만들어야 하고 CSS도 많이 건들여야 하는 상황에서는 어떻게 해야될까요?

답은 아래에 있습니다.

slimScrollBar API를 사용하면 됩니다.

http://rocha.la/jQuery-slimScroll

https://github.com/rochal/jQuery-slimScroll

심플하게 사용해 볼까요?

아래의 HTML이 있습니다. 

Id는 SlimScrollBar를 위해 만들었습니다.

<div>
	<table>
    	<thead>
        	<tr>
            	<th>행고정</th>
                <th>행고정</th>
                <th>행고정</th>
                <th>행고정</th>
            </tr>
        </thead>
        <tbody id="slimScroll">
        	<tr>
            	<td>Test1<td>
                <td>Test1<td>
                <td>Test1<td>
                <td>Test1<td>
            </tr>
        </tbody>
    </table>

</div>

JavaScript

$('#slimScroll').slimScroll({  
  size : "5px", //스크롤 사이즈
  alwaysVisible: true //항상 보여줄 것인지  
})

이렇게 HTML을 만들고 JavaScript에 SlimScroll을 넣으면 그 해당 영역에는 스크롤이 얉게 생길 겁니다 ㅎ

이 것으로 테이블에 제목 행을 고정하고 내용에 스크롤이 들어가는 API 사용법을 알게 되었습니다.

직접 사이트에 들어가면 slimScroll의 속성들도 많이 있으니 한번정도 읽어보시는게 좋을 것 같습니다.